update RecentCreated

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,67 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { toastError } from '~/client/util/apiNotification';
+import { apiv3Get } from '~/client/util/apiv3-client';
+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<any>([]);
+  const [activePage, setActivePage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [pagingLimit, setPagingLimit] = useState(10);
+
+  const getMyRecentCreatedList = useCallback(async() => {
+    const page = activePage;
+
+    try {
+      const res = await apiv3Get(`/users/${userId}/recent`, { page });
+      const { totalCount, pages, limit } = res.data;
+
+      setPages(pages);
+      setTotalPages(totalCount);
+      setPagingLimit(limit);
+    }
+    catch (error) {
+      logger.error('failed to fetch data', error);
+      toastError(error, 'Error occurred in bookmark page list');
+    }
+  }, [activePage, userId]);
+
+  useEffect(() => {
+    getMyRecentCreatedList();
+  }, [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.page} />
+          </li>
+        ))}
+
+      </ul>
+      <PaginationWrapper
+        activePage={activePage}
+        changePage={setActivePage}
+        totalItemsCount={totalPages}
+        pagingLimit={pagingLimit}
+        align="center"
+        size="sm"
+      />
+    </div>
+  );
+
+};