simplify useEditingClients

apps/app/src/client/components/PageEditor/EditorNavbar/EditingUserList.tsx

@@ -1,6 +1,6 @@
 import { type FC, useState } from 'react';
 
-import type { IUserHasId } from '@growi/core';
+import type { EditingClient } from '@growi/editor';
 import { UserPicture } from '@growi/ui/dist/components';
 import { Popover, PopoverBody } from 'reactstrap';
 
@@ -11,28 +11,28 @@ import styles from './EditingUserList.module.scss';
 const userListPopoverClass = styles['user-list-popover'] ?? '';
 
 type Props = {
-  userList: IUserHasId[]
+  clientList: EditingClient[]
 }
 
-export const EditingUserList: FC<Props> = ({ userList }) => {
+export const EditingUserList: FC<Props> = ({ clientList }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
 
-  const firstFourUsers = userList.slice(0, 4);
-  const remainingUsers = userList.slice(4);
+  const firstFourUsers = clientList.slice(0, 4);
+  const remainingUsers = clientList.slice(4);
 
-  if (userList.length === 0) {
+  if (clientList.length === 0) {
     return <></>;
   }
 
   return (
     <div className="d-flex flex-column justify-content-start justify-content-sm-end">
       <div className="d-flex justify-content-start justify-content-sm-end">
-        {firstFourUsers.map(user => (
-          <div key={user._id} className="ms-1">
+        {firstFourUsers.map(editingClient => (
+          <div key={editingClient.clientId} className="ms-1">
             <UserPicture
-              user={user}
+              user={editingClient.userId}
               noLink
               additionalClassName="border border-info"
             />

apps/app/src/client/components/PageEditor/EditorNavbar/EditorNavbar.tsx

@@ -1,6 +1,6 @@
 
 import { PageHeader } from '~/client/components/PageHeader';
-import { useEditingUsers } from '~/stores/use-editing-users';
+import { useEditingClients } from '~/stores/use-editing-clients';
 
 import { EditingUserList } from './EditingUserList';
 
@@ -9,10 +9,10 @@ import styles from './EditorNavbar.module.scss';
 const moduleClass = styles['editor-navbar'] ?? '';
 
 const EditingUsers = (): JSX.Element => {
-  const { data: editingUsers } = useEditingUsers();
+  const { data: editingClients } = useEditingClients();
   return (
     <EditingUserList
-      userList={editingUsers?.userList ?? []}
+      clientList={editingClients ?? []}
     />
   );
 };

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

@@ -44,7 +44,7 @@ import {
 import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
 import { usePreviewOptions } from '~/stores/renderer';
 import { useIsUntitledPage, useSelectedGrant } from '~/stores/ui';
-import { useEditingUsers } from '~/stores/use-editing-users';
+import { useEditingClients } from '~/stores/use-editing-clients';
 import loggerFactory from '~/utils/logger';
 
 import { EditorNavbar } from './EditorNavbar';
@@ -108,7 +108,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const { data: editorSettings } = useEditorSettings();
   const { mutate: mutateIsGrantNormalized } = useSWRxCurrentGrantData(currentPage?._id);
   const { data: user } = useCurrentUser();
-  const { onEditorsUpdated } = useEditingUsers();
+  const { mutate: mutateEditingUsers } = useEditingClients();
   const onConflict = useConflictResolver();
   const { data: reservedNextCaretLine, mutate: mutateReservedNextCaretLine } = useReservedNextCaretLine();
 
@@ -374,7 +374,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
           user={user ?? undefined}
           pageId={pageId ?? undefined}
           editorSettings={editorSettings}
-          onEditorsUpdated={onEditorsUpdated}
+          onEditorsUpdated={mutateEditingUsers}
           cmProps={cmProps}
         />
       </div>

apps/app/src/stores/use-editing-clients.ts

@@ -0,0 +1,7 @@
+import { useSWRStatic } from '@growi/core/dist/swr';
+import type { EditingClient } from '@growi/editor';
+import type { SWRResponse } from 'swr';
+
+export const useEditingClients = (status?: EditingClient[]): SWRResponse<EditingClient[], Error> => {
+  return useSWRStatic<EditingClient[], Error>('editingUsers', status, { fallbackData: [] });
+};

apps/app/src/stores/use-editing-users.ts

@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-
-import type { IUserHasId } from '@growi/core';
-import { useSWRStatic } from '@growi/core/dist/swr';
-import type { SWRResponse } from 'swr';
-
-type EditingUsersStatus = {
-  userList: IUserHasId[],
-}
-
-type EditingUsersStatusUtils = {
-  onEditorsUpdated(
-    userList: IUserHasId[],
-  ): void,
-}
-
-export const useEditingUsers = (status?: EditingUsersStatus): SWRResponse<EditingUsersStatus, Error> & EditingUsersStatusUtils => {
-  const initialData: EditingUsersStatus = {
-    userList: [],
-  };
-  const swrResponse = useSWRStatic<EditingUsersStatus, Error>('editingUsers', status, { fallbackData: initialData });
-
-  const { mutate } = swrResponse;
-
-  const onEditorsUpdated = useCallback((userList: IUserHasId[]): void => {
-    mutate({ userList });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    onEditorsUpdated,
-  };
-};

packages/editor/src/client/components/CodeMirrorEditorMain.tsx

@@ -7,6 +7,7 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import type { EditingClient } from '../../interfaces';
 import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
 import { setDataLine, useUnifiedMergeView } from '../services-internal';
 import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
@@ -26,7 +27,7 @@ type Props = CodeMirrorEditorProps & {
   initialValue?: string,
   enableCollaboration?: boolean,
   enableUnifiedMergeView?: boolean,
-  onEditorsUpdated?: (userList: IUserHasId[]) => void,
+  onEditorsUpdated?: (clientList: EditingClient[]) => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {

packages/editor/src/interfaces/editing-client.ts

@@ -0,0 +1,7 @@
+export type EditingClient = {
+  clientId: number;
+  name: string;
+  userId?: string;
+  color: string;
+  colorLight: string;
+}

packages/editor/src/interfaces/index.ts

@@ -1,2 +1,3 @@
 export * from './delta';
+export * from './editing-client';
 export * from './re-exports';