fix: switch workspace

packages/app/src/components/workspace-layout/index.tsx

@@ -2,38 +2,15 @@ import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import { useRouter } from 'next/router';
 import { StyledPage, StyledWrapper } from './styles';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { PropsWithChildren } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
+import { useInitWorkspace } from '@/hooks/use-init-workspace';
 
 export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
-  const router = useRouter();
-  const [workspaceLoaded, setWorkspaceLoaded] = useState(false);
-  const { synced, loadWorkspace, workspacesMeta } = useAppState();
+  const { synced } = useAppState();
+  const { loading } = useInitWorkspace(!synced);
 
-  useEffect(() => {
-    const initWorkspace = async () => {
-      const workspaceId =
-        (router.query.workspaceId as string) ||
-        workspacesMeta?.[0]?.id ||
-        new Date().getTime().toString();
-
-      await loadWorkspace(workspaceId);
-      setWorkspaceLoaded(true);
-    };
-    if (!synced) {
-      return;
-    }
-
-    initWorkspace();
-  }, [
-    loadWorkspace,
-    router.pathname,
-    router.query.workspaceId,
-    synced,
-    workspaceLoaded,
-    workspacesMeta,
-  ]);
-  return <>{workspaceLoaded ? children : null}</>;
+  return <>{!loading ? children : null}</>;
 };
 
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {

packages/app/src/hooks/use-init-workspace.ts

@@ -0,0 +1,35 @@
+import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider/context';
+import { useEffect, useState } from 'react';
+
+export const useInitWorkspace = (disabled?: boolean) => {
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  const {
+    workspacesMeta,
+    loadWorkspace,
+    currentWorkspace,
+    currentWorkspaceId,
+  } = useAppState();
+  const workspaceId =
+    (router.query.workspaceId as string) ||
+    workspacesMeta?.[0]?.id ||
+    new Date().getTime().toString();
+
+  useEffect(() => {
+    if (disabled) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    loadWorkspace(workspaceId).finally(() => {
+      setLoading(false);
+    });
+  }, [workspaceId, disabled]);
+
+  return {
+    workspaceId,
+    workspace: workspaceId === currentWorkspaceId ? currentWorkspace : null,
+    loading,
+  };
+};

packages/app/src/pages/workspace/[workspaceId]/index.tsx

@@ -1,13 +1,12 @@
-import React, { ReactElement, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
-import { useLoadWorkspace } from '@/providers/app-state-provider/hooks';
-import WorkspaceLayout from '@/components/workspace-layout';
+import { useInitWorkspace } from '@/hooks/use-init-workspace';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
-  const workspace = useLoadWorkspace();
   const { createPage, currentWorkspaceId } = useAppState();
+  const { workspace } = useInitWorkspace();
 
   useEffect(() => {
     const initPage = async () => {
@@ -29,8 +28,4 @@ const WorkspaceIndex = () => {
   return <></>;
 };
 
-WorkspaceIndex.getLayout = function getLayout(page: ReactElement) {
-  return <WorkspaceLayout>{page}</WorkspaceLayout>;
-};
-
 export default WorkspaceIndex;

packages/app/src/pages/workspace/index.tsx

@@ -1,21 +1,18 @@
-import React, { ReactElement, useEffect } from 'react';
-import WorkspaceLayout from '@/components/workspace-layout';
-import { useAppState } from '@/providers/app-state-provider';
+import { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { useInitWorkspace } from '@/hooks/use-init-workspace';
 
 export const WorkspaceIndex = () => {
   const router = useRouter();
-  const { currentWorkspaceId } = useAppState();
+  const { workspaceId, workspace } = useInitWorkspace();
+
   useEffect(() => {
-    if (currentWorkspaceId) {
-      router.replace(`/workspace/${currentWorkspaceId}`);
+    if (workspace) {
+      router.push(`/workspace/${workspaceId}`);
     }
-  }, [currentWorkspaceId, router]);
+  }, [workspace, workspaceId]);
+
   return <></>;
 };
 
-WorkspaceIndex.getLayout = function getLayout(page: ReactElement) {
-  return <WorkspaceLayout>{page}</WorkspaceLayout>;
-};
-
 export default WorkspaceIndex;