Merge pull request #6491 from weseek/support/apply-nextjs-to-RecentCreated

imprv: Apply Nextjs to RecentCreated

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
-
 import { isPopulated } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
@@ -12,6 +11,7 @@ import { apiPost } from '~/client/util/apiv1-client';
 import {
   IPageToRenameWithMeta, IPageWithMeta, IPageInfoForEntity, IPageHasId,
 } from '~/interfaces/page';
+import { IResTagsUpdateApiv1 } from '~/interfaces/tag';
 import { OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction } from '~/interfaces/ui';
 import { IUser } from '~/interfaces/user';
 import {
@@ -40,6 +40,7 @@ import { Skelton } from '../Skelton';
 import { GrowiSubNavigation } from './GrowiSubNavigation';
 import { SubNavButtonsProps } from './SubNavButtons';
 
+
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
 
 

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.jsx

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import { apiv3Get } from '~/client/util/apiv3-client';
-
-import PageListItemS from '../PageList/PageListItemS';
-import PaginationWrapper from '../PaginationWrapper';
-
-class RecentCreated extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      pages: [],
-      activePage: 1,
-      totalPages: 0,
-      pagingLimit: 10,
-    };
-
-    this.handlePage = this.handlePage.bind(this);
-  }
-
-
-  UNSAFE_componentWillMount() {
-    this.getRecentCreatedList(1);
-  }
-
-  async handlePage(selectedPage) {
-    await this.getRecentCreatedList(selectedPage);
-  }
-
-  async getRecentCreatedList(selectedPage) {
-    const { userId } = this.props;
-    const page = selectedPage;
-
-    // pagesList get and pagination calculate
-    const res = await apiv3Get(`/users/${userId}/recent`, { page });
-    const { totalCount, pages, limit } = res.data;
-
-    this.setState({
-      pages,
-      activePage: selectedPage,
-      totalPages: totalCount,
-      pagingLimit: limit,
-    });
-
-  }
-
-  /**
-   * generate Elements of Page
-   *
-   * @param {any} pages Array of pages Model Obj
-   *
-   */
-  generatePageList(pages) {
-    return pages.map(page => (
-      <li key={`recent-created:list-view:${page._id}`} className="mt-4">
-        <PageListItemS page={page} />
-      </li>
-    ));
-  }
-
-  render() {
-    const pageList = this.generatePageList(this.state.pages);
-
-    return (
-      <div className="page-list-container-create">
-        <ul className="page-list-ul page-list-ul-flat mb-3">
-          {pageList}
-        </ul>
-        <PaginationWrapper
-          align="center"
-          activePage={this.state.activePage}
-          changePage={this.handlePage}
-          totalItemsCount={this.state.totalPages}
-          pagingLimit={this.state.pagingLimit}
-          size="sm"
-        />
-      </div>
-    );
-  }
-
-}
-
-RecentCreated.propTypes = {
-  userId: PropTypes.string.isRequired,
-};
-
-export default RecentCreated;

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

@@ -0,0 +1,74 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+import { toastError } from '~/client/util/apiNotification';
+import { apiv3Get } from '~/client/util/apiv3-client';
+import { IPageHasId } from '~/interfaces/page';
+import loggerFactory from '~/utils/logger';
+
+import PageListItemS from '../PageList/PageListItemS';
+import PaginationWrapper from '../PaginationWrapper';
+
+const logger = loggerFactory('growi:RecentCreated');
+
+type RecentCreatedProps = {
+  userId: string,
+}
+
+export const RecentCreated = (props: RecentCreatedProps): JSX.Element => {
+
+  const { userId } = props;
+
+  const [pages, setPages] = useState<IPageHasId[]>([]);
+  const [activePage, setActivePage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [pagingLimit, setPagingLimit] = useState(10);
+
+  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);
+    }
+    catch (error) {
+      logger.error('failed to fetch data', error);
+      toastError(error, 'Error occurred in recent created page list');
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    getMyRecentCreatedList(1);
+  }, [getMyRecentCreatedList]);
+
+  const handlePage = useCallback(async(selectedPage) => {
+    await getMyRecentCreatedList(selectedPage);
+  }, [getMyRecentCreatedList]);
+
+  return (
+    <div className="page-list-container-create">
+      <ul className="page-list-ul page-list-ul-flat mb-3">
+
+        {pages.map(page => (
+          <li key={`recent-created:list-view:${page._id}`} className="mt-4">
+            <PageListItemS page={page} />
+          </li>
+        ))}
+
+      </ul>
+      <PaginationWrapper
+        activePage={activePage}
+        changePage={handlePage}
+        totalItemsCount={totalPages}
+        pagingLimit={pagingLimit}
+        align="center"
+        size="sm"
+      />
+    </div>
+  );
+
+};

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -0,0 +1,9 @@
+.user-page-footer :global {
+  .grw-user-page-list-m {
+    svg {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 6px;
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 
-
 import EventEmitter from 'events';
 
 import {
@@ -18,9 +17,11 @@ import { useRouter } from 'next/router';
 import superjson from 'superjson';
 
 import { Comments } from '~/components/Comments';
+import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 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';
@@ -336,7 +336,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">
@@ -344,7 +344,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
                   Bookmarks
                 </h2>
                 <div id="user-bookmark-list" className="page-list">
-                  {/* TODO: No need page-list-container class ? */}
                   <div className="page-list-container">
                     {/* <BookmarkList userId={pageContainer.state.creator._id} /> */}
                   </div>
@@ -353,14 +352,13 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
               <div className="grw-user-page-list-m mt-5 d-edit-none">
                 <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
                   <i id="recent-created-icon" className="mr-1">
-                    {/* <RecentlyCreatedIcon /> */}
+                    <RecentlyCreatedIcon />
                   </i>
                   Recently Created
                 </h2>
                 <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} /> */}
+                    <RecentCreated userId={pageWithMeta.data.creator._id} />
                   </div>
                 </div>
               </div>

packages/app/src/styles/_user.scss

@@ -49,13 +49,3 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
     }
   }
 }
-
-.user-page-footer {
-  .grw-user-page-list-m {
-    svg {
-      width: 35px;
-      height: 35px;
-      margin-bottom: 6px;
-    }
-  }
-}