apply templateTagData

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

@@ -15,7 +15,7 @@ import {
   useCurrentCreatedAt, useDeleteUsername, useDeletedAt, useHasChildren, useHasDraftOnHackmd,
   useIsNotCreatable, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
   useCurrentPageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
-  useShareLinkId, useShareLinksNumber, useTemplateTagData, useCurrentUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
+  useShareLinkId, useShareLinksNumber, useCurrentUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
   useNotFoundTargetPathOrId, useIsSearchPage, useIsForbidden, useIsIdenticalPath, useHasParent,
   useIsAclEnabled, useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsEnabledAttachTitleHeader, useIsNotFoundPermalink,
   useDefaultIndentSize, useIsIndentSizeForced, useCsrfToken, useIsEmptyPage, useEmptyPageId, useGrowiVersion,
@@ -79,7 +79,7 @@ const ContextExtractorOnce: FC = () => {
   const pageUser = JSON.parse(mainContent?.getAttribute('data-page-user') || jsonNull);
   const hasChildren = JSON.parse(mainContent?.getAttribute('data-page-has-children') || jsonNull);
   const hasParent = JSON.parse(mainContent?.getAttribute('data-has-parent') || jsonNull);
-  const templateTagData = mainContent?.getAttribute('data-template-tags') || null;
+  // const templateTagData = mainContent?.getAttribute('data-template-tags') || null;
   const shareLinksNumber = mainContent?.getAttribute('data-share-links-number');
   const shareLinkId = JSON.parse(mainContent?.getAttribute('data-share-link-id') || jsonNull);
   const revisionIdHackmdSynced = mainContent?.getAttribute('data-page-revision-id-hackmd-synced') || null;
@@ -146,7 +146,7 @@ const ContextExtractorOnce: FC = () => {
   useRevisionIdHackmdSynced(revisionIdHackmdSynced);
   useShareLinkId(shareLinkId);
   useShareLinksNumber(shareLinksNumber);
-  useTemplateTagData(templateTagData);
+  // useTemplateTagData(templateTagData);
   useCurrentUpdatedAt(updatedAt);
   useCreator(creator);
   useRevisionAuthor(revisionAuthor);

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

@@ -172,19 +172,34 @@ const GrowiContextualSubNavigation = (props) => {
   const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
   const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
 
-  const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRxTagsInfo(pageId, path);
-  const { data: tagsForEditors, mutate: mutatePageTagsForEditors, sync: syncPageTagsForEditors } = usePageTagsForEditors(pageId, path);
+  const { mutate: mutateSWRTagsInfo, data: tagsInfoData } = useSWRxTagsInfo(pageId);
+  const { data: tagsForEditors, mutate: mutatePageTagsForEditors, sync: syncPageTagsForEditors } = usePageTagsForEditors(pageId);
 
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
 
+  // const mainContent = document.querySelector('#content-main');
+  const templateTagData = document.querySelector('#content-main')?.getAttribute('data-template-tags') || null;
+
+
   useEffect(() => {
     // Run only when tagsInfoData has been updated
-    syncPageTagsForEditors();
+    if (templateTagData == null) {
+      syncPageTagsForEditors();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tagsInfoData?.tags]);
 
+  useEffect(() => {
+    if (pageId === null && templateTagData != null) {
+      const tags = templateTagData.split(',').filter((str: string) => {
+        return str !== ''; // filter empty values
+      });
+      mutatePageTagsForEditors(tags);
+    }
+  }, [pageId, mutatePageTagsForEditors, templateTagData, mutateSWRTagsInfo]);
+
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
 
   const {
@@ -349,7 +364,7 @@ const GrowiContextualSubNavigation = (props) => {
       isGuestUser={isGuestUser}
       isDrawerMode={isDrawerMode}
       isCompactMode={isCompactMode}
-      tags={isViewMode ? tagsInfoData?.tags : tagsForEditors}
+      tags={tagsForEditors || []}
       tagsUpdatedHandler={isViewMode ? tagsUpdatedHandlerForViewMode : tagsUpdatedHandlerForEditMode}
       controls={ControlComponents}
       additionalClasses={['container-fluid']}

packages/app/src/components/Page/TagLabels.tsx

@@ -12,6 +12,7 @@ type Props = {
 
 const TagLabels:FC<Props> = (props: Props) => {
   const { tags, isGuestUser, tagsUpdateInvoked } = props;
+  console.log('TagLabels', tags);
 
   const [isTagEditModalShown, setIsTagEditModalShown] = useState(false);
 

packages/app/src/stores/context.tsx

@@ -84,10 +84,6 @@ export const useHasChildren = (initialData?: Nullable<any>): SWRResponse<Nullabl
   return useStaticSWR<Nullable<any>, Error>('hasChildren', initialData);
 };
 
-export const useTemplateTagData = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
-  return useStaticSWR<Nullable<any>, Error>('templateTagData', initialData);
-};
-
 export const useShareLinksNumber = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('shareLinksNumber', initialData);
 };

packages/app/src/stores/editor.tsx

@@ -96,8 +96,8 @@ export type IPageTagsForEditorsOption = {
   sync: (tags?: string[]) => void;
 }
 
-export const usePageTagsForEditors = (pageId: Nullable<string>, pagePath: Nullable<string>): SWRResponse<string[], Error> & IPageTagsForEditorsOption => {
-  const { data: tagsInfoData } = useSWRxTagsInfo(pageId, pagePath);
+export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<string[], Error> & IPageTagsForEditorsOption => {
+  const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
   const swrResult = useStaticSWR<string[], Error>('pageTags', undefined);
 
   return {

packages/app/src/stores/page.tsx

@@ -16,7 +16,7 @@ import { Nullable } from '../interfaces/common';
 import { IPageTagsInfo } from '../interfaces/tag';
 
 import {
-  useCurrentPageId, useCurrentPagePath, useTemplateTagData, useShareLinkId,
+  useCurrentPageId, useCurrentPagePath, useShareLinkId,
 } from './context';
 import { ITermNumberManagerUtil, useTermNumberManager } from './use-static-swr';
 
@@ -96,12 +96,11 @@ export const useSWRxDescendantsPageListForCurrrentPath = (pageNumber?: number):
 };
 
 
-export const useSWRxTagsInfo = (pageId: Nullable<string>, pagePath: Nullable<string>): SWRResponse<IPageTagsInfo | undefined, Error> => {
-  const { data: templateTagData } = useTemplateTagData();
+export const useSWRxTagsInfo = (pageId: Nullable<string>): SWRResponse<IPageTagsInfo | undefined, Error> => {
   const { data: shareLinkId } = useShareLinkId();
 
   const endpoint = `/pages.getPageTag?pageId=${pageId}`;
-  const key = [endpoint, pageId, shareLinkId, pagePath];
+  const key = [endpoint, pageId, shareLinkId];
 
 
   const fetcher = async(endpoint: string, pageId: Nullable<string>, shareLinkId: Nullable<string>) => {
@@ -115,12 +114,6 @@ export const useSWRxTagsInfo = (pageId: Nullable<string>, pagePath: Nullable<str
       const res = await apiGet<IPageTagsInfo>(endpoint, { pageId });
       tags = res?.tags;
     }
-    // when templates applicable to the new page
-    else if (templateTagData != null) {
-      tags = templateTagData.split(',').filter((str: string) => {
-        return str !== ''; // filter empty values
-      });
-    }
 
     return { tags };
   };