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,37 +1,38 @@
-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: {},
-    {}
+        },
-  );
+        (set, get) => ({
-  return (
-    <ConfirmContext.Provider
-      value={{
           confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
             return new Promise(resolve => {
+              const confirmRecord = { ...get().record };
               const confirmId = String(Date.now());
               const closeHandler = () => {
                 delete confirmRecord[confirmId];
-              setConfirmRecord({ ...confirmRecord });
+                set({ record: { ...confirmRecord } });
               };
-            setConfirmRecord(oldConfirmRecord => {
+              set(({ record }) => {
                 return {
-                ...oldConfirmRecord,
+                  record: {
+                    ...record,
                     [confirmId]: (
                       <Confirm
                         {...props}
@@ -47,16 +48,53 @@ export const ConfirmProvider = ({
                         }}
                       />
                     ),
+                  },
                 };
               });
             });
           },
-      }}
+        })
-    >
+      )
-      {children}
+    )
-      {Object.entries(confirmRecord).map(([confirmId, confirmNode]) => {
+  );
+
+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>
   );
 };