refactor(project): refactor pmi link

netless-io · Oct 23, 2023 · 35c0def · 35c0def
1 parent ef0dd3d
commit 35c0def
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 74 deletions.
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -536,8 +536,6 @@
   "user-pmi-drained": "User PMI used up, please contact the administrator",
   "pmi-room-exist": "PMI room already exists, please cancel existing PMI room first",
   "pmi-help": "Your own room number, you can use this fixed number to create a room",
-  "get-link": "Create room to generate link",
-  "get-pmi": "Generate PMI",
   "personal-room-id": "Personal Room ID",
   "personal-room-link": "Personal Room Link",
   "upload-avatar": "Upload Avatar",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -536,8 +536,6 @@
   "user-pmi-drained": "用户PMI已分配完，请联系管理员",
   "pmi-room-exist": "个人房间已存在，请先取消已存在的房间",
   "pmi-help": "你的专属房间号，可使用该固定号码创建房间",
-  "get-link": "创建房间获取邀请链接",
-  "get-pmi": "获取",
   "personal-room-id": "个人房间号",
   "personal-room-link": "个人房间链接",
   "upload-avatar": "上传头像",

diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx
@@ -55,6 +55,16 @@ export const CreateRoomBox = observer<CreateRoomBoxProps>(function CreateRoomBox
         pmi: preferencesStore.autoPmiOn && !globalStore.pmiRoomExist,
     };
 
+    useEffect(() => {
+        const checkPmi = (): void => {
+            if (!globalStore.pmi) {
+                globalStore.updatePmi();
+            }
+        };
+
+        checkPmi();
+    }, [globalStore]);
+
     useEffect(() => {
         let ticket = NaN;
         if (isShowModal) {

diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/index.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/index.tsx
@@ -3,7 +3,7 @@ import "./MainRoomMenu.less";
 import React, { FC, useContext } from "react";
 import { Col, Row } from "antd";
 import { Region } from "flat-components";
-import { RoomType, listPmi } from "@netless/flat-server-api";
+import { RoomType } from "@netless/flat-server-api";
 import { GlobalStoreContext, RoomStoreContext } from "../../components/StoreProvider";
 import { RouteNameType, usePushHistory } from "../../utils/routes";
 import { CreateRoomBox } from "./CreateRoomBox";
@@ -58,7 +58,7 @@ export const MainRoomMenu: FC = () => {
 
             if (pmi) {
                 // update pmi room list
-                globalStore.updatePmiRoomList((await listPmi()) || []);
+                globalStore.updatePmiRoomList();
             }
 
             await onJoinRoom(roomUUID);

diff --git a/packages/flat-pages/src/LoginPage/utils/state.ts b/packages/flat-pages/src/LoginPage/utils/state.ts
@@ -9,7 +9,7 @@ import { githubLogin } from "../githubLogin";
 import { googleLogin } from "../googleLogin";
 import { WindowsSystemBtnContext } from "../../components/StoreProvider";
 import { loginMachine, ToggleEventsType } from "./machine";
-import { LoginProcessResult, createOrGetPmi, listPmi } from "@netless/flat-server-api";
+import { LoginProcessResult } from "@netless/flat-server-api";
 import { LoginButtonProviderType } from "flat-components";
 import { LoginDisposer } from "./disposer";
 import { NODE_ENV } from "../../constants/process";
@@ -87,8 +87,8 @@ export function useLoginState(): LoginState {
     const onLoginResult = useCallback(
         async (authData: LoginProcessResult | null, account?: Account) => {
             globalStore.updateUserInfo(authData);
-            globalStore.updatePmi((await createOrGetPmi({ create: true }))?.pmi || null);
-            globalStore.updatePmiRoomList((await listPmi()) || []);
+            globalStore.updatePmi();
+            globalStore.updatePmiRoomList();
 
             if (!authData) {
                 setLoginResult(null);

diff --git a/packages/flat-pages/src/UserScheduledPage/index.tsx b/packages/flat-pages/src/UserScheduledPage/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { isBefore, addMinutes, roundToNearestMinutes, getDay, addWeeks } from "date-fns";
 import { EditRoomFormValues } from "flat-components";
@@ -59,6 +59,16 @@ export const UserScheduledPage = observer(function UserScheduledPage() {
         };
     });
 
+    useEffect(() => {
+        const checkPmi = (): void => {
+            if (!globalStore.pmi) {
+                globalStore.updatePmi();
+            }
+        };
+
+        checkPmi();
+    }, [globalStore]);
+
     return (
         <EditRoomPage
             autoPmiOn={preferencesStore.autoPmiOn}

diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
@@ -6,7 +6,7 @@ import phoneSVG from "./icons/phone.svg";
 import emailSVG from "./icons/email.svg";
 import lockSVG from "./icons/lock.svg";
 
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { FlatI18n, useLanguage, useTranslate } from "@netless/flat-i18n";
 import { Button, Checkbox, message, Modal, Radio } from "antd";
 import { observer } from "mobx-react-lite";
@@ -20,7 +20,6 @@ import {
 } from "flat-components";
 import {
     LoginPlatform,
-    createOrGetPmi,
     deleteAccount,
     deleteAccountValidate,
     loginCheck,
@@ -70,15 +69,25 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
 
     const hasPassword = useMemo(() => globalStore.hasPassword, [globalStore.hasPassword]);
     const personalLink = useMemo(
-        () => globalStore.pmiRoomExist && `${FLAT_WEB_BASE_URL}/join/${globalStore.pmiRoomUUID}`,
-        [globalStore.pmiRoomExist, globalStore.pmiRoomUUID],
+        () => `${FLAT_WEB_BASE_URL}/join/${globalStore.pmi}`,
+        [globalStore.pmi],
     );
 
     const loginButtons = useMemo(
         () => process.env.LOGIN_METHODS.split(",") as LoginButtonProviderType[],
         [],
     );
 
+    useEffect(() => {
+        const checkPmi = (): void => {
+            if (!globalStore.pmi) {
+                globalStore.updatePmi();
+            }
+        };
+
+        checkPmi();
+    }, [globalStore]);
+
     async function changeUserName(): Promise<void> {
         if (name !== globalStore.userName) {
             await sp(rename(name));
@@ -167,19 +176,6 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
         [t],
     );
 
-    const handlePmi = useCallback(async () => {
-        try {
-            const { pmi = null } = await createOrGetPmi({ create: true });
-            globalStore.updatePmi(pmi);
-        } catch (err) {
-            errorTips(err);
-        }
-    }, [globalStore]);
-
-    const generatePersonalLink = useCallback(() => {
-        pushHistory(RouteNameType.HomePage);
-    }, [pushHistory]);
-
     return (
         <UserSettingLayoutContainer>
             <div className="general-setting-container">
@@ -204,26 +200,14 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                                     <PmiExistTip title={t("pmi-help")} />
                                 </span>
 
-                                {globalStore.pmi ? (
-                                    <>
-                                        <span>{globalStore.pmi}</span>
-                                        <Button
-                                            className="general-setting-item-btn"
-                                            type="link"
-                                            onClick={() => handleCopy(globalStore.pmi!)}
-                                        >
-                                            <SVGCopy />
-                                        </Button>
-                                    </>
-                                ) : (
-                                    <Button
-                                        className="ant-btn-link"
-                                        type="link"
-                                        onClick={handlePmi}
-                                    >
-                                        {t("get-pmi")}
-                                    </Button>
-                                )}
+                                <span>{globalStore.pmi}</span>
+                                <Button
+                                    className="general-setting-item-btn"
+                                    type="link"
+                                    onClick={() => handleCopy(globalStore.pmi!)}
+                                >
+                                    <SVGCopy />
+                                </Button>
                             </div>
                         </div>
 
@@ -233,26 +217,14 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                                     {t("personal-room-link")}
                                 </span>
 
-                                {personalLink ? (
-                                    <>
-                                        <span title={personalLink}>{personalLink}</span>
-                                        <Button
-                                            className="general-setting-item-btn"
-                                            type="link"
-                                            onClick={() => handleCopy(personalLink)}
-                                        >
-                                            <SVGCopy />
-                                        </Button>
-                                    </>
-                                ) : (
-                                    <Button
-                                        className="ant-btn-link"
-                                        type="link"
-                                        onClick={generatePersonalLink}
-                                    >
-                                        {t("get-link")}
-                                    </Button>
-                                )}
+                                <span title={personalLink}>{personalLink}</span>
+                                <Button
+                                    className="general-setting-item-btn"
+                                    type="link"
+                                    onClick={() => handleCopy(personalLink)}
+                                >
+                                    <SVGCopy />
+                                </Button>
                             </div>
                         </div>
                     </div>

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -10,7 +10,6 @@ import {
     RoomStatus,
     RoomType,
     checkRTMCensor,
-    listPmi,
 } from "@netless/flat-server-api";
 import { FlatI18n } from "@netless/flat-i18n";
 import { errorTips, message } from "flat-components";
@@ -1373,7 +1372,7 @@ export class ClassroomStore {
 
                     if (globalStore.pmiRoomUUID === this.roomUUID) {
                         // remove pmi room id list
-                        globalStore.updatePmiRoomList((await listPmi()) || []);
+                        globalStore.updatePmiRoomList();
                     }
                     break;
                 }

diff --git a/packages/flat-stores/src/global-store.ts b/packages/flat-stores/src/global-store.ts
@@ -3,6 +3,8 @@ import {
     LoginProcessResult,
     setFlatAuthToken,
     ServerRegionConfigResult,
+    createOrGetPmi,
+    listPmi,
 } from "@netless/flat-server-api";
 import { autorun } from "mobx";
 import { autoPersistStore } from "./utils/auto-persist-store";
@@ -121,12 +123,12 @@ export class GlobalStore {
         });
     }
 
-    public updatePmi = (pmi: string | null): void => {
-        this.pmi = pmi;
+    public updatePmi = async (pmi?: string | null): Promise<void> => {
+        this.pmi = pmi ?? ((await createOrGetPmi({ create: true }))?.pmi || null);
     };
 
-    public updatePmiRoomList = (pmiRoomList: PmiRoom[]): void => {
-        this.pmiRoomList = pmiRoomList;
+    public updatePmiRoomList = async (pmiRoomList?: PmiRoom[]): Promise<void> => {
+        this.pmiRoomList = pmiRoomList ?? ((await listPmi()) || []);
     };
 
     public updateUserInfo = (userInfo: UserInfo | null): void => {

diff --git a/packages/flat-stores/src/preferences-store.ts b/packages/flat-stores/src/preferences-store.ts
@@ -29,7 +29,7 @@ export class PreferencesStore {
     /** selected speaker device id on devices test page */
     public speakerId?: string | null = null;
 
-    public autoPmiOn = true;
+    public autoPmiOn = false;
 
     public prefersColorScheme: FlatPrefersColorScheme = "light";