Skip to content

Commit f931514

Browse files
syt-honeyhyrious
syt-honey
and
hyrious
authored
refactor(flat-stores): add countryCode to history & keep first 10 accounts (#1994)
* refactor(flat-stores): add countryCode to history & keep first 10 accounts * fix a MobX warning and improve typing --------- Co-authored-by: hyrious <hyrious@outlook.com>
1 parent 3ebeec3 commit f931514

File tree

7 files changed

+75
-27
lines changed

7 files changed

+75
-27
lines changed

‎packages/flat-components/src/components/LoginPage/LoginAccount/LoginAccount.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,17 @@ Overview.args = {
4040
{
4141
key: "12345678901",
4242
password: "password123",
43+
countryCode: "+86",
4344
},
4445
{
4546
key: "12345678911",
4647
password: "password124",
48+
countryCode: "+65",
4749
},
4850
{
4951
key: "example@mail.com",
5052
password: "password125",
53+
countryCode: null,
5154
},
5255
],
5356
// This means we choose the 'both' account input

‎packages/flat-components/src/components/LoginPage/LoginAccount/index.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export interface LoginAccountProps {
3636

3737
// history props
3838
password?: string;
39-
accountHistory?: Array<{ key: string; password: string }> | [];
39+
accountHistory?: Array<{ key: string; password: string; countryCode?: string | null }> | [];
4040
onHistoryChange?: (options: any) => void;
4141
}
4242

@@ -99,7 +99,11 @@ export const LoginAccount: React.FC<LoginAccountProps> = ({
9999
>
100100
{accountHistory.map(account => {
101101
return (
102-
<Select.Option key={account.password} value={account.key}>
102+
<Select.Option
103+
key={account.password}
104+
title={account.countryCode}
105+
value={account.key}
106+
>
103107
{account.key}
104108
</Select.Option>
105109
);
@@ -115,6 +119,7 @@ export const LoginAccount: React.FC<LoginAccountProps> = ({
115119
<Select
116120
bordered={false}
117121
defaultValue={countryCode}
122+
value={countryCode}
118123
onChange={handleCountryCode}
119124
>
120125
{COUNTRY_CODES.map(code => (

‎packages/flat-components/src/components/LoginPage/LoginWithPassword/LoginWithPassword.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,17 @@ Overview.args = {
2020
{
2121
key: "12345678901",
2222
password: "password123",
23+
countryCode: "+86",
2324
},
2425
{
2526
key: "12345678911",
2627
password: "password124",
28+
countryCode: "+65",
2729
},
2830
{
2931
key: "example@mail.com",
3032
password: "password125",
33+
countryCode: null,
3134
},
3235
],
3336
login: (type: PasswordLoginType, { key }, password: string) => {

‎packages/flat-components/src/components/LoginPage/LoginWithPassword/index.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export enum PasswordLoginPageType {
2828
export type LoginKeyType = {
2929
key: string;
3030
originKey: string;
31+
countryCode: string | null;
3132
};
3233

3334
interface LoginFormValues {
@@ -40,7 +41,7 @@ export interface LoginWithPasswordProps {
4041
buttons?: LoginButtonProviderType[];
4142
privacyURL?: LoginAgreementProps["privacyURL"];
4243
serviceURL?: LoginAgreementProps["serviceURL"];
43-
accountHistory: Array<{ key: string; password: string }> | [];
44+
accountHistory: Array<{ key: string; password: string; countryCode?: string | null }>;
4445
login: (type: PasswordLoginType, key: LoginKeyType, password: string) => Promise<boolean>;
4546
register: () => void;
4647
onClickButton: LoginButtonsProps["onClick"];
@@ -88,7 +89,10 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
8889
const [agreed, setAgreed] = useState(false);
8990
const [clickedLogin, setClickedLogin] = useState(false);
9091
const [clickedReset, setClickedReset] = useState(false);
91-
const [countryCode, setCountryCode] = useState(defaultCountryCode);
92+
const firstAccount = accountHistory.length > 0 ? accountHistory[0] : null;
93+
const [countryCode, setCountryCode] = useState(
94+
(firstAccount && firstAccount.countryCode) || defaultCountryCode,
95+
);
9296
const [type, setType] = useState(PasswordLoginType.Phone);
9397

9498
const phone = type === PasswordLoginType.Phone;
@@ -99,8 +103,8 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
99103
const [isAccountValidated, setIsAccountValidated] = useState(false);
100104

101105
const defaultValues = {
102-
key: accountHistory.length > 0 ? accountHistory[0]?.key : "",
103-
password: accountHistory.length > 0 ? accountHistory[0]?.password : "",
106+
key: firstAccount?.key || "",
107+
password: firstAccount?.password || "",
104108
code: undefined,
105109
};
106110
const [password, setPassword] = useState(defaultValues.password);
@@ -123,6 +127,7 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
123127
{
124128
key: phone ? countryCode + keyValue : keyValue,
125129
originKey: keyValue,
130+
countryCode: phone ? countryCode : null,
126131
},
127132
password,
128133
),
@@ -149,6 +154,7 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
149154
{
150155
key: phone ? countryCode + keyValue : keyValue,
151156
originKey: keyValue,
157+
countryCode: phone ? countryCode : null,
152158
},
153159
code,
154160
password,
@@ -230,6 +236,10 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
230236
password={password}
231237
placeholder={t("enter-email-or-phone")}
232238
onHistoryChange={options => {
239+
if (options.title) {
240+
setCountryCode(options.title);
241+
}
242+
233243
form.setFieldsValue({
234244
key: options.value,
235245
password: options.key,

‎packages/flat-components/src/components/RegisterModal/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export const RegisterModal: React.FC<RegisterProps> = ({
110110
{
111111
key: phone ? countryCode + keyValue : keyValue,
112112
originKey: keyValue,
113+
countryCode: phone ? countryCode : null,
113114
},
114115
code,
115116
password,

‎packages/flat-pages/src/LoginPage/index.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const LoginPage = observer(function LoginPage() {
8080
{...loginProps}
8181
register={(
8282
type: PasswordLoginType,
83-
{ key, originKey }: LoginKeyType,
83+
{ key, originKey, countryCode }: LoginKeyType,
8484
code,
8585
password: string,
8686
) =>
@@ -93,7 +93,11 @@ export const LoginPage = observer(function LoginPage() {
9393
})
9494
: registerPhone(key, Number(code), password).then(() => {
9595
sp(loginPhoneWithPwd(key, password)).then(authInfo =>
96-
onLoginResult(authInfo, { key: originKey, password }),
96+
onLoginResult(authInfo, {
97+
key: originKey,
98+
password,
99+
countryCode,
100+
}),
97101
);
98102
}),
99103
)
@@ -137,22 +141,30 @@ export const LoginPage = observer(function LoginPage() {
137141
<LoginWithPassword
138142
{...loginProps}
139143
accountHistory={globalStore.accountHistory}
140-
login={async (type, { key, originKey }: LoginKeyType, password) =>
144+
login={async (
145+
type,
146+
{ key, originKey, countryCode }: LoginKeyType,
147+
password,
148+
) =>
141149
wrap(
142150
type === PasswordLoginType.Email
143151
? loginEmailWithPwd(key, password).then(authInfo =>
144152
onLoginResult(authInfo, { key: originKey, password }),
145153
)
146154
: loginPhoneWithPwd(key, password).then(authInfo =>
147-
onLoginResult(authInfo, { key: originKey, password }),
155+
onLoginResult(authInfo, {
156+
key: originKey,
157+
password,
158+
countryCode,
159+
}),
148160
),
149161
)
150162
}
151163
loginWithVerificationCode={() => setCurrentState("SWITCH_TO_CODE")}
152164
register={() => setCurrentState("SWITCH_TO_REGISTER")}
153165
resetPassword={(
154166
type: PasswordLoginType,
155-
{ key, originKey }: LoginKeyType,
167+
{ key, originKey, countryCode }: LoginKeyType,
156168
code: string,
157169
password: string,
158170
) =>
@@ -165,7 +177,11 @@ export const LoginPage = observer(function LoginPage() {
165177
})
166178
: resetPwdWithPhone(key, Number(code), password).then(() => {
167179
sp(loginPhoneWithPwd(key, password)).then(authInfo =>
168-
onLoginResult(authInfo, { key: originKey, password }),
180+
onLoginResult(authInfo, {
181+
key: originKey,
182+
password,
183+
countryCode,
184+
}),
169185
);
170186
}),
171187
)

‎packages/flat-stores/src/global-store.ts

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export type ServerRegionConfig = ServerRegionConfigResult;
1616
export type Account = {
1717
key: string;
1818
password: string;
19+
20+
// if `key` type is phone, countryCode is string
21+
// else countryCode is null
22+
countryCode?: string | null;
1923
};
2024

2125
/**
@@ -34,7 +38,7 @@ export class GlobalStore {
3438

3539
// login with password
3640
public currentAccount: Account | null = null;
37-
public accountHistory: Account[] | [] = [];
41+
public accountHistory: Account[] = [];
3842

3943
public whiteboardRoomUUID: string | null = null;
4044
public whiteboardRoomToken: string | null = null;
@@ -219,22 +223,28 @@ export class GlobalStore {
219223
this.currentAccount = null;
220224
};
221225

222-
public updateAccountHistory = ({ key, password }: Account): void => {
226+
public updateAccountHistory = ({ key, password, countryCode }: Account): void => {
227+
const originAccount = this.accountHistory.find(o => o.key === key);
228+
let originCode: string | null = countryCode || null;
229+
230+
// update account password will pass this condition
231+
if (!originCode && originAccount && originAccount.countryCode) {
232+
originCode = originAccount.countryCode;
233+
}
234+
223235
// update current account
224-
this.currentAccount = { key, password };
225-
226-
const hash: Record<string, boolean> = {};
227-
this.accountHistory = [{ key, password }, ...this.accountHistory].reduce(
228-
(history: Account[], next: Account) => {
229-
if (!hash[next.key]) {
230-
hash[next.key] = true;
231-
history.push(next);
236+
this.currentAccount = { key, password, countryCode: originCode };
237+
238+
const hash = new Set();
239+
this.accountHistory = [{ key, password, countryCode: originCode }, ...this.accountHistory]
240+
.filter((next: Account) => {
241+
if (!hash.has(next.key)) {
242+
hash.add(next.key);
243+
return true;
232244
}
233-
234-
return history;
235-
},
236-
[],
237-
);
245+
return false;
246+
})
247+
.slice(0, 10); // keep the first ten accounts
238248
};
239249

240250
public updateServerRegionConfig = (config: ServerRegionConfig | null): void => {

0 commit comments

Comments
 (0)