Rename variable

https://youtrack.weseek.co.jp/issue/GW-7839
- Rename function useSWRCurrentUserBookmarks to useSWRxCurrentUserBookmarks
- Rename parameter page to pageNum
- Implement Nullable argument type for pageNum
- Update implementation of useSWRxCurrentUserBookmarks
- Add trailing slash to tooltip content
Reference: https://github.com/weseek/growi/pull/6292#discussion_r927273549
- Fix bookmarklist not updated updating after accessing other sidebar content

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

@@ -7,7 +7,7 @@ import {
 import { useIsGuestUser } from '~/stores/context';
 import { IPageForPageDuplicateModal } from '~/stores/modal';
 
-import { useSWRBookmarkInfo, useSWRCurrentUserBookmarks } from '../../stores/bookmark';
+import { useSWRBookmarkInfo, useSWRxCurrentUserBookmarks } from '../../stores/bookmark';
 import { useSWRxPageInfo } from '../../stores/page';
 import { useSWRxUsersList } from '../../stores/user';
 import BookmarkButtons from '../BookmarkButtons';
@@ -51,7 +51,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId, shareLinkId);
 
   const { data: bookmarkInfo, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(pageId);
-  const { mutate: mutateCurrentUserBookmark } = useSWRCurrentUserBookmarks();
+  const { mutate: mutateCurrentUserBookmark } = useSWRxCurrentUserBookmarks();
 
   const likerIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.likerIds ?? []).slice(0, 15) : [];
   const seenUserIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.seenUserIds ?? []).slice(0, 15) : [];

packages/app/src/components/PageList/PageListItemL.tsx

@@ -23,7 +23,7 @@ import {
   OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
 } from '~/interfaces/ui';
 import LinkedPagePath from '~/models/linked-page-path';
-import { useSWRCurrentUserBookmarks } from '~/stores/bookmark';
+import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import {
   usePageRenameModal, usePageDuplicateModal, usePageDeleteModal, usePutBackPageModal,
 } from '~/stores/modal';
@@ -86,7 +86,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
 
   const shouldFetch = isSelected && (pageData != null || pageMeta != null);
   const { data: pageInfo } = useSWRxPageInfo(shouldFetch ? pageData?._id : null);
-  const { mutate: mutateCurrentUserBookmark } = useSWRCurrentUserBookmarks();
+  const { mutate: mutateCurrentUserBookmark } = useSWRxCurrentUserBookmarks();
   const elasticSearchResult = isIPageSearchMeta(pageMeta) ? pageMeta.elasticSearchResult : null;
   const revisionShortBody = isIPageInfoForListing(pageMeta) ? pageMeta.revisionShortBody : null;
 

packages/app/src/components/Sidebar/Bookmarks.tsx

@@ -1,13 +1,13 @@
 
 import React, { useEffect } from 'react';
 
-import { DevidedPagePath } from '@growi/core';
+import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
 import { unbookmark } from '~/client/services/page-operation';
 import { IPageHasId } from '~/interfaces/page';
-import { useSWRCurrentUserBookmarks } from '~/stores/bookmark';
+import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { useIsGuestUser } from '~/stores/context';
 
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
@@ -19,11 +19,12 @@ type Props = {
 
 const BookmarksItem = (props: Props) => {
   const { pages } = props;
-  const { mutate: mutateCurrentUserBookmark } = useSWRCurrentUserBookmarks();
+  const { mutate: mutateCurrentUserBookmark } = useSWRxCurrentUserBookmarks();
 
   const generateBookmarkedPageList = pages?.map((page) => {
     const dPagePath = new DevidedPagePath(page.path, false, true);
-    const { latter: pageTitle, former: formerPagePath } = dPagePath;
+    const { latter: pageTitle, former, isRoot } = dPagePath;
+    const formerPagePath = isRoot ? pageTitle : pathUtils.addTrailingSlash(former);
     const bookmarkItemId = `bookmark-item-${page._id}`;
 
     const bookmarkMenuItemClickHandler = (async() => {
@@ -54,7 +55,7 @@ const BookmarksItem = (props: Props) => {
             placement="right"
             target={bookmarkItemId}
           >
-            { formerPagePath || '/' }
+            { formerPagePath }
           </UncontrolledTooltip>
         </li>
       </div>
@@ -77,7 +78,11 @@ const BookmarksItem = (props: Props) => {
 const Bookmarks = () : JSX.Element => {
   const { t } = useTranslation();
   const { data: isGuestUser } = useIsGuestUser();
-  const { data: pages } = useSWRCurrentUserBookmarks();
+  const { data: pages, mutate: mutateCurrentUserBookmark } = useSWRxCurrentUserBookmarks();
+
+  useEffect(() => {
+    mutateCurrentUserBookmark();
+  }, [mutateCurrentUserBookmark]);
 
   const renderBookmarksItem = () => {
     if (pages?.length === 0) {

packages/app/src/stores/bookmark.ts

@@ -1,6 +1,7 @@
 import { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
+import { Nullable } from '~/interfaces/common';
 import { IPageHasId } from '~/interfaces/page';
 
 import { apiv3Get } from '../client/util/apiv3-client';
@@ -21,9 +22,9 @@ export const useSWRBookmarkInfo = (pageId: string | null | undefined): SWRRespon
   );
 };
 
-export const useSWRCurrentUserBookmarks = (page?: number| null| undefined): SWRResponse<IPageHasId[], Error> => {
+export const useSWRxCurrentUserBookmarks = (pageNum?: Nullable<number>): SWRResponse<IPageHasId[], Error> => {
   const { data: currentUser } = useCurrentUser();
-  const currentPage = page ?? 1;
+  const currentPage = pageNum ?? 1;
   return useSWRImmutable(
     currentUser != null ? `/bookmarks/${currentUser._id}` : null,
     endpoint => apiv3Get(endpoint, { page: currentPage }).then((response) => {