132486 use swrhools in PageSideContents

apps/app/src/components/PageControls/PageControls.tsx

@@ -4,7 +4,6 @@ import type {
   IPageInfoForOperation, IPageToDeleteWithMeta, IPageToRenameWithMeta,
 } from '@growi/core';
 import {
-  getIdForRef,
   isIPageInfoForEntity, isIPageInfoForOperation,
 } from '@growi/core';
 import { useTranslation } from 'next-i18next';
@@ -50,7 +49,7 @@ const Tags = (props: TagsProps): JSX.Element => {
   return (
     <div className="grw-taglabels-container d-flex align-items-center">
       <a
-        className="btn btn-link btn-edit-tags text-muted border border-secondary p-1 d-flex align-items-center"
+        className={`btn btn-link btn-edit-tags text-muted border border-secondary p-1 d-flex align-items-center ${isTagLabelsDisabled && 'disabled'}`}
         onClick={openTagEditModal}
       >
         <i className="icon-tag me-2" />

apps/app/src/components/PageSideContents/PageSideContents.tsx

@@ -7,7 +7,7 @@ import dynamic from 'next/dynamic';
 import { Link } from 'react-scroll';
 
 import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
-import { useDescendantsPageListModal } from '~/stores/modal';
+import { useDescendantsPageListModal, useTagEditModal } from '~/stores/modal';
 import { useSWRxPageInfo, useSWRxTagsInfo } from '~/stores/page';
 import { useIsAbleToShowTagLabel } from '~/stores/ui';
 
@@ -42,6 +42,7 @@ const Tags = (props: TagsProps): JSX.Element => {
   const { data: showTagLabel } = useIsAbleToShowTagLabel();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
+  const { open: openTagEditModal } = useTagEditModal();
 
   if (!showTagLabel) {
     return <></>;
@@ -56,8 +57,7 @@ const Tags = (props: TagsProps): JSX.Element => {
           <PageTags
             tags={tagsInfoData.tags}
             isTagLabelsDisabled={isTagLabelsDisabled ?? false}
-            pageId={pageId}
-            revisionId={revisionId}
+            openTagEditModal={() => openTagEditModal(tagsInfoData?.tags, pageId, revisionId)}
           />
         )
         : <PageTagsSkeleton />

apps/app/src/components/PageTags/PageTags.tsx

@@ -10,8 +10,7 @@ type Props = {
   tags?: string[],
   isTagLabelsDisabled: boolean,
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
-  pageId: string,
-  revisionId,
+  openTagEditModal?: () => void;
 }
 
 export const PageTagsSkeleton = (): JSX.Element => {
@@ -20,7 +19,7 @@ export const PageTagsSkeleton = (): JSX.Element => {
 
 export const PageTags:FC<Props> = (props: Props) => {
   const {
-    tags, isTagLabelsDisabled, pageId, revisionId,
+    tags, isTagLabelsDisabled, openTagEditModal,
   } = props;
 
   if (tags == null) {
@@ -33,8 +32,7 @@ export const PageTags:FC<Props> = (props: Props) => {
         <RenderTagLabels
           tags={tags}
           isTagLabelsDisabled={isTagLabelsDisabled}
-          pageId={pageId}
-          revisionId={revisionId}
+          openTagEditModal={openTagEditModal}
         />
       </div>
     </>

apps/app/src/components/PageTags/RenderTagLabels.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { useKeywordManager } from '~/client/services/search-operation';
-import { useTagEditModal } from '~/stores/modal';
-import { useSWRxTagsInfo } from '~/stores/page';
 
 import { NotAvailableForGuest } from '../NotAvailableForGuest';
 import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
@@ -12,19 +10,16 @@ import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
 type RenderTagLabelsProps = {
   tags: string[],
   isTagLabelsDisabled: boolean,
-  pageId: string,
-  revisionId: string,
+  openTagEditModal?: () => void;
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   const {
-    tags, isTagLabelsDisabled, pageId, revisionId,
+    tags, isTagLabelsDisabled, openTagEditModal,
   } = props;
   const { t } = useTranslation();
 
   const { pushState } = useKeywordManager();
-  const { open: openTagEditModal } = useTagEditModal();
-  const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
 
   const isTagsEmpty = tags.length === 0;
 
@@ -51,7 +46,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
                 ${isTagsEmpty && 'no-tags'}
                 ${isTagLabelsDisabled && 'disabled'}`
               }
-              onClick={() => openTagEditModal(tagsInfoData?.tags, pageId, revisionId)}
+              onClick={openTagEditModal}
             >
               {isTagsEmpty && <>{ t('Add tags for this page') }</>}
               <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />