132486 use swrhooks in parent

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

@@ -19,10 +19,10 @@ import {
 } from '~/stores/context';
 import {
   usePageAccessoriesModal, PageAccessoriesModalContents, type IPageForPageDuplicateModal,
-  usePageDuplicateModal, usePageRenameModal, usePageDeleteModal, usePagePresentationModal,
+  usePageDuplicateModal, usePageRenameModal, usePageDeleteModal, usePagePresentationModal, useTagEditModal,
 } from '~/stores/modal';
 import {
-  useSWRMUTxCurrentPage, useCurrentPageId, useSWRxPageInfo,
+  useSWRMUTxCurrentPage, useCurrentPageId, useSWRxPageInfo, useSWRxTagsInfo,
 } from '~/stores/page';
 import { mutatePageTree } from '~/stores/page-listing';
 import {
@@ -201,9 +201,11 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
   const { data: isAbleToShowPageManagement } = useIsAbleToShowPageManagement();
   const { data: isAbleToChangeEditorMode } = useIsAbleToChangeEditorMode();
 
+  const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
+  const { open: openTagEditModal } = useTagEditModal();
   const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId);
 
   const path = currentPage?.path ?? currentPathname;
@@ -310,6 +312,9 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
               expandContentWidth={currentPage?.expandContentWidth ?? isContainerFluid}
               disableSeenUserInfoPopover={isSharedUser}
               showPageControlDropdown={isAbleToShowPageManagement}
+              isReadOnlyUser={isReadOnlyUser}
+              isGuestUser={isGuestUser}
+              openTagEditModal={() => openTagEditModal(tagsInfoData?.tags, pageId, revisionId)}
               additionalMenuItemRenderer={additionalMenuItemsRenderer}
               onClickDuplicateMenuItem={duplicateItemClickedHandler}
               onClickRenameMenuItem={renameItemClickedHandler}

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

@@ -14,11 +14,10 @@ import {
   toggleLike, toggleSubscribe,
 } from '~/client/services/page-operation';
 import { toastError } from '~/client/util/toastr';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
-import { useTagEditModal, type IPageForPageDuplicateModal } from '~/stores/modal';
+import { type IPageForPageDuplicateModal } from '~/stores/modal';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 
-import { useSWRxPageInfo, useSWRxTagsInfo } from '../../stores/page';
+import { useSWRxPageInfo } from '../../stores/page';
 import { useSWRxUsersList } from '../../stores/user';
 import {
   AdditionalMenuItemsRendererProps, ForceHideMenuItems, MenuItemType,
@@ -34,18 +33,15 @@ import SubscribeButton from './SubscribeButton';
 import styles from './PageControls.module.scss';
 
 type TagsProps = {
-  pageId: string,
-  revisionId: string,
+  isGuestUser?: boolean,
+  isReadOnlyUser?: boolean,
+  openTagEditModal?: () => void,
 }
 
 const Tags = (props: TagsProps): JSX.Element => {
-  const { pageId, revisionId } = props;
-
-  const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
-
-  const { data: isGuestUser } = useIsGuestUser();
-  const { data: isReadOnlyUser } = useIsReadOnlyUser();
-  const { open: openTagEditModal } = useTagEditModal();
+  const {
+    isGuestUser, isReadOnlyUser, openTagEditModal,
+  } = props;
 
 
   const isTagLabelsDisabled = !!isGuestUser || !!isReadOnlyUser;
@@ -55,7 +51,7 @@ const Tags = (props: TagsProps): JSX.Element => {
     <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"
-        onClick={() => openTagEditModal(tagsInfoData?.tags, pageId, revisionId)}
+        onClick={openTagEditModal}
       >
         <i className="icon-tag me-2" />
         Tags
@@ -117,6 +113,9 @@ type PageControlsSubstanceProps = CommonProps & {
   path?: string | null,
   pageInfo: IPageInfoForOperation,
   expandContentWidth?: boolean,
+  isGuestUser?: boolean,
+  isReadOnlyUser?: boolean,
+  openTagEditModal?: () => void,
 }
 
 const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element => {
@@ -124,11 +123,10 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     pageInfo,
     pageId, revisionId, path, shareLinkId, expandContentWidth,
     disableSeenUserInfoPopover, showPageControlDropdown, forceHideMenuItems, additionalMenuItemRenderer,
+    isGuestUser, isReadOnlyUser, openTagEditModal,
     onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
   } = props;
 
-  const { data: isGuestUser } = useIsGuestUser();
-  const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: editorMode } = useEditorMode();
 
   const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId, shareLinkId);
@@ -254,8 +252,9 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     <div className={`grw-page-controls ${styles['grw-page-controls']} d-flex`} style={{ gap: '2px' }}>
       {revisionId != null && !isViewMode && (
         <Tags
-          pageId={pageId}
-          revisionId={getIdForRef(revisionId)}
+          isGuestUser={isGuestUser}
+          isReadOnlyUser={isReadOnlyUser}
+          openTagEditModal={openTagEditModal}
         />
       )}
       {revisionId != null && (
@@ -311,12 +310,15 @@ type PageControlsProps = CommonProps & {
   revisionId?: string | null,
   path?: string | null,
   expandContentWidth?: boolean,
+  isGuestUser?: boolean,
+  isReadOnlyUser?: boolean,
+  openTagEditModal?: () => void,
 };
 
 export const PageControls = memo((props: PageControlsProps): JSX.Element => {
   const {
-    pageId, revisionId, path, shareLinkId, expandContentWidth,
-    onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
+    pageId, revisionId, path, shareLinkId, expandContentWidth, isGuestUser, isReadOnlyUser,
+    openTagEditModal, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
   } = props;
 
   const { data: pageInfo, error } = useSWRxPageInfo(pageId ?? null, shareLinkId);
@@ -336,6 +338,9 @@ export const PageControls = memo((props: PageControlsProps): JSX.Element => {
       pageId={pageId}
       revisionId={revisionId ?? null}
       path={path}
+      isGuestUser={isGuestUser}
+      isReadOnlyUser={isReadOnlyUser}
+      openTagEditModal={openTagEditModal}
       onClickDuplicateMenuItem={onClickDuplicateMenuItem}
       onClickRenameMenuItem={onClickRenameMenuItem}
       onClickDeleteMenuItem={onClickDeleteMenuItem}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -14,19 +14,18 @@ import { TagsInput } from './TagsInput';
 
 export const TagEditModal: React.FC = () => {
 
-  const [tags, setTags] = useState<string[]>([]);
   const { t } = useTranslation();
+
   const { data: tagEditModalData, close: closeTagEditModal } = useTagEditModal();
+
   const isOpen = tagEditModalData?.isOpen;
+  const initTags = tagEditModalData?.tags;
   const pageId = tagEditModalData?.pageId;
   const revisionId = tagEditModalData?.revisionId;
   const updateStateAfterSave = useUpdateStateAfterSave(pageId);
 
-  useEffect(() => {
-    setTags(tags);
-  }, [tags]);
-
-  const handleSubmit = useCallback(async(newTags: string[]) => {
+  const [tags, setTags] = useState<string[] | undefined>(initTags);
+  const handleSubmit = useCallback(async(newTags?: string[]) => {
 
     try {
       await apiPost('/tags.update', { pageId, revisionId, tags: newTags });
@@ -46,7 +45,7 @@ export const TagEditModal: React.FC = () => {
         {t('tag_edit_modal.edit_tags')}
       </ModalHeader>
       <ModalBody>
-        <TagsInput tags={tags} onTagsUpdated={tags => setTags(tags)} autoFocus />
+        <TagsInput tags={initTags} onTagsUpdated={tags => setTags(tags)} autoFocus />
       </ModalBody>
       <ModalFooter>
         <button type="button" className="btn btn-primary" onClick={() => handleSubmit(tags)}>

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

@@ -15,9 +15,9 @@ type TypeaheadInstance = {
 }
 
 type Props = {
-  tags: string[],
+  tags?: string[],
   autoFocus: boolean,
-  onTagsUpdated: (tags: string[]) => void,
+  onTagsUpdated: (tags?: string[] | undefined) => void;
 }
 
 export const TagsInput: FC<Props> = (props: Props) => {

apps/app/src/stores/modal.tsx

@@ -778,7 +778,7 @@ export const usePageSelectModal = (
 
 
 type TagEditModalStatus = {
-  tags: [],
+  tags: string[],
   isOpen: boolean,
   pageId: string,
   revisionId: string,