re-imple SWRs

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -5,7 +5,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import EditorContainer from '~/client/services/EditorContainer';
 import {
   EditorMode, useDrawerMode, useEditorMode, useIsDeviceSmallerThanMd, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
-  useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors, useIsEditorMode,
+  useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
 } from '~/stores/ui';
 import {
   useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath, useIsDeletable,
@@ -38,24 +38,20 @@ const GrowiSubNavigation = (props) => {
   const { data: isAbleToDeleteCompletely } = useIsAbleToDeleteCompletely();
   const { data: creator } = useCreator();
   const { data: revisionAuthor } = useRevisionAuthor();
-  const { data: isPageExist } = useIsPageExist();
   const { data: isGuestUser } = useIsGuestUser();
 
+  const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
+  const { data: isAbleToShowTagLabel } = useIsAbleToShowTagLabel();
+  const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
+  const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
+
   const { mutate: mutateSWRTagsInfo, data: TagsInfoData } = useSWRTagsInfo(pageId);
 
   const {
     editorContainer, isCompactMode,
   } = props;
 
-  const { data: isEditorMode } = useIsEditorMode();
-
-  // Tags cannot be edited while the new page and editorMode is view
-  const isTagLabelHidden = (editorMode !== EditorMode.Editor && !isPageExist);
-
-  const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
-  const { data: isAbleToShowTagLabel } = useIsAbleToShowTagLabel();
-  const { data: isAbleToShowPageEditorModeManager } = useIsAbleToShowPageEditorModeManager();
-  const { data: isAbleToShowPageAuthors } = useIsAbleToShowPageAuthors();
+  const isEditorMode = editorMode !== EditorMode.View;
 
   function onPageEditorModeButtonClicked(viewType) {
     mutateEditorMode(viewType);
@@ -95,7 +91,7 @@ const GrowiSubNavigation = (props) => {
         ) }
 
         <div className="grw-path-nav-container">
-          { isAbleToShowTagLabel && !isCompactMode && !isTagLabelHidden && (
+          { isAbleToShowTagLabel && !isCompactMode && (
             <div className="grw-taglabels-container">
               <TagLabels tags={TagsInfoData?.tags || []} tagsUpdateInvoked={tagsUpdatedHandler} />
             </div>

packages/app/src/stores/ui.tsx

@@ -12,9 +12,10 @@ import loggerFactory from '~/utils/logger';
 import { useStaticSWR } from './use-static-swr';
 import {
   useCurrentPagePath, useIsEditable, useIsPageExist, useIsTrashPage, useIsUserPage,
-  useIsNotCreatable, useIsSharedUser,
+  useIsNotCreatable, useIsSharedUser, useNotFoundTargetPathOrId, useIsForbidden,
 } from './context';
 import { IFocusable } from '~/client/interfaces/focusable';
+import { isSharedPage } from '^/../core/src/utils/page-path-utils';
 
 const logger = loggerFactory('growi:stores:ui');
 
@@ -40,7 +41,7 @@ export type EditorMode = typeof EditorMode[keyof typeof EditorMode];
  *                      for switching UI
  *********************************************************** */
 
-export const useIsMobile = (): SWRResponse<boolean|null, Error> => {
+export const useIsMobile = (): SWRResponse<boolean, Error> => {
   const key = isServer ? null : 'isMobile';
 
   let configuration;
@@ -51,7 +52,7 @@ export const useIsMobile = (): SWRResponse<boolean|null, Error> => {
     };
   }
 
-  return useStaticSWR(key, null, configuration);
+  return useStaticSWR<boolean, Error>(key, undefined, configuration);
 };
 
 const updateBodyClassesByEditorMode = (newEditorMode: EditorMode) => {
@@ -311,54 +312,60 @@ export const useGlobalSearchFormRef = (initialData?: RefObject<IFocusable>): SWR
   return useStaticSWR('globalSearchTypeahead', initialData);
 };
 
-export const useIsEditorMode = (): SWRResponse<Nullable<boolean>, Error> => {
-  const { data: editorMode } = useEditorMode();
-  const key = 'isEditorMode';
-
-  mutate(key, editorMode !== EditorMode.View);
-
-  return useStaticSWR(key);
-};
-
-export const useIsAbleToShowPageManagement = (): SWRResponse<Nullable<boolean>, Error> => {
+export const useIsAbleToShowPageManagement = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowPageManagement';
   const { data: isPageExist } = useIsPageExist();
   const { data: isTrashPage } = useIsTrashPage();
   const { data: isSharedUser } = useIsSharedUser();
-  const { data: isEditorMode } = useIsEditorMode();
 
-  mutate(key, isPageExist && !isTrashPage && !isSharedUser && !isEditorMode);
+  const includesUndefined = [isPageExist, isTrashPage, isSharedUser].some(v => v === undefined);
 
-  return useStaticSWR(key);
+  return useSWRImmutable(
+    includesUndefined ? null : key,
+    () => isPageExist! && !isTrashPage && !isSharedUser);
 };
 
-export const useIsAbleToShowTagLabel = (): SWRResponse<Nullable<boolean>, Error> => {
+export const useIsAbleToShowTagLabel = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowTagLabel';
   const { data: isUserPage } = useIsUserPage();
-  const { data: isSharedUser } = useIsSharedUser();
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: notFoundTargetPathOrId } = useNotFoundTargetPathOrId();
+  const { data: editorMode } = useEditorMode();
+
+  const includesUndefined = [isUserPage, currentPagePath, notFoundTargetPathOrId, editorMode].some(v => v === undefined);
 
-  mutate(key, !isUserPage && !isSharedUser);
+  const isViewMode = editorMode === EditorMode.View;
+  const isNotFoundPage = notFoundTargetPathOrId != null;
 
-  return useStaticSWR(key, !isUserPage && !isSharedUser);
+  return useSWRImmutable(
+    includesUndefined ? null : key,
+    () => !isUserPage && !isSharedPage(currentPagePath!) && !(isViewMode && isNotFoundPage));
 };
 
-export const useIsAbleToShowPageEditorModeManager = (): SWRResponse<Nullable<boolean>, Error> => {
+export const useIsAbleToShowPageEditorModeManager = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowPageEditorModeManager';
   const { data: isNotCreatable } = useIsNotCreatable();
+  const { data: isForbidden } = useIsForbidden();
   const { data: isTrashPage } = useIsTrashPage();
   const { data: isSharedUser } = useIsSharedUser();
 
-  mutate(key, (!isNotCreatable && !isTrashPage && !isSharedUser));
+  const includesUndefined = [isNotCreatable, isForbidden, isTrashPage, isSharedUser].some(v => v === undefined);
 
-  return useStaticSWR(key);
+  return useSWRImmutable(
+    includesUndefined ? null : key,
+    () => !isNotCreatable && !isForbidden && !isTrashPage && !isSharedUser);
 };
 
-export const useIsAbleToShowPageAuthors = (): SWRResponse<Nullable<boolean>, Error> => {
+export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
   const key = 'isAbleToShowPageAuthors';
-  const { data: isPageExist } = useIsPageExist();
+  const { data: notFoundTargetPathOrId } = useNotFoundTargetPathOrId();
   const { data: isUserPage } = useIsUserPage();
 
-  mutate(key, (isPageExist && !isUserPage));
+  const includesUndefined = [notFoundTargetPathOrId, isUserPage].some(v => v === undefined);
 
-  return useStaticSWR(key);
+  const isNotFoundPage = notFoundTargetPathOrId != null;
+
+  return useSWRImmutable(
+    includesUndefined ? null : key,
+    () => !isNotFoundPage && !isUserPage);
 };