From 0346b22bdd38cb2c3695f83bd6d4ade6e4f2e556 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 6 Jan 2023 16:01:12 +0800 Subject: [PATCH] fix: temporary helper error --- .../src/components/create-workspace/index.tsx | 2 +- .../src/components/workspace-modal/index.tsx | 3 +- .../workspace-setting/MembersPage.tsx | 2 +- .../workspace-setting/PublishPage.tsx | 2 +- .../components/workspace-setting/SyncPage.tsx | 2 +- .../workspace-setting/general/general.tsx | 2 +- .../workspace-setting/workspace-setting.tsx | 2 +- .../WorkspaceSelector/WorkspaceSelector.tsx | 2 +- .../app/src/hooks/use-temporary-helper.ts | 129 ------------ packages/app/src/pages/_app.tsx | 2 + .../providers/temporary-helper-provider.tsx | 189 ++++++++++++++++++ 11 files changed, 200 insertions(+), 137 deletions(-) delete mode 100644 packages/app/src/hooks/use-temporary-helper.ts create mode 100644 packages/app/src/providers/temporary-helper-provider.tsx diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 26d5d5cef6..a3d9f3f1a4 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/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; } diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 9d8d8788f6..495feb2c1a 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/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; diff --git a/packages/app/src/components/workspace-setting/MembersPage.tsx b/packages/app/src/components/workspace-setting/MembersPage.tsx index b69c89b6f1..20903dbca4 100644 --- a/packages/app/src/components/workspace-setting/MembersPage.tsx +++ b/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 }) => { diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index f5136e76bd..0e8a9b5cf3 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/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 }) => { diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index 8b90c5ae1b..e647852067 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/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(); diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx index 511c93ff41..60bb0efeea 100644 --- a/packages/app/src/components/workspace-setting/general/general.tsx +++ b/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(); diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index 69e8a0cc7d..6e4ad0ccd0 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/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', diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index 7bf0443f5d..931499fe4f 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/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(); diff --git a/packages/app/src/hooks/use-temporary-helper.ts b/packages/app/src/hooks/use-temporary-helper.ts deleted file mode 100644 index 4f205fef6f..0000000000 --- a/packages/app/src/hooks/use-temporary-helper.ts +++ /dev/null @@ -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( - getWorkspaces() - ); - const [currentWorkspace, setCurrentWorkspace] = useState( - JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}') - ); - const [user, setUser] = useState(); - - 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; diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index c7cbd78d4b..950ce0f9dc 100644 --- a/packages/app/src/pages/_app.tsx +++ b/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) => { , , , , diff --git a/packages/app/src/providers/temporary-helper-provider.tsx b/packages/app/src/providers/temporary-helper-provider.tsx new file mode 100644 index 0000000000..fa80a8a435 --- /dev/null +++ b/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>; + +export const TemporaryContext = createContext({ + 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) => { + const [workspaceMetaList, setWorkspaceMetaList] = useState([]); + const [currentWorkspace, setCurrentWorkspace] = useState( + null + ); + const [user, setUser] = useState(null); + + useEffect(() => { + setWorkspaceMetaList(getWorkspaces()); + setCurrentWorkspace( + JSON.parse(localStorage.getItem('affine-active-workspace') ?? '{}') + ); + }, []); + + return ( + { + 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} + + ); +}; + +export default TemporaryHelperProvider;