refactor: hooks useConfirm (#998)

apps/web/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -21,7 +21,7 @@ const PopoverContent = () => {
   const { editor } = useAppState();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
   const { changePageMode } = usePageHelper();
-  const { confirm } = useConfirm();
+  const confirm = useConfirm(store => store.confirm);
   const { t } = useTranslation();
   const {
     mode = 'page',

apps/web/src/components/header/header-right-items/TrashButtonGroup.tsx

@@ -10,7 +10,7 @@ export const TrashButtonGroup = () => {
   const { permanentlyDeletePage } = usePageHelper();
   const { currentWorkspace } = useAppState();
   const { toggleDeletePage } = usePageHelper();
-  const { confirm } = useConfirm();
+  const confirm = useConfirm(store => store.confirm);
   const router = useRouter();
   const { id = '' } = useCurrentPageMeta() || {};
   const { t } = useTranslation();

apps/web/src/components/page-list/OperationCell.tsx

@@ -19,7 +19,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
   const { openPage } = usePageHelper();
   const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
-  const { confirm } = useConfirm();
+  const confirm = useConfirm(store => store.confirm);
   const { t } = useTranslation();
   const OperationMenu = (
     <>
@@ -77,7 +77,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id } = pageMeta;
   const { openPage, getPageMeta } = usePageHelper();
   const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
-  const { confirm } = useConfirm();
+  const confirm = useConfirm(store => store.confirm);
   const { t } = useTranslation();
   return (
     <FlexWrapper>

apps/web/src/components/workspace-setting/member/MembersPage.tsx

@@ -33,7 +33,7 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { members, removeMember, loaded } = useMembers();
   const { triggerEnableWorkspaceModal } = useModal();
   const { t } = useTranslation();
-  const { confirm } = useConfirm();
+  const confirm = useConfirm(store => store.confirm);
 
   if (workspace.provider === 'affine') {
     return (

apps/web/src/providers/ConfirmProvider.tsx

@@ -1,62 +1,100 @@
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import type { PropsWithChildren } from 'react';
 import { Confirm, ConfirmProps } from '@affine/component';
+import { createStore, useStore } from 'zustand';
+import { combine, subscribeWithSelector } from 'zustand/middleware';
+import { UseBoundStore } from 'zustand/react';
 
-type ConfirmContextValue = {
+type ConfirmActions = {
   confirm: (props: ConfirmProps) => Promise<boolean>;
 };
-type ConfirmContextProps = PropsWithChildren<Record<string, unknown>>;
 
-export const ConfirmContext = createContext<ConfirmContextValue>({
+type ConfirmState = {
-  confirm: () => Promise.resolve(false),
+  record: Record<string, JSX.Element>;
-});
+};
 
-export const useConfirm = () => useContext(ConfirmContext);
+const create = () =>
-
+  createStore(
-export const ConfirmProvider = ({
+    subscribeWithSelector(
-  children,
+      combine<ConfirmState, ConfirmActions>(
-}: PropsWithChildren<ConfirmContextProps>) => {
+        {
-  const [confirmRecord, setConfirmRecord] = useState<Record<string, ReactNode>>(
+          record: {},
-    {}
-  );
-  return (
-    <ConfirmContext.Provider
-      value={{
-        confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
-          return new Promise(resolve => {
-            const confirmId = String(Date.now());
-            const closeHandler = () => {
-              delete confirmRecord[confirmId];
-              setConfirmRecord({ ...confirmRecord });
-            };
-            setConfirmRecord(oldConfirmRecord => {
-              return {
-                ...oldConfirmRecord,
-                [confirmId]: (
-                  <Confirm
-                    {...props}
-                    onCancel={() => {
-                      closeHandler();
-                      onCancel?.();
-                      resolve(false);
-                    }}
-                    onConfirm={() => {
-                      closeHandler();
-                      onConfirm?.();
-                      resolve(true);
-                    }}
-                  />
-                ),
-              };
-            });
-          });
         },
-      }}
+        (set, get) => ({
-    >
+          confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
-      {children}
+            return new Promise(resolve => {
-      {Object.entries(confirmRecord).map(([confirmId, confirmNode]) => {
+              const confirmRecord = { ...get().record };
+              const confirmId = String(Date.now());
+              const closeHandler = () => {
+                delete confirmRecord[confirmId];
+                set({ record: { ...confirmRecord } });
+              };
+              set(({ record }) => {
+                return {
+                  record: {
+                    ...record,
+                    [confirmId]: (
+                      <Confirm
+                        {...props}
+                        onCancel={() => {
+                          closeHandler();
+                          onCancel?.();
+                          resolve(false);
+                        }}
+                        onConfirm={() => {
+                          closeHandler();
+                          onConfirm?.();
+                          resolve(true);
+                        }}
+                      />
+                    ),
+                  },
+                };
+              });
+            });
+          },
+        })
+      )
+    )
+  );
+
+type Store = ReturnType<typeof create>;
+
+export const ConfirmContext = createContext<Store | null>(null);
+
+export const useConfirmApi = () => {
+  const api = useContext(ConfirmContext);
+  if (!api) {
+    throw new Error('cannot find confirm context');
+  }
+  return api;
+};
+
+export const useConfirm: UseBoundStore<Store> = ((
+  selector: Parameters<UseBoundStore<Store>>[0],
+  equals: Parameters<UseBoundStore<Store>>[1]
+) => {
+  const api = useConfirmApi();
+  return useStore(api, selector, equals);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as any;
+
+function Records() {
+  const conform = useConfirm(store => store.record);
+  return (
+    <>
+      {Object.entries(conform).map(([confirmId, confirmNode]) => {
         return <div key={confirmId}>{confirmNode}</div>;
       })}
+    </>
+  );
+}
+
+export const ConfirmProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <ConfirmContext.Provider value={useMemo(() => create(), [])}>
+      {children}
+      <Records />
     </ConfirmContext.Provider>
   );
 };