refactor(project): optimize store provider (netless-io#1615)

* refactor(project): optimize store provider

* refactor(project): abstract interface of the PageStoreContext

* refactor(web): rename

* refactor(project): using new page store

desktop/renderer-app/package.json

@@ -22,6 +22,7 @@
     "@netless/app-slide": "^0.2.2",
     "@netless/combine-player": "^1.1.6",
     "@netless/fastboard-react": "^0.3.6",
+    "@netless/flat-pages": "workspace:*",
     "@netless/flat-rtc": "workspace:*",
     "@netless/flat-rtc-agora-electron": "workspace:*",
     "@netless/player-controller": "^0.0.9",

desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx

@@ -1,12 +1,13 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { useIsomorphicLayoutEffect } from "react-use";
-import { RouteComponentProps } from "react-router-dom";
+import { RouteComponentProps, useLocation } from "react-router-dom";
 import { ipcAsyncByMainWindow } from "../utils/ipc";
 import { AppRouteErrorBoundary } from "./AppRouteErrorBoundary";
-import { useURLAppLauncher } from "../utils/hooks/use-url-app-launcher";
+// import { useURLAppLauncher } from "../utils/hooks/use-url-app-launcher";
 import { ConfigStoreContext } from "../components/StoreProvider";
 import { FlatThemeBodyProvider } from "flat-components";
 import { observer } from "mobx-react-lite";
+import { PageStoreContext } from "@netless/flat-pages/src/components/PageStoreContext";
 
 export interface AppRouteContainerProps {
     Comp: React.ComponentType<any>;
@@ -20,8 +21,15 @@ export const AppRouteContainer = observer<AppRouteContainerProps>(function AppRo
     routeProps,
 }) {
     const configStore = useContext(ConfigStoreContext);
+    const pageStore = useContext(PageStoreContext);
 
-    useURLAppLauncher();
+    const location = useLocation();
+
+    // useURLAppLauncher();
+
+    useEffect(() => {
+        pageStore.configure(location.pathname);
+    }, [location.pathname, pageStore]);
 
     useIsomorphicLayoutEffect(() => {
         const compName = Comp.displayName || Comp.name;

desktop/renderer-app/src/components/StoreProvider.tsx

@@ -2,22 +2,17 @@ import React, { createContext, FC } from "react";
 import { configStore } from "../stores/config-store";
 import { globalStore } from "../stores/global-store";
 import { roomStore } from "../stores/room-store";
-import { urlProtocolStore } from "../stores/url-protocol-store";
 
 export const GlobalStoreContext = createContext(globalStore);
 
 export const RoomStoreContext = createContext(roomStore);
 
 export const ConfigStoreContext = createContext(configStore);
 
-export const URLProtocolStoreContext = createContext(urlProtocolStore);
-
 export const StoreProvider: FC = ({ children }) => (
     <GlobalStoreContext.Provider value={globalStore}>
-        <URLProtocolStoreContext.Provider value={urlProtocolStore}>
-            <ConfigStoreContext.Provider value={configStore}>
-                <RoomStoreContext.Provider value={roomStore}>{children}</RoomStoreContext.Provider>
-            </ConfigStoreContext.Provider>
-        </URLProtocolStoreContext.Provider>
+        <ConfigStoreContext.Provider value={configStore}>
+            <RoomStoreContext.Provider value={roomStore}>{children}</RoomStoreContext.Provider>
+        </ConfigStoreContext.Provider>
     </GlobalStoreContext.Provider>
 );

desktop/renderer-app/src/stores/ipc-store.ts

@@ -0,0 +1,106 @@
+import { ipc } from "flat-types";
+import { ipcRenderer } from "electron";
+import { constants } from "flat-types";
+import { makeAutoObservable } from "mobx";
+import { routeConfig, RouteNameType } from "@netless/flat-pages/src/route-config";
+
+export class IPCStore {
+    public routePathName: RouteNameType | null = null;
+
+    public constructor() {
+        makeAutoObservable(this);
+    }
+
+    public configure = (routePathName?: string): void => {
+        console.log("route path name", routePathName);
+        switch (routePathName) {
+            case routeConfig[RouteNameType.HomePage].path: {
+                this.ipcAsyncByMainWindow("set-win-size", {
+                    ...constants.PageSize.Main,
+                });
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+
+    public ipcAsyncByMainWindow = <
+        T extends keyof ipc.WindowActionAsync,
+        U extends Parameters<ipc.WindowActionAsync[T]>[0],
+    >(
+        action: T,
+        args: U,
+    ): void => {
+        ipcRenderer.send(constants.WindowsName.Main, {
+            actions: action,
+            args,
+            browserWindowID: NaN,
+        });
+    };
+
+    public ipcAsyncByShareScreenTipWindow = <
+        T extends keyof ipc.WindowActionAsync,
+        U extends Parameters<ipc.WindowActionAsync[T]>[0],
+    >(
+        action: T,
+        args: U,
+    ): void => {
+        ipcRenderer.send(constants.WindowsName.ShareScreenTip, {
+            actions: action,
+            args,
+            browserWindowID: NaN,
+        });
+    };
+
+    public ipcAsyncByPreviewFileWindow = <
+        T extends keyof ipc.WindowActionAsync,
+        U extends Parameters<ipc.WindowActionAsync[T]>[0],
+    >(
+        action: T,
+        args: U,
+        browserWindowID: string,
+    ): void => {
+        ipcRenderer.send(constants.WindowsName.PreviewFile, {
+            actions: action,
+            args,
+            browserWindowID,
+        });
+    };
+
+    public ipcAsyncByApp = <
+        T extends keyof ipc.AppActionAsync,
+        U extends Parameters<ipc.AppActionAsync[T]>[0],
+    >(
+        action: T,
+        args?: U,
+    ): void => {
+        ipcRenderer.send(action, args);
+    };
+
+    public ipcSyncByApp = <
+        T extends keyof ipc.AppActionSync,
+        U extends Parameters<ipc.AppActionSync[T]>[0],
+    >(
+        action: T,
+        args?: U,
+    ): ReturnType<ipc.AppActionSync[T]> => {
+        return ipcRenderer.invoke(action, args) as any;
+    };
+
+    public ipcReceive = <T extends keyof ipc.EmitEvents, U extends ipc.EmitEvents[T]>(
+        action: T,
+        callback: (args: U) => void,
+    ): void => {
+        ipcRenderer.on(action, (_event, args) => {
+            callback(args as U);
+        });
+    };
+
+    public ipcReceiveRemove = <T extends keyof ipc.EmitEvents>(action: T): void => {
+        ipcRenderer.removeAllListeners(action);
+    };
+}
+
+export const ipcStore = new IPCStore();

desktop/renderer-app/src/tasks/init-ui.tsx

@@ -13,12 +13,14 @@ import { useUpdate } from "react-use";
 
 import { i18n } from "../utils/i18n";
 import { AppRoutes } from "../AppRoutes";
-import { StoreProvider } from "../components/StoreProvider";
+import { StoreProvider } from "@netless/flat-pages/src/components/StoreProvider";
+import { PageStoreContext } from "@netless/flat-pages/src/components/PageStoreContext";
 import { FlatRTCContext } from "../components/FlatRTCContext";
 import { getFlatRTC } from "../services/flat-rtc";
 
 /** configure right after import */
 import { configure } from "mobx";
+import { ipcStore } from "../stores/ipc-store";
 configure({
     isolateGlobalState: true,
 });
@@ -54,9 +56,11 @@ const App: React.FC = () => {
                 locale={antdLocale}
             >
                 <StoreProvider>
-                    <FlatRTCContext.Provider value={getFlatRTC()}>
-                        <AppRoutes />
-                    </FlatRTCContext.Provider>
+                    <PageStoreContext.Provider value={ipcStore}>
+                        <FlatRTCContext.Provider value={getFlatRTC()}>
+                            <AppRoutes />
+                        </FlatRTCContext.Provider>
+                    </PageStoreContext.Provider>
                 </StoreProvider>
             </ConfigProvider>
         </I18nextProvider>

packages/flat-pages/src/AppRoutes/AppRouteContainer.tsx

@@ -1,14 +1,16 @@
 import loadable from "@loadable/component";
 import React, { ComponentType, useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { RouteComponentProps } from "react-router-dom";
+import { RouteComponentProps, useLocation } from "react-router-dom";
 import { useIsomorphicLayoutEffect } from "react-use";
 import { FlatThemeBodyProvider, LoadingPage } from "flat-components";
-import { PreferencesStoreContext, PageStoreContext } from "../components/StoreProvider";
+import { PreferencesStoreContext } from "../components/StoreProvider";
 import { RouteNameType } from "../route-config";
 import { AppRouteErrorBoundary } from "./AppRouteErrorBoundary";
 import { routePages } from "./route-pages";
 import { observer } from "mobx-react-lite";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
+import { PageStoreContext } from "../components/PageStoreContext";
 
 export interface AppRouteContainerProps {
     name: RouteNameType;
@@ -36,13 +38,15 @@ export const AppRouteContainer = observer<AppRouteContainerProps>(function AppRo
     title,
     routeProps,
 }) {
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
     const pageStore = useContext(PageStoreContext);
     const preferencesStore = useContext(PreferencesStoreContext);
     const { t } = useTranslation();
+    const location = useLocation();
 
     useIsomorphicLayoutEffect(() => {
-        pageStore.setName(name);
-    }, [name, pageStore]);
+        pageStoreLegacy.setName(name);
+    }, [name, pageStoreLegacy]);
 
     useEffect(() => {
         document.title = t("title-" + title);
@@ -59,7 +63,14 @@ export const AppRouteContainer = observer<AppRouteContainerProps>(function AppRo
         }
     }, [Comp, name]);
 
-    const hasHeader = pageStore.name && routePages[pageStore.name].hasHeader;
+    useEffect(() => {
+        pageStore.configure(location.pathname);
+    }, [location.pathname, pageStore]);
+
+    const hasHeader =
+        pageStoreLegacy.name !== null &&
+        pageStoreLegacy.name &&
+        routePages[pageStoreLegacy.name].hasHeader;
 
     return (
         <FlatThemeBodyProvider prefersColorScheme={preferencesStore.prefersColorScheme}>

packages/flat-pages/src/CloudStoragePage/index.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
 import { CloudStorageContainer } from "flat-components";
-import { PageStoreContext } from "../components/StoreProvider";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
 import { CloudStorageStore } from "@netless/flat-stores";
 import { useLoginCheck } from "../utils/use-login-check";
 
@@ -19,10 +19,10 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
     );
     useEffect(() => store.initialize(), [store]);
 
-    const pageStore = useContext(PageStoreContext);
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => pageStore.configure(), []);
+    useEffect(() => pageStoreLegacy.configure(), []);
 
     return <CloudStorageContainer store={store} />;
 });

packages/flat-pages/src/HomePage/index.tsx

@@ -5,14 +5,14 @@ import { observer } from "mobx-react-lite";
 import { MainRoomMenu } from "./MainRoomMenu";
 import { MainRoomListPanel } from "./MainRoomListPanel";
 import { MainRoomHistoryPanel } from "./MainRoomHistoryPanel";
-import { PageStoreContext } from "../components/StoreProvider";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
 import { useLoginCheck } from "../utils/use-login-check";
 
 export const HomePage = observer(function HomePage() {
-    const pageStore = useContext(PageStoreContext);
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => pageStore.configure(), []);
+    useEffect(() => pageStoreLegacy.configure(), []);
 
     const isLogin = useLoginCheck();
 

packages/flat-pages/src/JoinPage/index.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from "react-i18next";
 import { useWindowSize } from "react-use";
 
 import { RouteNameType, RouteParams, usePushHistory } from "../utils/routes";
-import { GlobalStoreContext, PageStoreContext } from "../components/StoreProvider";
+import { GlobalStoreContext } from "../components/StoreProvider";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
 import { loginCheck } from "@netless/flat-server-api";
 import { joinRoomHandler } from "../utils/join-room-handler";
 import { PRIVACY_URL, PRIVACY_URL_CN, SERVICE_URL, SERVICE_URL_CN } from "../constants/process";
@@ -19,15 +20,15 @@ export const JoinPage = observer(function JoinPage() {
     const { i18n } = useTranslation();
     const pushHistory = usePushHistory();
     const globalStore = useContext(GlobalStoreContext);
-    const pageStore = useContext(PageStoreContext);
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
     const [isLogin, setIsLogin] = useState(false);
     const { width } = useWindowSize(1080);
 
     const params = useParams<RouteParams<RouteNameType.ReplayPage>>();
     const { roomUUID } = params;
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => pageStore.configure(), []);
+    useEffect(() => pageStoreLegacy.configure(), []);
 
     useEffect(() => {
         async function checkLogin(): Promise<void> {

packages/flat-pages/src/PeriodicRoomDetailPage/index.tsx

@@ -7,7 +7,8 @@ import React, { useContext, useEffect, useState } from "react";
 import { useLastLocation } from "react-router-last-location";
 import { LoadingPage, PeriodicRoomPanel, errorTips } from "flat-components";
 import { useTranslation } from "react-i18next";
-import { PageStoreContext, RoomStoreContext } from "../components/StoreProvider";
+import { RoomStoreContext } from "../components/StoreProvider";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
 import { globalStore } from "@netless/flat-stores";
 import { RouteNameType, RouteParams, usePushHistory } from "../utils/routes";
 import {
@@ -27,7 +28,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
     const history = useHistory();
     const pushHistory = usePushHistory();
     const previousPage = useLastLocation();
-    const pageStore = useContext(PageStoreContext);
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
 
     useEffect(() => {
         // if the room has been cancelled and return to the previous page, an error will be reported
@@ -49,7 +50,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
 
         const title = periodicInfo?.periodic.title;
 
-        pageStore.configure({
+        pageStoreLegacy.configure({
             title: <h1 className="periodic-room-detail-page-header-title">{title}</h1>,
             onBackPreviousPage: backPreviousPage,
         });

packages/flat-pages/src/RoomDetailPage/index.tsx

@@ -7,11 +7,8 @@ import { observer } from "mobx-react-lite";
 import { useHistory, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { message } from "antd";
-import {
-    GlobalStoreContext,
-    PageStoreContext,
-    RoomStoreContext,
-} from "../components/StoreProvider";
+import { GlobalStoreContext, RoomStoreContext } from "../components/StoreProvider";
+import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy";
 import { RouteNameType, RouteParams, usePushHistory } from "../utils/routes";
 import { joinRoomHandler } from "../utils/join-room-handler";
 import { FLAT_SERVER_BASE_URL, RoomStatus } from "@netless/flat-server-api";
@@ -26,7 +23,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() {
     const history = useHistory();
     const globalStore = useContext(GlobalStoreContext);
     const roomStore = useContext(RoomStoreContext);
-    const pageStore = useContext(PageStoreContext);
+    const pageStoreLegacy = useContext(PageStoreContextLegacy);
     const roomInfo = roomStore.rooms.get(roomUUID);
     const periodicInfo = periodicUUID ? roomStore.periodicRooms.get(periodicUUID) : undefined;
 
@@ -40,7 +37,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() {
 
     useEffect(() => {
         if (roomInfo) {
-            pageStore.configure({
+            pageStoreLegacy.configure({
                 title: <h1 className="room-detail-page-header-title">{roomInfo.title}</h1>,
                 onBackPreviousPage: () => history.goBack(),
             });