diff --git a/desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx b/desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx index 3d93eefc7f1..221714d23b0 100644 --- a/desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx +++ b/desktop/renderer-app/src/AppRoutes/AppRouteContainer.tsx @@ -7,7 +7,8 @@ import { AppRouteErrorBoundary } from "./AppRouteErrorBoundary"; 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"; +import { IPCContext } from "../components/IPCContext"; +import { useLastLocation } from "react-router-last-location"; export interface AppRouteContainerProps { Comp: React.ComponentType; @@ -21,15 +22,16 @@ export const AppRouteContainer = observer(function AppRo routeProps, }) { const configStore = useContext(ConfigStoreContext); - const pageStore = useContext(PageStoreContext); + const ipcStore = useContext(IPCContext); const location = useLocation(); + const lastLocation = useLastLocation(); // useURLAppLauncher(); useEffect(() => { - pageStore.configure(location.pathname); - }, [location.pathname, pageStore]); + ipcStore.configure(location.pathname, lastLocation?.pathname); + }, [ipcStore, lastLocation?.pathname, location.pathname]); useIsomorphicLayoutEffect(() => { const compName = Comp.displayName || Comp.name; diff --git a/desktop/renderer-app/src/AppRoutes/index.tsx b/desktop/renderer-app/src/AppRoutes/index.tsx index cb1b9225068..028ae117c4d 100644 --- a/desktop/renderer-app/src/AppRoutes/index.tsx +++ b/desktop/renderer-app/src/AppRoutes/index.tsx @@ -3,6 +3,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { HashRouter, Route, Switch } from "react-router-dom"; import { LastLocationProvider } from "react-router-last-location"; +import { MainPageLayoutWrapper } from "../components/MainPageLayoutWrapper"; import { RouteConfig, routeConfig } from "../route-config"; import { AppRouteContainer } from "./AppRouteContainer"; @@ -11,28 +12,30 @@ export const AppRoutes = observer(function AppRoutes() { return ( - - - {Object.keys(routeConfig).map(((name: keyof RouteConfig) => { - const { path, component, title } = routeConfig[name]; - return ( - ( - - )} - /> - ); - }) as (name: string) => React.ReactElement)} - - + + + + {Object.keys(routeConfig).map(((name: keyof RouteConfig) => { + const { path, component, title } = routeConfig[name]; + return ( + ( + + )} + /> + ); + }) as (name: string) => React.ReactElement)} + + + ); }); diff --git a/desktop/renderer-app/src/components/IPCContext.tsx b/desktop/renderer-app/src/components/IPCContext.tsx new file mode 100644 index 00000000000..6e6f43e4583 --- /dev/null +++ b/desktop/renderer-app/src/components/IPCContext.tsx @@ -0,0 +1,4 @@ +import { createContext } from "react"; +import { IPCStore } from "../stores/ipc-store"; + +export const IPCContext = createContext(null as any); diff --git a/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx b/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx index 5352458c5db..c4c0f72b8b7 100644 --- a/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx +++ b/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx @@ -32,11 +32,22 @@ import { runtime } from "../../utils/runtime"; export interface MainPageLayoutContainerProps { subMenu?: MainPageLayoutItem[]; activeKeys?: string[]; + MainPageHeaderTitle?: MainPageLayoutProps["title"]; + showMainPageHeader?: MainPageLayoutProps["showMainPageHeader"]; onRouteChange?: MainPageLayoutProps["onClick"]; + onBackPreviousPage?: MainPageLayoutProps["onBackPreviousPage"]; } export const MainPageLayoutContainer = observer( - function MainPageLayoutContainer({ subMenu, children, activeKeys, onRouteChange }) { + function MainPageLayoutContainer({ + subMenu, + children, + activeKeys, + MainPageHeaderTitle, + showMainPageHeader, + onRouteChange, + onBackPreviousPage, + }) { const { t } = useTranslation(); const sideMenu = [ { @@ -137,11 +148,14 @@ export const MainPageLayoutContainer = observer( generateAvatar={generateAvatar} isWin={runtime.isWin} popMenu={popMenu} + showMainPageHeader={showMainPageHeader} sideMenu={sideMenu} sideMenuFooter={sideMenuFooter} subMenu={subMenu} + title={MainPageHeaderTitle} topBarMenu={topBarMenu} userName={globalStore.userInfo?.name ?? ""} + onBackPreviousPage={onBackPreviousPage} onClick={onMenuItemClick} onClickTopBarMenu={onClickTopBarMenu} onClickWindowsSystemBtn={onClickWindowsSystemBtn} diff --git a/desktop/renderer-app/src/components/MainPageLayoutWrapper.tsx b/desktop/renderer-app/src/components/MainPageLayoutWrapper.tsx new file mode 100644 index 00000000000..a3857e49d4d --- /dev/null +++ b/desktop/renderer-app/src/components/MainPageLayoutWrapper.tsx @@ -0,0 +1,39 @@ +import React, { useContext, useMemo } from "react"; +import { observer } from "mobx-react-lite"; +import { MainPageLayoutContainer } from "./MainPageLayoutContainer"; +import { PageStoreContext } from "@netless/flat-pages/src/components/StoreProvider"; +import { routeConfig } from "../route-config"; +import { matchPath, useLocation } from "react-router-dom"; + +export const MainPageLayoutWrapper = observer(function MainPageLayoutWrap({ children }) { + const pageStore = useContext(PageStoreContext); + const location = useLocation(); + + const hasHeader = useMemo((): boolean => { + return [ + routeConfig.RoomDetailPage, + routeConfig.PeriodicRoomDetailPage, + routeConfig.ModifyOrdinaryRoomPage, + routeConfig.ModifyPeriodicRoomPage, + routeConfig.UserScheduledPage, + ].some(({ path }) => { + return !!matchPath(location.pathname, { + path, + sensitive: true, + }); + }); + }, [location.pathname]); + + return ( + + {children} + + ); +}); diff --git a/desktop/renderer-app/src/route-config.ts b/desktop/renderer-app/src/route-config.ts index b8e8fe21351..82299963230 100644 --- a/desktop/renderer-app/src/route-config.ts +++ b/desktop/renderer-app/src/route-config.ts @@ -5,11 +5,11 @@ import BigClassPage from "./pages/BigClassPage"; import SmallClassPage from "./pages/SmallClassPage"; import OneToOnePage from "./pages/OneToOnePage"; import ReplayPage from "./pages/ReplayPage"; -import RoomDetailPage from "./pages/RoomDetailPage"; -import HomePage from "./pages/HomePage"; -import UserScheduledPage from "./pages/UserScheduledPage"; -import { ModifyOrdinaryRoomPage } from "./pages/ModifyOrdinaryRoomPage"; -import { ModifyPeriodicRoomPage } from "./pages/ModifyPeriodicRoomPage"; +import RoomDetailPage from "@netless/flat-pages/src/RoomDetailPage"; +import HomePage from "@netless/flat-pages/src/HomePage"; +import UserScheduledPage from "@netless/flat-pages/src/UserScheduledPage"; +import { ModifyOrdinaryRoomPage } from "@netless/flat-pages/src/ModifyOrdinaryRoomPage"; +import { ModifyPeriodicRoomPage } from "@netless/flat-pages/src/ModifyPeriodicRoomPage"; import { RoomType } from "./api-middleware/flatServer/constants"; import { CloudStoragePage } from "./pages/CloudStoragePage"; import { CameraCheckPage } from "./pages/DeviceCheckPages/CameraCheckPage"; diff --git a/desktop/renderer-app/src/stores/ipc-store.ts b/desktop/renderer-app/src/stores/ipc-store.ts index ca4706923db..4ae1094a2b3 100644 --- a/desktop/renderer-app/src/stores/ipc-store.ts +++ b/desktop/renderer-app/src/stores/ipc-store.ts @@ -2,21 +2,82 @@ 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"; +import { AppUpgradeModalProps } from "../components/AppUpgradeModal"; +import { differenceInHours } from "date-fns"; +import { runtime } from "../utils/runtime"; +import { matchPath } from "react-router-dom"; +import { routeConfig, RouteConfig, RouteNameType } from "../route-config"; export class IPCStore { public routePathName: RouteNameType | null = null; + public updateInfo: AppUpgradeModalProps["updateInfo"] | null = null; + public checkNewVersionDate: number = new Date().getTime(); public constructor() { makeAutoObservable(this); } - public configure = (routePathName?: string): void => { - console.log("route path name", routePathName); - switch (routePathName) { + public configure = (routePathName: string, lastLocation?: string): void => { + switch (IPCStore.routeMatchPath(routePathName)) { case routeConfig[RouteNameType.HomePage].path: { + this.checkUpdateByFlat(); this.ipcAsyncByMainWindow("set-win-size", { ...constants.PageSize.Main, + autoCenter: IPCStore.shouldWindowCenter(lastLocation), + }); + break; + } + case routeConfig[RouteNameType.RoomDetailPage].path: + case routeConfig[RouteNameType.PeriodicRoomDetailPage].path: + case routeConfig[RouteNameType.ModifyOrdinaryRoomPage].path: + case routeConfig[RouteNameType.ModifyPeriodicRoomPage].path: + case routeConfig[RouteNameType.GeneralSettingPage].path: + case routeConfig[RouteNameType.CameraCheckPage].path: + case routeConfig[RouteNameType.MicrophoneCheckPage].path: + case routeConfig[RouteNameType.HotKeySettingPage].path: + case routeConfig[RouteNameType.AboutPage].path: { + this.ipcAsyncByMainWindow("set-win-size", { + ...constants.PageSize.Main, + }); + break; + } + case routeConfig[RouteNameType.BigClassPage].path: + case routeConfig[RouteNameType.SmallClassPage].path: + case routeConfig[RouteNameType.OneToOnePage].path: { + this.ipcAsyncByMainWindow("set-win-size", { + ...constants.PageSize.Class, + autoCenter: true, + resizable: true, + setMinimumSize: true, + maximizable: true, + }); + break; + } + case routeConfig[RouteNameType.ReplayPage].path: { + this.ipcAsyncByMainWindow("set-win-size", { + ...constants.PageSize.Replay, + autoCenter: true, + resizable: true, + setMinimumSize: true, + maximizable: true, + }); + + this.ipcAsyncByMainWindow("set-aspect-ratio", { + aspectRatio: 16 / 9, + }); + break; + } + case routeConfig[RouteNameType.LoginPage].path: { + this.ipcAsyncByMainWindow("set-win-size", { + ...constants.PageSize.Login, + autoCenter: true, + }); + break; + } + case routeConfig[RouteNameType.SplashPage].path: { + this.ipcAsyncByMainWindow("set-win-size", { + ...constants.PageSize.Splash, + autoCenter: true, }); break; } @@ -26,6 +87,71 @@ export class IPCStore { } }; + private static routeMatchPath = (routePathName: string): string | undefined => { + for (const routeName in routeConfig) { + const { path } = routeConfig[routeName as keyof RouteConfig]; + const result = matchPath(routePathName, { + path, + sensitive: true, + }); + + if (result?.path) { + return result.path; + } + } + + return undefined; + }; + + private static shouldWindowCenter = (pathname?: string): boolean => { + if (!pathname) { + return false; + } + + return [ + routeConfig.LoginPage, + routeConfig.BigClassPage, + routeConfig.OneToOnePage, + routeConfig.SmallClassPage, + ].some(({ path }) => { + return !!matchPath(pathname, { + path, + sensitive: true, + }); + }); + }; + + public updateCheckNewVersionDate = (): void => { + this.checkNewVersionDate = new Date().getTime(); + }; + + public setUpdateInfo = (info: AppUpgradeModalProps["updateInfo"]): void => { + this.updateInfo = info; + }; + + public checkUpdateByFlat = (): void => { + const checkUpdateVisible = + differenceInHours(new Date().getTime(), this.checkNewVersionDate) >= 1; + if (checkUpdateVisible) { + this.ipcSyncByApp("get-update-info") + .then(data => { + console.log("[Auto Updater]: Get Update Info"); + if (data.hasNewVersion) { + console.log( + `[Auto Updater]: Remote Version "${data.version}", Local Version "${runtime.appVersion}"`, + ); + if (data.version !== runtime.appVersion) { + this.setUpdateInfo(data); + } + } + }) + .catch(err => { + console.error("ipc failed", err); + }); + this.updateCheckNewVersionDate(); + } + }; + public ipcAsyncByMainWindow = < T extends keyof ipc.WindowActionAsync, U extends Parameters[0], diff --git a/desktop/renderer-app/src/tasks/init-ui.tsx b/desktop/renderer-app/src/tasks/init-ui.tsx index 1a202245138..3bd3d4d0b73 100644 --- a/desktop/renderer-app/src/tasks/init-ui.tsx +++ b/desktop/renderer-app/src/tasks/init-ui.tsx @@ -14,13 +14,11 @@ import { useUpdate } from "react-use"; import { i18n } from "../utils/i18n"; import { AppRoutes } from "../AppRoutes"; 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"; +import { IPCContext } from "../components/IPCContext"; configure({ isolateGlobalState: true, }); @@ -56,11 +54,9 @@ const App: React.FC = () => { locale={antdLocale} > - - - - - + + + diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less b/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less index 250ce739da8..cd541029c8e 100644 --- a/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less +++ b/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less @@ -1,5 +1,4 @@ .main-page-header-container { - height: 100%; display: flex; align-items: center; line-height: 1; diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less b/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less index c688e0745aa..5522491a791 100644 --- a/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less +++ b/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less @@ -9,6 +9,7 @@ height: 40px; max-width: 960px; margin: 0 auto; + align-items: center; } .main-page-nav-horizontal-left { @@ -18,6 +19,10 @@ padding: 8px 0; } + .ant-tabs-nav { + margin: 0; + } + .ant-tabs-nav::before { border-bottom: none; } diff --git a/packages/flat-components/src/components/MainPageLayout/index.tsx b/packages/flat-components/src/components/MainPageLayout/index.tsx index 7cc1a2c076c..702dd8cdfb0 100644 --- a/packages/flat-components/src/components/MainPageLayout/index.tsx +++ b/packages/flat-components/src/components/MainPageLayout/index.tsx @@ -4,6 +4,7 @@ import { MainPageLayoutItem } from "./types"; import { MainPageNav, MainPageNavProps } from "./MainPageNav"; import { MainPageSubMenu, MainPageSubMenuProps } from "./MainPageSubMenu"; import { MainPageTopBar, MainPageTopBarProps } from "./MainPageTopBar"; +import { MainPageHeader, MainPageHeaderProps } from "./MainPageHeader"; export * from "./MainPageHeader"; export type { MainPageLayoutItem, MainPageTopBarMenuItem, WindowsSystemBtnItem } from "./types"; @@ -11,11 +12,13 @@ export type { MainPageLayoutItem, MainPageTopBarMenuItem, WindowsSystemBtnItem } export interface MainPageLayoutProps extends MainPageNavProps, MainPageTopBarProps, + MainPageHeaderProps, Partial> { /** when an item is clicked */ onClick: (mainPageLayoutItem: MainPageLayoutItem) => void; /** a list of keys to highlight the items */ activeKeys: string[]; + showMainPageHeader?: boolean; } export const MainPageLayout: React.FC = ({ @@ -23,6 +26,7 @@ export const MainPageLayout: React.FC = ({ activeKeys, subMenu, children, + showMainPageHeader, ...restProps }) => { return ( @@ -38,7 +42,16 @@ export const MainPageLayout: React.FC = ({ onClick={onClick} /> )} -
{children}
+
+ {showMainPageHeader ? ( +
+ +
{children}
+
+ ) : ( + <>{children} + )} +
diff --git a/packages/flat-components/src/components/MainPageLayout/style.less b/packages/flat-components/src/components/MainPageLayout/style.less index 3abcfd5abe2..3d50efeab07 100644 --- a/packages/flat-components/src/components/MainPageLayout/style.less +++ b/packages/flat-components/src/components/MainPageLayout/style.less @@ -25,6 +25,19 @@ } } +.main-page-layout-content-detail-container { + height: 100%; + padding: 16px; + border-radius: 6px; + box-shadow: 0 1px 1px #00000026; + background-color: #fff; +} + +.main-page-layout-content-detail { + height: 100%; + padding-bottom: 16px; +} + .flat-color-scheme-dark { .main-layout-container-content { background-color: var(--grey-12); @@ -33,4 +46,9 @@ .main-page-layout-inner { background-color: var(--grey-12); } + + .main-page-layout-content-detail-container { + box-shadow: 0 1px 1px #0f121926; + background-color: var(--grey-10); + } } diff --git a/packages/flat-pages/src/AppRoutes/AppRouteContainer.tsx b/packages/flat-pages/src/AppRoutes/AppRouteContainer.tsx index 86f330b6e43..f572e8f330a 100644 --- a/packages/flat-pages/src/AppRoutes/AppRouteContainer.tsx +++ b/packages/flat-pages/src/AppRoutes/AppRouteContainer.tsx @@ -1,16 +1,14 @@ import loadable from "@loadable/component"; import React, { ComponentType, useContext, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { RouteComponentProps, useLocation } from "react-router-dom"; +import { RouteComponentProps } from "react-router-dom"; import { useIsomorphicLayoutEffect } from "react-use"; import { FlatThemeBodyProvider, LoadingPage } from "flat-components"; -import { PreferencesStoreContext } from "../components/StoreProvider"; +import { PageStoreContext, 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; @@ -38,15 +36,13 @@ export const AppRouteContainer = observer(function AppRo title, routeProps, }) { - const pageStoreLegacy = useContext(PageStoreContextLegacy); const pageStore = useContext(PageStoreContext); const preferencesStore = useContext(PreferencesStoreContext); const { t } = useTranslation(); - const location = useLocation(); useIsomorphicLayoutEffect(() => { - pageStoreLegacy.setName(name); - }, [name, pageStoreLegacy]); + pageStore.setName(name); + }, [name, pageStore]); useEffect(() => { document.title = t("title-" + title); @@ -63,14 +59,8 @@ export const AppRouteContainer = observer(function AppRo } }, [Comp, name]); - useEffect(() => { - pageStore.configure(location.pathname); - }, [location.pathname, pageStore]); - const hasHeader = - pageStoreLegacy.name !== null && - pageStoreLegacy.name && - routePages[pageStoreLegacy.name].hasHeader; + pageStore.name !== null && pageStore.name && routePages[pageStore.name].hasHeader; return ( diff --git a/packages/flat-pages/src/CloudStoragePage/index.tsx b/packages/flat-pages/src/CloudStoragePage/index.tsx index 153581a482c..180613c90e4 100644 --- a/packages/flat-pages/src/CloudStoragePage/index.tsx +++ b/packages/flat-pages/src/CloudStoragePage/index.tsx @@ -3,9 +3,9 @@ import React, { useContext, useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { CloudStorageContainer } from "flat-components"; -import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; import { CloudStorageStore } from "@netless/flat-stores"; import { useLoginCheck } from "../utils/use-login-check"; +import { PageStoreContext } from "../components/StoreProvider"; export interface CloudStoragePageProps {} @@ -19,10 +19,10 @@ export const CloudStoragePage = observer(function CloudSt ); useEffect(() => store.initialize(), [store]); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => pageStoreLegacy.configure(), []); + useEffect(() => pageStore.configure(), []); return ; }); diff --git a/packages/flat-pages/src/HomePage/index.tsx b/packages/flat-pages/src/HomePage/index.tsx index b4de6d60737..707b6a737d0 100644 --- a/packages/flat-pages/src/HomePage/index.tsx +++ b/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 { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; import { useLoginCheck } from "../utils/use-login-check"; +import { PageStoreContext } from "../components/StoreProvider"; export const HomePage = observer(function HomePage() { - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => pageStoreLegacy.configure(), []); + useEffect(() => pageStore.configure(), []); const isLogin = useLoginCheck(); diff --git a/packages/flat-pages/src/HomePage/style.less b/packages/flat-pages/src/HomePage/style.less index e3a3e63b9f6..63981b4266e 100644 --- a/packages/flat-pages/src/HomePage/style.less +++ b/packages/flat-pages/src/HomePage/style.less @@ -2,15 +2,12 @@ display: flex; flex-direction: column; height: 100%; - width: 960px; margin: 0 auto; overflow: hidden; } .homepage-layout-horizontal-content { flex: 1; - min-width: 960px; - width: 960px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; diff --git a/packages/flat-pages/src/JoinPage/index.tsx b/packages/flat-pages/src/JoinPage/index.tsx index d66e5feb379..a54e35178a0 100644 --- a/packages/flat-pages/src/JoinPage/index.tsx +++ b/packages/flat-pages/src/JoinPage/index.tsx @@ -7,8 +7,7 @@ import { useTranslation } from "react-i18next"; import { useWindowSize } from "react-use"; import { RouteNameType, RouteParams, usePushHistory } from "../utils/routes"; -import { GlobalStoreContext } from "../components/StoreProvider"; -import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; +import { GlobalStoreContext, PageStoreContext } from "../components/StoreProvider"; 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"; @@ -20,7 +19,7 @@ export const JoinPage = observer(function JoinPage() { const { i18n } = useTranslation(); const pushHistory = usePushHistory(); const globalStore = useContext(GlobalStoreContext); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); const [isLogin, setIsLogin] = useState(false); const { width } = useWindowSize(1080); @@ -28,7 +27,7 @@ export const JoinPage = observer(function JoinPage() { const { roomUUID } = params; // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => pageStoreLegacy.configure(), []); + useEffect(() => pageStore.configure(), []); useEffect(() => { async function checkLogin(): Promise { diff --git a/packages/flat-pages/src/PeriodicRoomDetailPage/index.tsx b/packages/flat-pages/src/PeriodicRoomDetailPage/index.tsx index e04739e6a62..861621166e1 100644 --- a/packages/flat-pages/src/PeriodicRoomDetailPage/index.tsx +++ b/packages/flat-pages/src/PeriodicRoomDetailPage/index.tsx @@ -7,8 +7,7 @@ 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 { RoomStoreContext } from "../components/StoreProvider"; -import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; +import { PageStoreContext, RoomStoreContext } from "../components/StoreProvider"; import { globalStore } from "@netless/flat-stores"; import { RouteNameType, RouteParams, usePushHistory } from "../utils/routes"; import { @@ -28,7 +27,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa const history = useHistory(); const pushHistory = usePushHistory(); const previousPage = useLastLocation(); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); useEffect(() => { // if the room has been cancelled and return to the previous page, an error will be reported @@ -50,7 +49,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa const title = periodicInfo?.periodic.title; - pageStoreLegacy.configure({ + pageStore.configure({ title:

{title}

, onBackPreviousPage: backPreviousPage, }); diff --git a/packages/flat-pages/src/RoomDetailPage/index.tsx b/packages/flat-pages/src/RoomDetailPage/index.tsx index 09cadf17115..d5d7c5f754c 100644 --- a/packages/flat-pages/src/RoomDetailPage/index.tsx +++ b/packages/flat-pages/src/RoomDetailPage/index.tsx @@ -7,8 +7,11 @@ import { observer } from "mobx-react-lite"; import { useHistory, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { message } from "antd"; -import { GlobalStoreContext, RoomStoreContext } from "../components/StoreProvider"; -import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; +import { + GlobalStoreContext, + PageStoreContext, + RoomStoreContext, +} from "../components/StoreProvider"; 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"; @@ -23,7 +26,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() { const history = useHistory(); const globalStore = useContext(GlobalStoreContext); const roomStore = useContext(RoomStoreContext); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); const roomInfo = roomStore.rooms.get(roomUUID); const periodicInfo = periodicUUID ? roomStore.periodicRooms.get(periodicUUID) : undefined; @@ -37,7 +40,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() { useEffect(() => { if (roomInfo) { - pageStoreLegacy.configure({ + pageStore.configure({ title:

{roomInfo.title}

, onBackPreviousPage: () => history.goBack(), }); diff --git a/packages/flat-pages/src/RoomDetailPage/style.less b/packages/flat-pages/src/RoomDetailPage/style.less index 615eb92a533..e75c4234b00 100644 --- a/packages/flat-pages/src/RoomDetailPage/style.less +++ b/packages/flat-pages/src/RoomDetailPage/style.less @@ -11,8 +11,6 @@ .room-detail-page-panel-container { flex: 1; - width: 960px; - margin: 0 auto; border-radius: 6px; background-color: #fff; } diff --git a/packages/flat-pages/src/UserSettingPage/UserSettingLayoutContainer.tsx b/packages/flat-pages/src/UserSettingPage/UserSettingLayoutContainer.tsx index cf124fa58bb..79236188c04 100644 --- a/packages/flat-pages/src/UserSettingPage/UserSettingLayoutContainer.tsx +++ b/packages/flat-pages/src/UserSettingPage/UserSettingLayoutContainer.tsx @@ -7,16 +7,16 @@ import "./UserSettingLayoutContainer.less"; import React, { useContext, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { routeConfig, RouteNameType } from "../route-config"; -import { PageStoreContextLegacy } from "../components/PageStoreContextLegacy"; import { useLoginCheck } from "../utils/use-login-check"; +import { PageStoreContext } from "../components/StoreProvider"; export const UserSettingLayoutContainer: React.FC = ({ children }): React.ReactElement => { useLoginCheck(); const { t } = useTranslation(); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); useEffect(() => { - pageStoreLegacy.configure({ + pageStore.configure({ subMenu: [ { key: routeConfig[RouteNameType.GeneralSettingPage].path, @@ -38,7 +38,7 @@ export const UserSettingLayoutContainer: React.FC = ({ children }): React.ReactE }, ], }); - }, [pageStoreLegacy, t]); + }, [pageStore, t]); return
{children}
; }; diff --git a/packages/flat-pages/src/components/EditRoomPage/index.tsx b/packages/flat-pages/src/components/EditRoomPage/index.tsx index 46a1a2f67e6..d3fc0ff1cbd 100644 --- a/packages/flat-pages/src/components/EditRoomPage/index.tsx +++ b/packages/flat-pages/src/components/EditRoomPage/index.tsx @@ -5,18 +5,18 @@ import { observer } from "mobx-react-lite"; import { EditRoomBody, EditRoomBodyProps } from "flat-components"; import { useHistory } from "react-router-dom"; import { useContext } from "react"; -import { PageStoreContextLegacy } from "../PageStoreContextLegacy"; import { useTranslation } from "react-i18next"; +import { PageStoreContext } from "../StoreProvider"; export type EditRoomPageProps = EditRoomBodyProps; export const EditRoomPage = observer(function EditRoomPage(props) { const { t } = useTranslation(); const history = useHistory(); - const pageStoreLegacy = useContext(PageStoreContextLegacy); + const pageStore = useContext(PageStoreContext); useEffect(() => { - pageStoreLegacy.configure({ + pageStore.configure({ title: (
{props.type === "schedule" diff --git a/packages/flat-pages/src/components/EditRoomPage/style.less b/packages/flat-pages/src/components/EditRoomPage/style.less index 2e0fbbc9526..6ab4bec6a9d 100644 --- a/packages/flat-pages/src/components/EditRoomPage/style.less +++ b/packages/flat-pages/src/components/EditRoomPage/style.less @@ -17,8 +17,6 @@ .edit-room-page-body { flex: 1; - width: 960px; - margin: 0 auto; border-radius: 6px; background-color: #fff; } diff --git a/packages/flat-pages/src/components/MainPageLayout.tsx b/packages/flat-pages/src/components/MainPageLayout.tsx index 23068856d69..7d697565285 100644 --- a/packages/flat-pages/src/components/MainPageLayout.tsx +++ b/packages/flat-pages/src/components/MainPageLayout.tsx @@ -2,18 +2,18 @@ import React, { useContext } from "react"; import { observer } from "mobx-react-lite"; import { MainPageLayoutHorizontalContainer } from "./MainPageLayoutHorizontalContainer"; import { routePages } from "../AppRoutes/route-pages"; -import { PageStoreContextLegacy } from "./PageStoreContextLegacy"; +import { PageStoreContext } from "./StoreProvider"; export const MainPageLayout = observer(function MainPageLayout({ children }) { - const pageStoreLegacy = useContext(PageStoreContextLegacy); - const hasHeader = pageStoreLegacy.name && routePages[pageStoreLegacy.name].hasHeader; + const pageStore = useContext(PageStoreContext); + const hasHeader = pageStore.name && routePages[pageStore.name].hasHeader; return hasHeader ? ( {children} diff --git a/packages/flat-pages/src/components/PageStoreContext.tsx b/packages/flat-pages/src/components/PageStoreContext.tsx deleted file mode 100644 index b32a57fbfc8..00000000000 --- a/packages/flat-pages/src/components/PageStoreContext.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { createContext } from "react"; -import { PageStore } from "../stores/utils"; - -export const PageStoreContext = createContext(null as any); diff --git a/packages/flat-pages/src/components/PageStoreContextLegacy.tsx b/packages/flat-pages/src/components/PageStoreContextLegacy.tsx deleted file mode 100644 index b919d9a7281..00000000000 --- a/packages/flat-pages/src/components/PageStoreContextLegacy.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { createContext } from "react"; -import { PageStoreLegacy } from "../stores/page-store"; - -export const PageStoreContextLegacy = createContext(null as any); diff --git a/packages/flat-pages/src/components/StoreProvider.tsx b/packages/flat-pages/src/components/StoreProvider.tsx index 1dc9e552b96..f9f565e5a6d 100644 --- a/packages/flat-pages/src/components/StoreProvider.tsx +++ b/packages/flat-pages/src/components/StoreProvider.tsx @@ -1,5 +1,6 @@ import React, { createContext, FC } from "react"; import { preferencesStore, globalStore, roomStore } from "@netless/flat-stores"; +import { pageStore } from "../stores/page-store"; export const GlobalStoreContext = createContext(globalStore); @@ -7,10 +8,14 @@ export const RoomStoreContext = createContext(roomStore); export const PreferencesStoreContext = createContext(preferencesStore); +export const PageStoreContext = createContext(pageStore); + export const StoreProvider: FC = ({ children }) => ( - {children} + + {children} + ); diff --git a/packages/flat-pages/src/stores/page-store.ts b/packages/flat-pages/src/stores/page-store.ts index 9f3c8c0a0fe..1d7811c0c92 100644 --- a/packages/flat-pages/src/stores/page-store.ts +++ b/packages/flat-pages/src/stores/page-store.ts @@ -4,7 +4,7 @@ import { RouteNameType } from "../route-config"; type DelegateProps = MainPageLayoutHorizontalContainerProps; -export class PageStoreLegacy { +export class PageStore { public name: RouteNameType | null = null; public title: DelegateProps["title"] = undefined; public subMenu: DelegateProps["subMenu"] = undefined; @@ -29,4 +29,4 @@ export class PageStoreLegacy { } } -export const pageStoreLegacy = new PageStoreLegacy(); +export const pageStore = new PageStore(); diff --git a/packages/flat-pages/src/stores/utils.ts b/packages/flat-pages/src/stores/utils.ts deleted file mode 100644 index 65ac0a8daee..00000000000 --- a/packages/flat-pages/src/stores/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { RouteNameType } from "../route-config"; - -export interface PageStore { - routePathName: RouteNameType | null; - configure: (routePathName?: string) => void; -} diff --git a/web/flat-web/src/stores/page-store.ts b/web/flat-web/src/stores/page-store.ts deleted file mode 100644 index bace5d5808d..00000000000 --- a/web/flat-web/src/stores/page-store.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { routeConfig, RouteNameType } from "@netless/flat-pages/src/route-config"; -import { makeAutoObservable } from "mobx"; - -export class PageStore { - 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: { - // do something - break; - } - default: { - break; - } - } - }; -} - -export const pageStore = new PageStore(); diff --git a/web/flat-web/src/tasks/init-ui.tsx b/web/flat-web/src/tasks/init-ui.tsx index dacd18f80ef..59ea02b4d6a 100644 --- a/web/flat-web/src/tasks/init-ui.tsx +++ b/web/flat-web/src/tasks/init-ui.tsx @@ -14,14 +14,10 @@ import { I18nextProvider } from "react-i18next"; import { i18n } from "@netless/flat-pages/src/utils/i18n"; import { AppRoutes } from "@netless/flat-pages/src/AppRoutes"; import { StoreProvider } from "@netless/flat-pages/src/components/StoreProvider"; -import { PageStoreContextLegacy } from "@netless/flat-pages/src/components/PageStoreContextLegacy"; import { FlatServicesContextProvider } from "@netless/flat-pages/src/components/FlatServicesContext"; -import { PageStoreContext } from "@netless/flat-pages/src/components/PageStoreContext"; /** configure right after import */ import { configure } from "mobx"; -import { pageStoreLegacy } from "@netless/flat-pages/src/stores/page-store"; -import { pageStore } from "../stores/page-store"; configure({ isolateGlobalState: true, }); @@ -57,13 +53,9 @@ const App: React.FC = () => { locale={antdLocale} > - - - - - - - + + +