refactor: implement useSelectedPages hook for managing selected pages state

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementKeywordSearch.tsx

@@ -12,6 +12,7 @@ import {
 
 import { useSWRxSearch } from '~/stores/search';
 
+import { useSelectedPages } from '../../../services/use-selected-pages';
 import {
   useAiAssistantManagementModal, AiAssistantManagementModalPageMode,
 } from '../../../stores/ai-assistant';
@@ -37,7 +38,7 @@ export const AiAssistantKeywordSearch = (props: { updateBaseSelectedPages: (page
   const { updateBaseSelectedPages } = props;
 
   const [selectedSearchKeywords, setSelectedSearchKeywords] = useState<Array<SelectedSearchKeyword>>([]);
-  const [selectedPages, setSelectedPages] = useState<Map<string, IPageHasId>>(new Map());
+  const { selectedPages, addPageHandler, removePageHandler } = useSelectedPages();
 
   const joinedSelectedSearchKeywords = useMemo(() => {
     return selectedSearchKeywords.map(item => item.label).join(' ');
@@ -122,22 +123,6 @@ export const AiAssistantKeywordSearch = (props: { updateBaseSelectedPages: (page
     handleMenuItemSelect(initialItem, event);
   }, [selectedSearchKeywords]);
 
-  const addPageHandler = useCallback((page: IPageHasId) => {
-    setSelectedPages((prev) => {
-      const newMap = new Map(prev);
-      newMap.set(page._id, page);
-      return newMap;
-    });
-  }, []);
-
-  const removePageHandler = useCallback((page: IPageHasId) => {
-    setSelectedPages((prev) => {
-      const newMap = new Map(prev);
-      newMap.delete(page._id);
-      return newMap;
-    });
-  }, []);
-
   const nextButtonClickHandler = useCallback(() => {
     updateBaseSelectedPages(Array.from(selectedPages.values()));
     changePageMode(AiAssistantManagementModalPageMode.HOME);

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageTreeSelection.tsx

@@ -1,5 +1,5 @@
 import React, {
-  Suspense, useCallback, useState, memo,
+  Suspense, useCallback, memo,
 } from 'react';
 
 import type { IPageHasId } from '@growi/core';
@@ -15,6 +15,7 @@ import { TreeItemLayout } from '~/client/components/TreeItem';
 import type { IPageForItem } from '~/interfaces/page';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
 
+import { useSelectedPages } from '../../../services/use-selected-pages';
 import { AiAssistantManagementModalPageMode, useAiAssistantManagementModal } from '../../../stores/ai-assistant';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
@@ -91,23 +92,7 @@ export const AiAssistantManagementPageTreeSelection = (): JSX.Element => {
   const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
-  const [selectedPages, setSelectedPages] = useState<Map<string, IPageHasId>>(new Map());
-
-  const addPageHandler = useCallback((page: IPageHasId) => {
-    setSelectedPages((prev) => {
-      const newMap = new Map(prev);
-      newMap.set(page._id, page);
-      return newMap;
-    });
-  }, []);
-
-  const removePageHandler = useCallback((page: IPageHasId) => {
-    setSelectedPages((prev) => {
-      const newMap = new Map(prev);
-      newMap.delete(page._id);
-      return newMap;
-    });
-  }, []);
+  const { selectedPages, addPageHandler, removePageHandler } = useSelectedPages();
 
 
   return (

apps/app/src/features/openai/client/services/use-selected-pages.ts

@@ -0,0 +1,35 @@
+import { useState, useCallback } from 'react';
+
+import type { IPageHasId } from '@growi/core';
+
+type UseSelectedPages = {
+  selectedPages: Map<string, IPageHasId>,
+  addPageHandler: (page: IPageHasId) => void,
+  removePageHandler: (page: IPageHasId) => void,
+}
+
+export const useSelectedPages = (): UseSelectedPages => {
+  const [selectedPages, setSelectedPages] = useState<Map<string, IPageHasId>>(new Map());
+
+  const addPageHandler = useCallback((page: IPageHasId) => {
+    setSelectedPages((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(page._id, page);
+      return newMap;
+    });
+  }, []);
+
+  const removePageHandler = useCallback((page: IPageHasId) => {
+    setSelectedPages((prev) => {
+      const newMap = new Map(prev);
+      newMap.delete(page._id);
+      return newMap;
+    });
+  }, []);
+
+  return {
+    selectedPages,
+    addPageHandler,
+    removePageHandler,
+  };
+};