declear useStaticPageTags and use the data

packages/app/src/client/services/EditorContainer.js

@@ -18,7 +18,7 @@ export default class EditorContainer extends Container {
     this.appContainer.registerContainer(this);
 
     this.state = {
-      tags: null,
+      tags: [],
     };
 
     this.isSetBeforeunloadEventHandler = false;

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -14,11 +14,12 @@ import {
   useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath,
   useCreator, useRevisionAuthor, useCurrentUser, useIsGuestUser, useIsSharedUser, useShareLinkId,
 } from '~/stores/context';
+import { useStaticPageTags } from '~/stores/editor';
 import {
   usePageAccessoriesModal, PageAccessoriesModalContents, IPageForPageDuplicateModal,
   usePageDuplicateModal, usePageRenameModal, usePageDeleteModal, usePagePresentationModal,
 } from '~/stores/modal';
-import { useSWRTagsInfo } from '~/stores/page';
+import { useSWRxTagsInfo } from '~/stores/page';
 import {
   EditorMode, useDrawerMode, useEditorMode, useIsDeviceSmallerThanMd, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
   useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
@@ -165,7 +166,7 @@ const GrowiContextualSubNavigation = (props) => {
   const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
   const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
 
-  const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRTagsInfo(pageId);
+  const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRxTagsInfo(pageId);
 
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openRenameModal } = usePageRenameModal();
@@ -179,11 +180,17 @@ const GrowiContextualSubNavigation = (props) => {
 
   const isViewMode = editorMode === EditorMode.View;
 
+  console.log('editorMode', editorMode);
+
   const tagsUpdatedHandler = useCallback(async(newTags: string[]) => {
     // It will not be reflected in the DB until the page is refreshed
     if (editorMode === EditorMode.Editor) {
+      console.log('tagsUpdatedHandler1');
+      console.log('newTags', newTags);
       return editorContainer.setState({ tags: newTags });
     }
+    console.log('editorMode_2', editorMode);
+
 
     try {
       const { tags } = await apiPost('/tags.update', { pageId, revisionId, tags: newTags }) as { tags };
@@ -198,8 +205,8 @@ const GrowiContextualSubNavigation = (props) => {
     catch (err) {
       toastError(err, 'fail to update tags');
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageId]);
+
+  }, [editorMode, editorContainer, pageId, revisionId, mutateSWRTagsInfo]);
 
   const duplicateItemClickedHandler = useCallback(async(page: IPageForPageDuplicateModal) => {
     const duplicatedHandler: OnDuplicatedFunction = (fromPath, toPath) => {
@@ -322,7 +329,7 @@ const GrowiContextualSubNavigation = (props) => {
       isGuestUser={isGuestUser}
       isDrawerMode={isDrawerMode}
       isCompactMode={isCompactMode}
-      tags={tagsInfoData?.tags || []}
+      tags={isViewMode ? tagsInfoData?.tags || [] : editorContainer.state.tags}
       tagsUpdatedHandler={tagsUpdatedHandler}
       controls={ControlComponents}
       additionalClasses={['container-fluid']}

packages/app/src/components/Page.jsx

@@ -11,8 +11,8 @@ import { getOptionsToSave } from '~/client/util/editor';
 import {
   useCurrentPagePath, useIsGuestUser, useCurrentPageId,
 } from '~/stores/context';
-import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
-import { useSWRTagsInfo } from '~/stores/page';
+import { useSWRxSlackChannels, useIsSlackEnabled, useStaticPageTags } from '~/stores/editor';
+// import { useSWRxTagsInfo } from '~/stores/page';
 import {
   useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -192,11 +192,13 @@ const PageWrapper = (props) => {
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: pageId } = useCurrentPageId();
-  const { data: tagsInfoData } = useSWRTagsInfo(pageId);
+  console.log({ pageId });
+  const { data: tagsInfoData } = useStaticPageTags(pageId);
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();
 
+  // console.log('tagsInfoData', tagsInfoData);
   const pageRef = useRef(null);
 
   // set handler to open DrawioModal
@@ -241,7 +243,7 @@ const PageWrapper = (props) => {
       isGuestUser={isGuestUser}
       isMobile={isMobile}
       isSlackEnabled={isSlackEnabled}
-      pageTags={tagsInfoData?.tags || []}
+      pageTags={tagsInfoData.tags || []}
       slackChannels={slackChannelsData.toString()}
       grant={grant}
       grantGroupId={grantGroupId}

packages/app/src/components/PageEditor.tsx

@@ -17,9 +17,8 @@ import {
   useIsEditable, useIsIndentSizeForced, useCurrentPagePath, useCurrentPageId,
 } from '~/stores/context';
 import {
-  useCurrentIndentSize, useSWRxSlackChannels, useIsSlackEnabled, useIsTextlintEnabled,
+  useCurrentIndentSize, useSWRxSlackChannels, useIsSlackEnabled, useIsTextlintEnabled, useStaticPageTags,
 } from '~/stores/editor';
-import { useSWRTagsInfo } from '~/stores/page';
 import {
   EditorMode,
   useEditorMode, useIsMobile, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
@@ -88,7 +87,7 @@ const PageEditor = (props: Props): JSX.Element => {
   const { data: isMobile } = useIsMobile();
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: pageId } = useCurrentPageId();
-  const { data: tagsInfoData } = useSWRTagsInfo(pageId);
+  const { data: tagsInfoData } = useStaticPageTags(pageId);
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const { data: grant, mutate: mutateGrant } = useSelectedGrant();

packages/app/src/components/PageEditorByHackmd.jsx

@@ -10,8 +10,7 @@ import PageContainer from '~/client/services/PageContainer';
 import { apiPost } from '~/client/util/apiv1-client';
 import { getOptionsToSave } from '~/client/util/editor';
 import { useCurrentPagePath, useCurrentPageId } from '~/stores/context';
-import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
-import { useSWRTagsInfo } from '~/stores/page';
+import { useSWRxSlackChannels, useIsSlackEnabled, useStaticPageTags } from '~/stores/editor';
 import {
   useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -454,7 +453,7 @@ const PageEditorByHackmdWrapper = (props) => {
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const { data: isSlackEnabled } = useIsSlackEnabled();
   const { data: pageId } = useCurrentPageId();
-  const { data: tagsInfoData } = useSWRTagsInfo(pageId);
+  const { data: tagsInfoData } = useStaticPageTags(pageId);
   const { data: grant } = useSelectedGrant();
   const { data: grantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName } = useSelectedGrantGroupName();

packages/app/src/components/SavePageControls.jsx

@@ -15,7 +15,7 @@ import { getOptionsToSave } from '~/client/util/editor';
 
 // TODO: remove this when omitting unstated is completed
 import { useIsEditable, useCurrentPageId } from '~/stores/context';
-import { useSWRTagsInfo } from '~/stores/page';
+import { useStaticPageTags } from '~/stores/editor';
 import {
   useEditorMode, useSelectedGrant, useSelectedGrantGroupId, useSelectedGrantGroupName,
 } from '~/stores/ui';
@@ -145,7 +145,7 @@ const SavePageControlsWrapper = (props) => {
   const { data: grantGroupId, mutate: mutateGrantGroupId } = useSelectedGrantGroupId();
   const { data: grantGroupName, mutate: mutateGrantGroupName } = useSelectedGrantGroupName();
   const { data: pageId } = useCurrentPageId();
-  const { data: tagsInfoData } = useSWRTagsInfo(pageId);
+  const { data: tagsInfoData } = useStaticPageTags(pageId);
 
 
   if (isEditable == null || editorMode == null) {

packages/app/src/interfaces/pageTagsInfo.ts

@@ -1,3 +0,0 @@
-export type IPageTagsInfo = {
-  tags : string[],
-}

packages/app/src/interfaces/tag.ts

@@ -7,6 +7,10 @@ export type IDataTagCount = ITag & {count: number}
 
 export type ITagNames = ITag['name'][]
 
+export type IPageTagsInfo = {
+  tags : ITagNames,
+}
+
 export type IListTagNamesByPage = ITagNames
 
 

packages/app/src/stores/editor.tsx

@@ -7,7 +7,7 @@ import { Nullable } from '~/interfaces/common';
 import { IEditorSettings } from '~/interfaces/editor-settings';
 import { IResGetPageTags } from '~/interfaces/tag';
 import { SlackChannels } from '~/interfaces/user-trigger-notification';
-import { useSWRxPageTags } from '~/stores/tag';
+import { useSWRxTagsInfo } from '~/stores/page';
 
 import {
   useCurrentUser, useDefaultIndentSize, useIsGuestUser,
@@ -92,3 +92,8 @@ export const useIsSlackEnabled = (): SWRResponse<boolean, Error> => {
     { fallbackData: false },
   );
 };
+
+export const useStaticPageTags = (pageId: string | null | undefined): SWRResponse<IResGetPageTags['tags'], Error> => {
+  const { data: pageTags } = useSWRxTagsInfo(pageId);
+  return useStaticSWR<IResGetPageTags['tags'], Error>('pageTags', pageTags || [], { fallbackData: [] });
+};

packages/app/src/stores/page.tsx

@@ -11,7 +11,7 @@ import { IRecordApplicableGrant, IResIsGrantNormalized } from '~/interfaces/page
 import { IPagingResult } from '~/interfaces/paging-result';
 
 import { apiGet } from '../client/util/apiv1-client';
-import { IPageTagsInfo } from '../interfaces/pageTagsInfo';
+import { IPageTagsInfo } from '../interfaces/tag';
 
 import { useCurrentPageId, useCurrentPagePath } from './context';
 import { ITermNumberManagerUtil, useTermNumberManager } from './use-static-swr';
@@ -91,7 +91,7 @@ export const useSWRxDescendantsPageListForCurrrentPath = (pageNumber?: number):
   return useSWRxPageList(path, pageNumber, termNumber);
 };
 
-export const useSWRTagsInfo = (pageId: string | null | undefined): SWRResponse<IPageTagsInfo, Error> => {
+export const useSWRxTagsInfo = (pageId: string | null | undefined): SWRResponse<IPageTagsInfo, Error> => {
   const key = pageId == null ? null : `/pages.getPageTag?pageId=${pageId}`;
 
   return useSWRImmutable(key, endpoint => apiGet(endpoint).then((response: IPageTagsInfo) => {