migrate usePageTreeDescCountMap

apps/app/src/client/components/ItemsTree/ItemsTree.tsx

@@ -16,12 +16,12 @@ import { useCurrentPagePath, useFetchCurrentPage } from '~/states/page';
 import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
 import type { IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
 import { usePageDuplicateModalActions } from '~/states/ui/modal/page-duplicate';
+import { usePageTreeDescCountMapAction } from '~/states/ui/page-tree-desc-count-map';
 import { mutateAllPageInfo } from '~/stores/page';
 import {
   useSWRxRootPage, mutatePageTree, mutatePageList,
 } from '~/stores/page-listing';
 import { mutateSearching } from '~/stores/search';
-import { usePageTreeDescCountMap } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import { ItemNode, type TreeItemProps } from '../TreeItem';
@@ -61,7 +61,7 @@ export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
   const { open: openDeleteModal } = usePageDeleteModalActions();
 
   const { data: socket } = useGlobalSocket();
-  const { data: ptDescCountMap, update: updatePtDescCountMap } = usePageTreeDescCountMap();
+  const { update: updatePtDescCountMap } = usePageTreeDescCountMapAction();
 
   // for mutation
   const { fetchCurrentPage } = useFetchCurrentPage();
@@ -80,7 +80,7 @@ export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
 
     return () => { socket.off(SocketEventName.UpdateDescCount) };
 
-  }, [socket, ptDescCountMap, updatePtDescCountMap]);
+  }, [socket, updatePtDescCountMap]);
 
   const onRenamed = useCallback((fromPath: string | undefined, toPath: string) => {
     mutatePageTree();

apps/app/src/client/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'react';
 
 import CountBadge from '~/client/components/Common/CountBadge';
 import type { TreeItemToolProps } from '~/client/components/TreeItem';
-import { usePageTreeDescCountMap } from '~/stores/ui';
+import { usePageTreeDescCountMap } from '~/states/ui/page-tree-desc-count-map';
 
 
 export const CountBadgeForPageTreeItem = (props: TreeItemToolProps): JSX.Element => {

apps/app/src/client/components/TreeItem/NewPageInput/use-new-page-input.tsx

@@ -16,8 +16,8 @@ import { useCreatePage } from '~/client/services/create-page';
 import { toastWarning, toastError, toastSuccess } from '~/client/util/toastr';
 import type { InputValidationResult } from '~/client/util/use-input-validator';
 import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
+import { usePageTreeDescCountMap } from '~/states/ui/page-tree-desc-count-map';
 import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
-import { usePageTreeDescCountMap } from '~/stores/ui';
 
 import { shouldCreateWipPage } from '../../../../utils/should-create-wip-page';
 import type { TreeItemToolProps } from '../interfaces';
@@ -78,7 +78,7 @@ export const useNewPageInput = (): UseNewPageInput => {
 
     const inputValidator = useInputValidator(ValidationTarget.PAGE);
 
-    const changeHandler = useCallback(async(e: ChangeEvent<HTMLInputElement>) => {
+    const changeHandler = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {
       const validationResult = inputValidator(e.target.value);
       setValidationResult(validationResult ?? undefined);
     }, [inputValidator]);
@@ -89,7 +89,7 @@ export const useNewPageInput = (): UseNewPageInput => {
       setShowInput(false);
     }, []);
 
-    const create = useCallback(async(inputText) => {
+    const create = useCallback(async (inputText) => {
       if (inputText.trim() === '') {
         return cancel();
       }
@@ -162,11 +162,11 @@ export const useNewPageInput = (): UseNewPageInput => {
             onCancel={cancel}
             autoFocus
           />
-          { isInvalid && (
+          {isInvalid && (
             <div id="new-page-input" className="invalid-feedback d-block my-1">
               {validationResult.message}
             </div>
-          ) }
+          )}
         </div>
       )
       : <></>;

apps/app/src/client/components/TreeItem/TreeItemLayout.tsx

@@ -11,8 +11,8 @@ import React, {
 
 import { addTrailingSlash } from '@growi/core/dist/utils/path-utils';
 
+import { usePageTreeDescCountMap } from '~/states/ui/page-tree-desc-count-map';
 import { useSWRxPageChildren } from '~/stores/page-listing';
-import { usePageTreeDescCountMap } from '~/stores/ui';
 
 import { ItemNode } from './ItemNode';
 import { SimpleItemContent } from './SimpleItemContent';
@@ -175,7 +175,7 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
           )}
         </div>
 
-        { showAlternativeContent && AlternativeComponents != null
+        {showAlternativeContent && AlternativeComponents != null
           ? (
             AlternativeComponents.map((AlternativeContent, index) => (
               // eslint-disable-next-line react/no-array-index-key
@@ -202,7 +202,7 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
         }
 
       </li>
-      { isOpen && (
+      {isOpen && (
         <div className={`tree-item-layout-children level-${baseItemLevel + 1}`}>
 
           {HeadObChildrenComponents?.map((HeadObChildrenContents, index) => (
@@ -210,7 +210,7 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
             (<HeadObChildrenContents key={index} {...toolProps} itemLevel={baseItemLevel + 1} />)
           ))}
 
-          { hasChildren() && currentChildren.map((node) => {
+          {hasChildren() && currentChildren.map((node) => {
             const itemProps = {
               ...baseProps,
               className,
@@ -224,10 +224,10 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
             return (
               <ItemClassFixed key={node.page._id} {...itemProps} />
             );
-          }) }
+          })}
 
         </div>
-      ) }
+      )}
     </div>
   );
 };

apps/app/src/states/ui/page-tree-desc-count-map.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+// Type definitions
+export type UpdateDescCountData = Map<string, number>;
+
+export type PageTreeDescCountMapGetter = {
+  getDescCount: (pageId?: string) => number | null;
+};
+
+export type PageTreeDescCountMapActions = {
+  update: (newData: UpdateDescCountData) => void;
+};
+
+// Atom definition
+const pageTreeDescCountMapAtom = atom<UpdateDescCountData>(new Map());
+
+export const usePageTreeDescCountMap = (): PageTreeDescCountMapGetter => {
+  const data = useAtomValue(pageTreeDescCountMapAtom);
+
+  const getDescCount = useCallback((pageId?: string) => {
+    return pageId != null ? data.get(pageId) ?? null : null;
+  }, [data]);
+
+  return { getDescCount };
+};
+
+
+// Actions hook (write-only with callbacks)
+export const usePageTreeDescCountMapAction = (): PageTreeDescCountMapActions => {
+  const setDescCountMap = useSetAtom(pageTreeDescCountMapAtom);
+
+  const update = useCallback((newData: UpdateDescCountData) => {
+    setDescCountMap((current) => {
+      return new Map([...current, ...newData]);
+    });
+  }, [setDescCountMap]);
+
+  return { update };
+};

apps/app/src/stores/ui.tsx

@@ -11,7 +11,6 @@ import {
 } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
-import type { UpdateDescCountData } from '~/interfaces/websocket';
 import {
   useIsReadOnlyUser, useIsSharedUser,
 } from '~/states/context';
@@ -35,23 +34,6 @@ const logger = loggerFactory('growi:stores:ui');
  *                      for switching UI
  *********************************************************** */
 
-type PageTreeDescCountMapUtils = {
-  update(newData?: UpdateDescCountData): Promise<UpdateDescCountData | undefined>
-  getDescCount(pageId?: string): number | null | undefined
-}
-
-export const usePageTreeDescCountMap = (initialData?: UpdateDescCountData): SWRResponse<UpdateDescCountData, Error> & PageTreeDescCountMapUtils => {
-  const key = 'pageTreeDescCountMap';
-
-  const swrResponse = useStaticSWR<UpdateDescCountData, Error>(key, initialData, { fallbackData: new Map() });
-
-  return {
-    ...swrResponse,
-    getDescCount: (pageId?: string) => (pageId != null ? swrResponse.data?.get(pageId) : null),
-    update: (newData: UpdateDescCountData) => swrResponse.mutate(new Map([...(swrResponse.data || new Map()), ...newData])),
-  };
-};
-
 
 type UseCommentEditorDirtyMapOperation = {
   evaluate(key: string, commentBody: string): Promise<number>,