Connect with websocket for itemstree

packages/app/src/client/services/ContextExtractor.tsx

@@ -14,6 +14,7 @@ import {
   usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
   useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
+import { useSetupGlobalSocket } from '~/stores/websocket';
 import { IUserUISettings } from '~/interfaces/user-ui-settings';
 
 const { isTrashPage: _isTrashPage } = pagePathUtils;
@@ -153,6 +154,9 @@ const ContextExtractorOnce: FC = () => {
   // SearchResult
   useIsDeviceSmallerThanLg();
 
+  // Global Socket
+  useSetupGlobalSocket();
+
   return null;
 };
 

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -7,6 +7,7 @@ import Item from './Item';
 import { usePageTreeTermManager, useSWRxPageAncestorsChildren, useSWRxRootPage } from '~/stores/page-listing';
 import { TargetAndAncestors } from '~/interfaces/page-listing-results';
 import { OnDeletedFunction } from '~/interfaces/ui';
+import { SocketNamespace, UpdateDescCountData, UpdateDescCountRawData } from '~/interfaces/websocket';
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import {
   IPageForPageDeleteModal, IPageForPageDuplicateModal, usePageDuplicateModal, IPageForPageRenameModal, usePageRenameModal, usePageDeleteModal,
@@ -16,6 +17,7 @@ import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import { useIsEnabledAttachTitleHeader } from '~/stores/context';
 import { useFullTextSearchTermManager } from '~/stores/search';
 import { useDescendantsPageListForCurrentPathTermManager } from '~/stores/page';
+import { useGlobalSocket } from '~/stores/websocket';
 
 /*
  * Utility to generate initial node
@@ -124,6 +126,8 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
   const { open: openDeleteModal } = usePageDeleteModal();
   const [isScrolled, setIsScrolled] = useState(false);
 
+  const { data: socket } = useGlobalSocket();
+
 
   // for mutation
   const { advance: advancePt } = usePageTreeTermManager();
@@ -142,6 +146,18 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (socket == null) {
+      return;
+    }
+
+    // socket
+    socket.on(SocketNamespace.UpdateDescCount, (data: UpdateDescCountRawData) => {
+      // save to global state
+      const dataToSave: UpdateDescCountData = new Map(Object.entries(data));
+    });
+  }, [socket]);
+
   const onClickDuplicateMenuItem = (pageToDuplicate: IPageForPageDuplicateModal) => {
     openDuplicateModal(pageToDuplicate);
   };

packages/app/src/stores/websocket.tsx

@@ -0,0 +1,25 @@
+import { SWRResponse } from 'swr';
+import io, { Socket } from 'socket.io-client';
+
+import { useStaticSWR } from './use-static-swr';
+import loggerFactory from '~/utils/logger';
+
+const logger = loggerFactory('growi:stores:ui');
+
+export const GLOBAL_SOCKET_NS = '/';
+export const GLOBAL_SOCKET_KEY = 'globalSocket';
+
+export const useSetupGlobalSocket = (): SWRResponse<Socket, Error> => {
+  const socket = io(GLOBAL_SOCKET_NS, {
+    transports: ['websocket'],
+  });
+
+  socket.on('error', (err) => { logger.error(err) });
+  socket.on('connect_error', (err) => { logger.error('Failed to connect with websocket.', err) });
+
+  return useStaticSWR(GLOBAL_SOCKET_KEY, socket);
+};
+
+export const useGlobalSocket = (): SWRResponse<Socket, Error> => {
+  return useStaticSWR(GLOBAL_SOCKET_KEY);
+};