update RecentCreated

packages/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -11,7 +11,7 @@ import {
 } from '~/stores/ui';
 
 
-const SavePageControls = dynamic(() => import('~/components/SavePageControls').then(mod => mod.SavePageControls), { ssr: false });
+const SavePageControls = dynamic(() => import('../SavePageControls').then(mod => mod.SavePageControls), { ssr: false });
 const SlackLogo = dynamic(() => import('~/components/SlackLogo').then(mod => mod.SlackLogo), { ssr: false });
 const SlackNotification = dynamic(() => import('~/components/SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
 const OptionsSelector = dynamic(() => import('~/components/PageEditor/OptionsSelector').then(mod => mod.OptionsSelector), { ssr: false });

packages/app/src/components/RecentCreated/RecentCreated.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3Get } from '~/client/util/apiv3-client';
@@ -15,20 +15,21 @@ type RecentCreatedProps = {
 
 export const RecentCreated = (props: RecentCreatedProps): JSX.Element => {
   const { userId } = props;
-
   const [pages, setPages] = useState<any>([]);
   const [activePage, setActivePage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [pagingLimit, setPagingLimit] = useState(10);
 
-  const getMyRecentCreatedList = useCallback(async() => {
-    const page = activePage;
+
+  const getMyRecentCreatedList = useCallback(async(selectedPage) => {
+    const page = selectedPage;
 
     try {
       const res = await apiv3Get(`/users/${userId}/recent`, { page });
       const { totalCount, pages, limit } = res.data;
 
       setPages(pages);
+      setActivePage(selectedPage);
       setTotalPages(totalCount);
       setPagingLimit(limit);
     }
@@ -36,10 +37,10 @@ export const RecentCreated = (props: RecentCreatedProps): JSX.Element => {
       logger.error('failed to fetch data', error);
       toastError(error, 'Error occurred in bookmark page list');
     }
-  }, [activePage, userId]);
+  }, [userId]);
 
-  useEffect(() => {
-    getMyRecentCreatedList();
+  const handlePage = useCallback(async(selectedPage) => {
+    await getMyRecentCreatedList(selectedPage);
   }, [getMyRecentCreatedList]);
 
   return (
@@ -48,14 +49,14 @@ export const RecentCreated = (props: RecentCreatedProps): JSX.Element => {
 
         {pages.map(page => (
           <li key={`recent-created:list-view:${page._id}`} className="mt-4">
-            <PageListItemS page={page.page} />
+            <PageListItemS page={page} />
           </li>
         ))}
 
       </ul>
       <PaginationWrapper
         activePage={activePage}
-        changePage={setActivePage}
+        changePage={handlePage}
         totalItemsCount={totalPages}
         pagingLimit={pagingLimit}
         align="center"

packages/app/src/pages/[[...path]].page.tsx

@@ -21,6 +21,7 @@ import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { PageContentFooter } from '~/components/PageContentFooter';
+import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
 // import { useIndentSize } from '~/stores/editor';
@@ -41,7 +42,6 @@ import {
 } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
-
 // import { isUserPage, isTrashPage, isSharedPage } from '~/utils/path-utils';
 
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';
@@ -337,7 +337,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
           <Comments pageId={pageId} />
           {/* )} */}
           {/* TODO: Create UsersHomePageFooter conponent */}
-          { isUsersHomePage(props.currentPathname) && (
+          { !isUsersHomePage(props.currentPathname) && (
             <div className="container-lg user-page-footer py-5">
               <div className="grw-user-page-list-m d-edit-none">
                 <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
@@ -361,7 +361,8 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
                 <div id="user-created-list" className="page-list">
                   {/* TODO: No need page-list-container class ? */}
                   <div className="page-list-container">
-                    {/* <RecentCreated userId={pageContainer.state.creator._id} /> */}
+                    {/* TODO: <RecentCreated userId={pageContainer.state.creator._id} /> */}
+                    <RecentCreated userId={pageWithMeta?.data.creator._id} />
                   </div>
                 </div>
               </div>