Show bookmark folder and adjust bookmark list

https://youtrack.weseek.co.jp/issue/GW-7849
- Show bookmark folder item in user page
- Implement useSWRxCurrentUserBookmarks to BookmarkList
- Adjust bookmark item listing
- Remove Pagination Wrapper component
- Remove unused props
- Adjust implementation of BookmarList component

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

@@ -1,77 +1,33 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { toastError } from '~/client/util/apiNotification';
-import { apiv3Get } from '~/client/util/apiv3-client';
-import { MyBookmarkList } from '~/interfaces/bookmark-info';
+import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import loggerFactory from '~/utils/logger';
 
-import PaginationWrapper from '../PaginationWrapper';
-
 import { PageListItemS } from './PageListItemS';
 
 const logger = loggerFactory('growi:BookmarkList');
 
-type BookmarkListProps = {
-  userId: string
-}
-
-export const BookmarkList = (props: BookmarkListProps): JSX.Element => {
-  const { userId } = props;
+export const BookmarkList = (): JSX.Element => {
 
   const { t } = useTranslation();
-  const [pages, setPages] = useState<MyBookmarkList>([]);
-  const [activePage, setActivePage] = useState(1);
-  const [totalItemsCount, setTotalItemsCount] = useState(0);
-  const [pagingLimit, setPagingLimit] = useState(10);
-
-  const setPageNumber = (selectedPageNumber) => {
-    setActivePage(selectedPageNumber);
-  };
-
-  const getMyBookmarkList = useCallback(async() => {
-    const page = activePage;
-
-    try {
-      const res = await apiv3Get(`/bookmarks/${userId}`, { page });
-      const { paginationResult } = res.data;
-
-      setPages(paginationResult.docs);
-      setTotalItemsCount(paginationResult.totalDocs);
-      setPagingLimit(paginationResult.limit);
-    }
-    catch (error) {
-      logger.error('failed to fetch data', error);
-      toastError(error, 'Error occurred in bookmark page list');
-    }
-  }, [activePage, userId]);
+  const { data: currentUserBookmarksData } = useSWRxCurrentUserBookmarks();
 
-  useEffect(() => {
-    getMyBookmarkList();
-  }, [getMyBookmarkList]);
 
   return (
     <div className="bookmarks-list-container">
-      {pages.length === 0 ? t('No bookmarks yet') : (
+      {currentUserBookmarksData?.length === 0 ? t('No bookmarks yet') : (
         <>
           <ul className="page-list-ul page-list-ul-flat mb-3">
 
-            {pages.map(page => (
-              <li key={`my-bookmarks:${page._id}`} className="mt-4">
-                <PageListItemS page={page.page} />
+            {currentUserBookmarksData?.map(page => (
+              <li key={`my-bookmarks:${page?._id}`} className="mt-4">
+                <PageListItemS page={page} />
               </li>
             ))}
 
           </ul>
-          <PaginationWrapper
-            activePage={activePage}
-            changePage={setPageNumber}
-            totalItemsCount={totalItemsCount}
-            pagingLimit={pagingLimit}
-            align="center"
-            size="sm"
-          />
         </>
       )}
     </div>

packages/app/src/components/UsersHomePageFooter.tsx

@@ -11,6 +11,7 @@ import styles from '~/components/UsersHomePageFooter.module.scss';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import FolderPlusIcon from './Icons/FolderPlusIcon';
+import BookmarkFolderItem from './Sidebar/Bookmarks/BookmarkFolderItem';
 import BookmarkFolderNameInput from './Sidebar/Bookmarks/BookmarkFolderNameInput';
 
 export type UsersHomePageFooterProps = {
@@ -21,7 +22,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   const { t } = useTranslation();
   const { creatorId } = props;
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
-  const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
+  const { data: bookmarkFolderData, mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
 
 
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
@@ -63,8 +64,21 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
 
           </div>
         )}
+        {
+          <ul className={'grw-foldertree list-group p-3'}>
+            {bookmarkFolderData?.map((item) => {
+              return (
+                <BookmarkFolderItem
+                  key={item._id}
+                  bookmarkFolder={item}
+                  isOpen={false}
+                />
+              );
+            })}
+          </ul>
+        }
         <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
-          <BookmarkList userId={creatorId} />
+          <BookmarkList />
         </div>
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">