refactor

src/client/js/components/PageList.jsx

@@ -14,7 +14,7 @@ const PageList = (props) => {
   const { appContainer, pageContainer } = props;
   const { path } = pageContainer.state;
   const [pages, setPages] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const [activePage, setActivePage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -29,7 +29,7 @@ const PageList = (props) => {
     const res = await appContainer.apiv3Get('/pages/list', { path, page });
 
     setPages(res.data.pages);
-    setIsLoading(true);
+    setIsLoading(false);
     setTotalPages(res.data.totalCount);
     setLimit(res.data.limit);
   }, [appContainer, path, activePage]);
@@ -39,7 +39,7 @@ const PageList = (props) => {
   }, [updatePageList]);
 
 
-  if (isLoading === false) {
+  if (isLoading) {
     return (
       <div className="wiki">
         <div className="text-muted test-center">

src/client/js/components/PageList/BookmarkList.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
@@ -14,52 +14,52 @@ import Page from './Page';
 
 const logger = loggerFactory('growi:MyBookmarkList');
 
-class BookmarkList extends React.Component {
+const BookmarkList = (props) => {
+  const { t, appContainer, userId } = props;
 
-  constructor(props) {
-    super(props);
+  const [pages, setPages] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
 
-    this.state = {
-      pages: [],
-      activePage: 1,
-      totalPages: 0,
-      pagingLimit: null,
-    };
+  const [activePage, setActivePage] = useState(1);
+  const [totalItemsCount, setTotalItemsCount] = useState(0);
+  const [pagingLimit, setPagingLimit] = useState(null);
 
-    this.handlePage = this.handlePage.bind(this);
-  }
+  const setPageNumber = (selectedPageNumber) => {
+    setActivePage(selectedPageNumber);
+  };
 
-  componentWillMount() {
-    this.getMyBookmarkList(1);
-  }
+  const getMyBookmarkList = useCallback(async() => {
+    const page = activePage;
 
-  async handlePage(selectPageNumber) {
-    await this.getMyBookmarkList(selectPageNumber);
-  }
+    try {
+      const res = await appContainer.apiv3Get(`/bookmarks/${userId}`, { page });
+      const { paginationResult } = res.data;
+      console.log(paginationResult);
 
-  async getMyBookmarkList(selectPageNumber) {
-    const { appContainer, userId } = this.props;
-    const page = selectPageNumber;
+      setPages(paginationResult.docs);
+      setTotalItemsCount(paginationResult.totalDocs);
+      setPagingLimit(paginationResult.limit);
 
-    try {
-      const { data } = await appContainer.apiv3.get(`/bookmarks/${userId}`, { page });
-      if (data.paginationResult == null) {
-        throw new Error('data must conclude \'paginateResult\' property.');
-      }
-      const {
-        docs: pages, totalDocs: totalPages, limit: pagingLimit, page: activePage,
-      } = data.paginationResult;
-      this.setState({
-        pages,
-        totalPages,
-        pagingLimit,
-        activePage,
-      });
+      setIsLoading(false);
     }
     catch (error) {
       logger.error('failed to fetch data', error);
       toastError(error, 'Error occurred in bookmark page list');
     }
+  }, [appContainer, activePage, userId]);
+
+  useEffect(() => {
+    getMyBookmarkList();
+  }, [getMyBookmarkList]);
+
+  if (isLoading) {
+    return (
+      <div className="wiki">
+        <div className="text-muted test-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
   }
 
   /**
@@ -68,37 +68,35 @@ class BookmarkList extends React.Component {
    * @param {any} pages Array of pages Model Obj
    *
    */
-  generatePageList(pages) {
-    return pages.map(page => (
-      <li key={`my-bookmarks:${page._id}`}>
-        <Page page={page.page} />
-      </li>
-    ));
-  }
-
-  render() {
-    const { t } = this.props;
-
-    return (
-      <div className="page-list-container-create">
-        {this.state.totalPages === 0 ? t('No bookmarks yet') : (
-          <>
-            <ul className="page-list-ul page-list-ul-flat mb-3">
-              {this.generatePageList(this.state.pages)}
-            </ul>
-            <PaginationWrapper
-              activePage={this.state.activePage}
-              changePage={this.handlePage}
-              totalItemsCount={this.state.totalPages}
-              pagingLimit={this.state.pagingLimit}
-            />
-          </>
+  const generatePageList = pages.map(page => (
+    <li key={`my-bookmarks:${page._id}`}>
+      <Page page={page.page} />
+    </li>
+  ));
+
+  console.log(activePage);
+  console.log(totalItemsCount);
+  console.log(pagingLimit);
+
+  return (
+    <div className="page-list-container-create">
+      {totalItemsCount === 0 ? t('No bookmarks yet') : (
+        <>
+          <ul className="page-list-ul page-list-ul-flat mb-3">
+            {generatePageList}
+          </ul>
+          <PaginationWrapper
+            activePage={activePage}
+            changePage={setPageNumber}
+            totalItemsCount={totalItemsCount}
+            pagingLimit={pagingLimit}
+          />
+        </>
         )}
-      </div>
-    );
-  }
+    </div>
+  );
 
-}
+};
 
 /**
  * Wrapper component for using unstated

src/client/js/components/RecentCreated/RecentCreated.jsx

@@ -35,7 +35,6 @@ class RecentCreated extends React.Component {
   async getRecentCreatedList(selectedPage) {
     const { appContainer, userId } = this.props;
     const page = selectedPage;
-    // const userId = appContainer.currentUserId;
 
     // pagesList get and pagination calculate
     const res = await appContainer.apiv3Get(`/users/${userId}/recent`, { page });