syncPageTagsForEditors on GrowiContextualSubNavigation

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -167,12 +167,18 @@ const GrowiContextualSubNavigation = (props) => {
   const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
 
   const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRxTagsInfo(pageId);
-  const { data: tagsOnEditMode, mutate: mutateTagsOnEditMode } = usePageTagsForEditors(tagsInfoData?.tags);
+  const { data: tagsOnEditMode, mutate: mutateTagsOnEditMode, sync: syncPageTagsForEditors } = usePageTagsForEditors(/* tagsInfoData?.tags */);
 
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
 
+  useEffect(() => {
+    syncPageTagsForEditors(tagsInfoData?.tags);
+    // Run only when tagsInfoData has been updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tagsInfoData?.tags]);
+
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
 
   const {

packages/app/src/stores/editor.tsx

@@ -8,9 +8,10 @@ import { IEditorSettings } from '~/interfaces/editor-settings';
 import { SlackChannels } from '~/interfaces/user-trigger-notification';
 
 import {
-  useCurrentUser, useDefaultIndentSize, useIsGuestUser,
+  useCurrentUser, useDefaultIndentSize, useIsGuestUser, useCurrentPageId,
 } from './context';
 import { localStorageMiddleware } from './middlewares/sync-to-storage';
+import { useSWRxTagsInfo } from './page';
 import { useStaticSWR } from './use-static-swr';
 
 
@@ -91,6 +92,24 @@ export const useIsSlackEnabled = (): SWRResponse<boolean, Error> => {
   );
 };
 
-export const usePageTagsForEditors = (initialTags?: string[]): SWRResponse<string[], Error> => {
-  return useStaticSWR<string[], Error>('pageTags', undefined, { fallbackData: initialTags || [] });
+export type IPageTagsForEditorsOption = {
+  sync: (tags?: string[]) => void;
+}
+
+export const usePageTagsForEditors = (): SWRResponse<string[], Error> & IPageTagsForEditorsOption => {
+  // const { data: pageId } = useCurrentPageId();
+  // const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
+
+  const swrResult = useStaticSWR<string[], Error>('pageTags', undefined);
+  return {
+    ...swrResult,
+    // sync: (): void => {
+    //   const { mutate } = swrResult;
+    //   mutate(tagsInfoData?.tags || []);
+    // },
+    sync: (tags): void => {
+      const { mutate } = swrResult;
+      mutate(tags || []);
+    },
+  };
 };