fix(renderer-app): use page store and disable MainPageLayout component in class page (#1633)

* refactor(renderer-app): use page store and adjust style

* fix(renderer-app): disable MainPageLayout component in class page

Author: Cheerego7

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

@@ -24,7 +24,22 @@ export const MainPageLayoutWrapper = observer(function MainPageLayoutWrap({ chil
         });
     }, [location.pathname]);
 
-    return (
+    const isClassPage = useMemo((): boolean => {
+        return [
+            routeConfig.BigClassPage,
+            routeConfig.SmallClassPage,
+            routeConfig.OneToOnePage,
+        ].some(({ path }) => {
+            return !!matchPath(location.pathname, {
+                path,
+                sensitive: true,
+            });
+        });
+    }, [location.pathname]);
+
+    return isClassPage ? (
+        <>{children}</>
+    ) : (
         <MainPageLayoutContainer
             MainPageHeaderTitle={pageStore.title}
             activeKeys={pageStore.activeKeys}

desktop/renderer-app/src/pages/CloudStoragePage/index.tsx

@@ -3,7 +3,6 @@ import "./style.less";
 import { CloudStorageContainer } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
-import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
 import { CloudStorageStore } from "./store";
 import { loginCheck } from "../../api-middleware/flatServer";
 import { ServerRequestError } from "../../utils/error/server-request-error";
@@ -42,9 +41,5 @@ export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudSt
 
     useEffect(() => store.initialize(), [store]);
 
-    return (
-        <MainPageLayoutContainer>
-            <CloudStorageContainer store={store} />
-        </MainPageLayoutContainer>
-    );
+    return <CloudStorageContainer store={store} />;
 });

desktop/renderer-app/src/pages/DeviceCheckPages/DeviceCheckLayoutContainer.tsx

@@ -5,9 +5,7 @@ import speakerSVG from "./icons/speaker.svg";
 import microphoneSVG from "./icons/microphone.svg";
 import "./DeviceCheckLayoutContainer.less";
 
-import React from "react";
-import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
-import { useWindowSize } from "../../utils/hooks/use-window-size";
+import React, { useContext, useEffect } from "react";
 import { routeConfig, RouteNameType } from "../../route-config";
 import { useHistory, useLocation } from "react-router-dom";
 import { DeviceCheckState } from "./utils";
@@ -20,50 +18,47 @@ export const DeviceCheckLayoutContainer: React.FC = ({ children }): React.ReactE
     const t = useTranslate();
     const history = useHistory<DeviceCheckState>();
     const location = useLocation<DeviceCheckState | undefined>();
+    const pageStore = useContext(PageStoreContext);
 
-    const subMenu = [
-        {
-            key: routeConfig[RouteNameType.SystemCheckPage].path,
-            icon: (): React.ReactNode => <img src={systemSVG} />,
-            title: t("system-testing"),
-            route: routeConfig[RouteNameType.SystemCheckPage].path,
-        },
-        {
-            key: routeConfig[RouteNameType.CameraCheckPage].path,
-            icon: (): React.ReactNode => <img src={cameraSVG} />,
-            title: t("camera-testing"),
-            route: routeConfig[RouteNameType.CameraCheckPage].path,
-        },
-        {
-            key: routeConfig[RouteNameType.SpeakerCheckPage].path,
-            icon: (): React.ReactNode => <img src={speakerSVG} />,
-            title: t("headphone-testing"),
-            route: routeConfig[RouteNameType.SpeakerCheckPage].path,
-        },
-        {
-            key: routeConfig[RouteNameType.MicrophoneCheckPage].path,
-            icon: (): React.ReactNode => <img src={microphoneSVG} />,
-            title: t("microphone-testing"),
-            route: routeConfig[RouteNameType.MicrophoneCheckPage].path,
-        },
-    ];
-
-    const activeKeys = ["deviceCheck", location.pathname];
-
-    return (
-        <MainPageLayoutContainer
-            activeKeys={activeKeys}
-            subMenu={subMenu}
-            onRouteChange={(mainPageLayoutItem: MainPageLayoutItem) => {
+    useEffect(() => {
+        pageStore.configure({
+            subMenu: [
+                {
+                    key: routeConfig[RouteNameType.SystemCheckPage].path,
+                    icon: (): React.ReactNode => <img src={systemSVG} />,
+                    title: t("system-testing"),
+                    route: routeConfig[RouteNameType.SystemCheckPage].path,
+                },
+                {
+                    key: routeConfig[RouteNameType.CameraCheckPage].path,
+                    icon: (): React.ReactNode => <img src={cameraSVG} />,
+                    title: t("camera-testing"),
+                    route: routeConfig[RouteNameType.CameraCheckPage].path,
+                },
+                {
+                    key: routeConfig[RouteNameType.SpeakerCheckPage].path,
+                    icon: (): React.ReactNode => <img src={speakerSVG} />,
+                    title: t("headphone-testing"),
+                    route: routeConfig[RouteNameType.SpeakerCheckPage].path,
+                },
+                {
+                    key: routeConfig[RouteNameType.MicrophoneCheckPage].path,
+                    icon: (): React.ReactNode => <img src={microphoneSVG} />,
+                    title: t("microphone-testing"),
+                    route: routeConfig[RouteNameType.MicrophoneCheckPage].path,
+                },
+            ],
+            activeKeys: ["deviceCheck", location.pathname],
+            onRouteChange(mainPageLayoutItem: MainPageLayoutItem) {
                 history.push({
                     pathname: mainPageLayoutItem.route,
                     state: {
                         ...location.state,
                     },
                 });
-            }}
-        >
-            <div className="device-check-layout-container">{children}</div>
-        </MainPageLayoutContainer>
-    );
+            },
+        });
+    }, [history, location.pathname, location.state, pageStore, t]);
+
+    return <div className="device-check-layout-container">{children}</div>;
 };

packages/flat-pages/src/DevicesTestPage/style.less

@@ -1,5 +1,5 @@
 .device-test-page-container {
-    height: 100vh;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;

packages/flat-pages/src/utils/join-room-handler.ts

@@ -1,4 +1,4 @@
-import { generateRoutePath, RouteNameType, usePushHistory } from "../utils/routes";
+import { RouteNameType, usePushHistory } from "../utils/routes";
 import { roomStore, globalStore } from "@netless/flat-stores";
 import { RoomType } from "@netless/flat-server-api";
 import { errorTips } from "flat-components";
@@ -14,22 +14,18 @@ export const joinRoomHandler = async (
         const data = await roomStore.joinRoom(periodicUUID || formatRoomUUID);
         globalStore.updateShowGuide(data.showGuide);
         globalStore.updatePeriodicUUID(roomInfo?.periodicUUID);
-        // try to work around chrome does not show permission popup after
-        // soft navigating. here we do a "hard" navigating instead.
+
         switch (data.roomType) {
             case RoomType.BigClass: {
-                // pushHistory(RouteNameType.BigClassPage, data);
-                window.location.href = generateRoutePath(RouteNameType.BigClassPage, data);
+                pushHistory(RouteNameType.BigClassPage, data);
                 break;
             }
             case RoomType.SmallClass: {
-                // pushHistory(RouteNameType.SmallClassPage, data);
-                window.location.href = generateRoutePath(RouteNameType.SmallClassPage, data);
+                pushHistory(RouteNameType.SmallClassPage, data);
                 break;
             }
             case RoomType.OneToOne: {
-                // pushHistory(RouteNameType.OneToOnePage, data);
-                window.location.href = generateRoutePath(RouteNameType.OneToOnePage, data);
+                pushHistory(RouteNameType.OneToOnePage, data);
                 break;
             }
             default: {