refactor: init hook useRouterTargetWorkspace (#1127)

apps/web/src/components/workspace-layout/index.tsx

@@ -1,18 +1,14 @@
+import { useGlobalState } from '@affine/store';
 import { useRouter } from 'next/router';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
-import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
 
 import { PageLoading } from '../loading';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 
-export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
-  const { workspaceLoaded } = useEnsureWorkspace();
-  return <>{workspaceLoaded ? children : <PageLoading />}</>;
-};
-
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   const router = useRouter();
 
@@ -35,10 +31,22 @@ export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
 };
 
 export const Layout = ({ children }: PropsWithChildren) => {
-  return (
-    <WorkspaceDefender>
-      <WorkspaceLayout>{children}</WorkspaceLayout>
-    </WorkspaceDefender>
-  );
+  const { targetWorkspace, exist } = useRouterTargetWorkspace();
+  const router = useRouter();
+  const loadWorkspace = useGlobalState(store => store.loadWorkspace);
+  useEffect(() => {
+    if (!exist) {
+      router.replace('/404');
+    }
+  }, [exist, router]);
+  useEffect(() => {
+    if (exist && targetWorkspace) {
+      loadWorkspace(targetWorkspace.id);
+    }
+  }, [exist, loadWorkspace, targetWorkspace]);
+  if (!targetWorkspace) {
+    return <PageLoading />;
+  }
+  return <WorkspaceLayout>{children}</WorkspaceLayout>;
 };
 export default Layout;