fix: temporary helper error

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

@@ -3,7 +3,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useState } from 'react';
 import Input from '@/ui/input';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 interface ICloseParams {
   workspaceId?: string;
 }

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

@@ -13,7 +13,8 @@ import {
 import { useConfirm } from '@/providers/confirm-provider';
 import { toast } from '@/ui/toast';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
+
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;

packages/app/src/components/workspace-setting/MembersPage.tsx

@@ -23,7 +23,7 @@ import {
   User,
   Workspace,
 } from '@/hooks/mock-data/mock';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -10,7 +10,7 @@ import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { toast } from '@/ui/toast';
 import { Workspace } from '@/hooks/mock-data/mock';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { useConfirm } from '@/providers/confirm-provider';
 
 export const PublishPage = ({ workspace }: { workspace: Workspace }) => {

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -12,7 +12,7 @@ import {
   updateWorkspaceMeta,
   Workspace,
 } from '@/hooks/mock-data/mock';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 
 export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
   const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();

packages/app/src/components/workspace-setting/general/general.tsx

@@ -17,7 +17,7 @@ import { WorkspaceLeave } from './leave';
 import { Upload } from '@/components/file-upload';
 import { updateWorkspaceMeta, Workspace } from '@/hooks/mock-data/mock';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
   const { refreshWorkspacesMeta } = useAppState();
   const { currentWorkspace } = useTemporaryHelper();

packages/app/src/components/workspace-setting/workspace-setting.tsx

@@ -20,7 +20,7 @@ import { getActiveWorkspace } from '@/hooks/mock-data/mock';
 import { MembersPage } from './MembersPage';
 import { PublishPage } from './PublishPage';
 import { SyncPage } from './SyncPage';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 
 enum ActiveTab {
   'general' = 'general',

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -2,7 +2,7 @@ import { Avatar, WorkspaceName, SelectorWrapper } from './styles';
 import { useEffect, useState } from 'react';
 import { WorkspaceModal } from '@/components/workspace-modal';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
-import useTemporaryHelper from '@/hooks/use-temporary-helper';
+import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 export const WorkspaceSelector = () => {
   const [workspaceListShow, setWorkspaceListShow] = useState(false);
   const { currentWorkspace, workspaceMetaList } = useTemporaryHelper();

packages/app/src/hooks/use-temporary-helper.ts

@@ -1,129 +0,0 @@
-import { useState } from 'react';
-import { getWorkspaces, Workspace, User } from './mock-data/mock';
-
-export function getActiveWorkspace(): Workspace {
-  return JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}');
-}
-
-export const useTemporaryHelper = () => {
-  const [workspaceMetaList, setWorkspaceMetaList] = useState<Workspace[]>(
-    getWorkspaces()
-  );
-  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace>(
-    JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
-  );
-  const [user, setUser] = useState<User | null>();
-
-  return {
-    updateWorkspaceMeta: (
-      workspaceId: string,
-      workspaceData: {
-        name?: string;
-        avatar?: string;
-        isPublish?: boolean;
-        type?: 'local' | 'cloud' | 'join';
-      }
-    ) => {
-      const workspacesMeta = getWorkspaces();
-      const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-        if (workspace.id === workspaceId) {
-          workspaceData.name && (workspace.name = workspaceData.name);
-          workspaceData.avatar && (workspace.avatar = workspaceData.avatar);
-          workspaceData.type && (workspace.type = workspaceData.type);
-          workspaceData.isPublish &&
-            (workspace.isPublish = workspaceData.isPublish);
-          return workspace;
-        }
-        return workspace;
-      });
-      localStorage.setItem(
-        'affine-workspace',
-        JSON.stringify(newWorkspacesMeta)
-      );
-      setWorkspaceMetaList(newWorkspacesMeta);
-      if (workspaceId === currentWorkspace?.id) {
-        setCurrentWorkspace(
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newWorkspacesMeta.find(v => v.id === currentWorkspace.id)
-        );
-      }
-    },
-    createWorkspace: (workspaceName: string) => {
-      const workspaceData = {
-        name: workspaceName,
-        id: 'workspace-' + Date.now(),
-        isPublish: false,
-        isLocal: true,
-        avatar: '',
-        type: 'local',
-      } as Workspace;
-      const workspacesMeta = getWorkspaces();
-      workspacesMeta.push(workspaceData);
-      localStorage.setItem('affine-workspace', JSON.stringify(workspacesMeta));
-      console.log('workspacesMeta: ', workspacesMeta);
-      setWorkspaceMetaList(workspacesMeta);
-      return workspaceData;
-    },
-    deleteWorkspace: (workspaceId: string) => {
-      const workspacesMeta = getWorkspaces();
-      const newWorkspacesMeta = workspacesMeta.filter(() => {
-        return workspaceId !== workspaceId;
-      });
-      localStorage.setItem(
-        'affine-workspace',
-        JSON.stringify(newWorkspacesMeta)
-      );
-      setWorkspaceMetaList(workspacesMeta);
-    },
-
-    setWorkspacePublish: (id: string, isPublish: boolean) => {
-      const workspacesMeta = getWorkspaces();
-      const newWorkspacesMeta = workspacesMeta.map((workspace: Workspace) => {
-        if (workspace.id === id) {
-          workspace.isPublish = isPublish;
-        }
-        return workspace;
-      });
-      localStorage.setItem(
-        'affine-workspace',
-        JSON.stringify(newWorkspacesMeta)
-      );
-      setWorkspaceMetaList(workspacesMeta);
-    },
-    setActiveWorkspace(workspaceData: Workspace) {
-      console.log('workspaceData: ', workspaceData);
-      localStorage.setItem(
-        'affine-active-workspace',
-        JSON.stringify(workspaceData)
-      );
-      setCurrentWorkspace(workspaceData);
-    },
-
-    login: () => {
-      const userInfo = {
-        name: 'Diamond',
-        id: 'ttt',
-        email: 'diamond.shx@gmail.com',
-        avatar: 'string',
-      };
-      localStorage.setItem('affine-user', JSON.stringify(userInfo));
-      console.log('login');
-      setUser(userInfo);
-    },
-    getUserInfo: () => {
-      return user;
-    },
-
-    SignOut(): void {
-      localStorage.removeItem('affine-user');
-      setUser(null);
-    },
-
-    workspaceMetaList,
-    currentWorkspace,
-    user,
-  };
-};
-
-export default useTemporaryHelper;

packages/app/src/pages/_app.tsx

@@ -12,6 +12,7 @@ import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
 import type { NextPage } from 'next';
 import { AppStateProvider } from '@/providers/app-state-provider/provider';
 import ConfirmProvider from '@/providers/confirm-provider';
+import TemporaryHelperProvider from '@/providers/temporary-helper-provider';
 import { ModalProvider } from '@/providers/global-modal-provider';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
@@ -52,6 +53,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       <Logger />
       <ProviderComposer
         contexts={[
+          <TemporaryHelperProvider key="TemporaryHelperProvider" />,
           <ThemeProvider key="ThemeProvider" />,
           <AppStateProvider key="appStateProvider" />,
           <ModalProvider key="ModalProvider" />,

packages/app/src/providers/temporary-helper-provider.tsx

@@ -0,0 +1,189 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { getWorkspaces, User, Workspace } from '@/hooks/mock-data/mock';
+
+type TemporaryContextValue = {
+  workspaceMetaList: Workspace[];
+  currentWorkspace: Workspace | null;
+  user: User | null;
+
+  updateWorkspaceMeta: (
+    workspaceId: string,
+    workspaceData: {
+      name?: string;
+      avatar?: string;
+      isPublish?: boolean;
+      type?: 'local' | 'cloud' | 'join';
+    }
+  ) => void;
+
+  createWorkspace: (workspaceName: string) => Workspace;
+
+  deleteWorkspace: (workspaceId: string) => void;
+
+  setWorkspacePublish: (id: string, isPublish: boolean) => void;
+
+  setActiveWorkspace: (workspaceData: Workspace) => void;
+
+  login: () => void;
+
+  signOut: () => void;
+};
+type TemporaryContextProps = PropsWithChildren<Record<string, unknown>>;
+
+export const TemporaryContext = createContext<TemporaryContextValue>({
+  workspaceMetaList: [],
+  currentWorkspace: null,
+  user: null,
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  updateWorkspaceMeta: () => {},
+
+  createWorkspace: () => {
+    return {} as Workspace;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  deleteWorkspace: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setWorkspacePublish: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setActiveWorkspace: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  login: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  signOut: () => {},
+});
+
+export const useTemporaryHelper = () => useContext(TemporaryContext);
+
+export const TemporaryHelperProvider = ({
+  children,
+}: PropsWithChildren<TemporaryContextProps>) => {
+  const [workspaceMetaList, setWorkspaceMetaList] = useState<Workspace[]>([]);
+  const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(
+    null
+  );
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    setWorkspaceMetaList(getWorkspaces());
+    setCurrentWorkspace(
+      JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}')
+    );
+  }, []);
+
+  return (
+    <TemporaryContext.Provider
+      value={{
+        workspaceMetaList,
+        currentWorkspace,
+        user,
+
+        updateWorkspaceMeta: (workspaceId, workspaceData) => {
+          const workspacesMeta = getWorkspaces();
+          const newWorkspacesMeta = workspacesMeta.map(
+            (workspace: Workspace) => {
+              if (workspace.id === workspaceId) {
+                workspaceData.name && (workspace.name = workspaceData.name);
+                workspaceData.avatar &&
+                  (workspace.avatar = workspaceData.avatar);
+                workspaceData.type && (workspace.type = workspaceData.type);
+                workspaceData.isPublish &&
+                  (workspace.isPublish = workspaceData.isPublish);
+                return workspace;
+              }
+              return workspace;
+            }
+          );
+          localStorage.setItem(
+            'affine-workspace',
+            JSON.stringify(newWorkspacesMeta)
+          );
+          setWorkspaceMetaList(newWorkspacesMeta);
+          if (workspaceId === currentWorkspace?.id) {
+            setCurrentWorkspace(
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              newWorkspacesMeta.find(v => v.id === currentWorkspace.id)
+            );
+          }
+        },
+        createWorkspace: workspaceName => {
+          const workspaceData = {
+            name: workspaceName,
+            id: 'workspace-' + Date.now(),
+            isPublish: false,
+            isLocal: true,
+            avatar: '',
+            type: 'local',
+          } as Workspace;
+          const workspacesMeta = getWorkspaces();
+          workspacesMeta.push(workspaceData);
+          localStorage.setItem(
+            'affine-workspace',
+            JSON.stringify(workspacesMeta)
+          );
+
+          setWorkspaceMetaList([...workspacesMeta]);
+          return workspaceData;
+        },
+        deleteWorkspace: workspaceId => {
+          const workspacesMeta = getWorkspaces();
+          const newWorkspacesMeta = workspacesMeta.filter(() => {
+            return workspaceId !== workspaceId;
+          });
+          localStorage.setItem(
+            'affine-workspace',
+            JSON.stringify(newWorkspacesMeta)
+          );
+          setWorkspaceMetaList(workspacesMeta);
+        },
+
+        setWorkspacePublish: (id, isPublish) => {
+          const workspacesMeta = getWorkspaces();
+          const newWorkspacesMeta = workspacesMeta.map(
+            (workspace: Workspace) => {
+              if (workspace.id === id) {
+                workspace.isPublish = isPublish;
+              }
+              return workspace;
+            }
+          );
+          localStorage.setItem(
+            'affine-workspace',
+            JSON.stringify(newWorkspacesMeta)
+          );
+          setWorkspaceMetaList(workspacesMeta);
+        },
+        setActiveWorkspace(workspaceData) {
+          console.log('workspaceData: ', workspaceData);
+          localStorage.setItem(
+            'affine-active-workspace',
+            JSON.stringify(workspaceData)
+          );
+          setCurrentWorkspace(workspaceData);
+        },
+
+        login: () => {
+          const userInfo = {
+            name: 'Diamond',
+            id: 'ttt',
+            email: 'diamond.shx@gmail.com',
+            avatar: 'string',
+          };
+          localStorage.setItem('affine-user', JSON.stringify(userInfo));
+          setUser(userInfo);
+        },
+
+        signOut(): void {
+          localStorage.removeItem('affine-user');
+          setUser(null);
+        },
+      }}
+    >
+      {children}
+    </TemporaryContext.Provider>
+  );
+};
+
+export default TemporaryHelperProvider;