Merge pull request #2950 from weseek/fix/4156-adjust-pagination-wrapper

Fix/4156 adjust pagination wrapper

src/client/js/app.jsx

@@ -24,7 +24,7 @@ import RecentCreated from './components/RecentCreated/RecentCreated';
 import RecentlyCreatedIcon from './components/Icons/RecentlyCreatedIcon';
 import MyDraftList from './components/MyDraftList/MyDraftList';
 import BookmarkIcon from './components/Icons/BookmarkIcon';
-import MyBookmarkList from './components/MyBookmarkList/MyBookmarkList';
+import BookmarkList from './components/PageList/BookmarkList';
 import SeenUserList from './components/User/SeenUserList';
 import LikerList from './components/User/LikerList';
 import TableOfContents from './components/TableOfContents';
@@ -108,8 +108,7 @@ if (pageContainer.state.pageId != null) {
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
     'user-bookmark-icon': <BookmarkIcon />,
-    'user-bookmark-list': <MyBookmarkList />,
-    // 'user-draft-list': <MyDraftList />,
+    'user-bookmark-list': <BookmarkList userId={pageContainer.state.creator._id} />,
   });
 }
 if (pageContainer.state.creator != null) {

src/client/js/components/MyBookmarkList/MyBookmarkList.jsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-
-import AppContainer from '../../services/AppContainer';
-import PageContainer from '../../services/PageContainer';
-import { toastError } from '../../util/apiNotification';
-
-import PaginationWrapper from '../PaginationWrapper';
-
-import Page from '../PageList/Page';
-
-const logger = loggerFactory('growi:MyBookmarkList');
-class MyBookmarkList extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      pages: [],
-      activePage: 1,
-      totalPages: 0,
-      pagingLimit: null,
-    };
-
-    this.handlePage = this.handlePage.bind(this);
-  }
-
-  componentWillMount() {
-    this.getMyBookmarkList(1);
-  }
-
-  async handlePage(selectPageNumber) {
-    await this.getMyBookmarkList(selectPageNumber);
-  }
-
-  async getMyBookmarkList(selectPageNumber) {
-    const { appContainer } = this.props;
-    const userId = appContainer.currentUserId;
-    const page = selectPageNumber;
-
-    try {
-      const { data } = await this.props.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,
-      });
-    }
-    catch (error) {
-      logger.error('failed to fetch data', error);
-      toastError(error, 'Error occurred in bookmark page list');
-    }
-  }
-
-  /**
-   * generate Elements of Page
-   *
-   * @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>
-    ));
-  }
-
-  renderNoBookmarkList() {
-    const { t } = this.props;
-    return t('No bookmarks yet');
-  }
-
-  renderBookmarkList() {
-    return (
-      <>
-        <ul className="page-list-ul page-list-ul-flat">
-          {this.generatePageList(this.state.pages)}
-        </ul>
-        <PaginationWrapper
-          align="center"
-          activePage={this.state.activePage}
-          changePage={this.handlePage}
-          totalItemsCount={this.state.totalPages}
-          pagingLimit={this.state.pagingLimit}
-        />
-      </>
-    );
-  }
-
-
-  render() {
-    return (
-      <>
-        <div className="page-list-container-create">
-          {/* TODO show a message in case of that there is no bookmark in user pages by gw4156 */}
-          {/* {this.state.totalPages === 0 ? this.renderNoBookmarkList() : this.renderBookmarkList()} */}
-          {this.renderBookmarkList()}
-        </div>
-      </>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const MyBookmarkListWrapper = withUnstatedContainers(MyBookmarkList, [AppContainer, PageContainer]);
-
-MyBookmarkList.propTypes = {
-  t: PropTypes.func.isRequired,
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default withTranslation()(MyBookmarkListWrapper);

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -64,7 +64,8 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
   );
 };
 
-// eslint-disable-next-line react/prop-types
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
 const UserPagePathNav = ({ pageId, pagePath }) => {
   const linkedPagePath = new LinkedPagePath(pagePath);
   const latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
@@ -84,10 +85,11 @@ const UserPagePathNav = ({ pageId, pagePath }) => {
   );
 };
 
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
 const UserInfo = ({ pageUser }) => {
   return (
     <div className="grw-users-info d-flex align-items-center">
+      {/* eslint-disable-next-line react/jsx-no-undef */}
       <UserPicture user={pageUser} />
 
       <div className="users-meta">

src/client/js/components/PageList.jsx

@@ -15,7 +15,7 @@ const PageList = (props) => {
   const { appContainer, pageContainer, t } = 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);
@@ -30,7 +30,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]);
@@ -40,7 +40,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

@@ -0,0 +1,97 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+
+import AppContainer from '../../services/AppContainer';
+import { toastError } from '../../util/apiNotification';
+
+import PaginationWrapper from '../PaginationWrapper';
+
+import Page from './Page';
+
+const logger = loggerFactory('growi:BookmarkList');
+
+const BookmarkList = (props) => {
+  const { t, appContainer, userId } = props;
+
+  const [pages, setPages] = useState([]);
+
+  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 appContainer.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');
+    }
+  }, [appContainer, activePage, userId]);
+
+  useEffect(() => {
+    getMyBookmarkList();
+  }, [getMyBookmarkList]);
+
+  /**
+   * generate Elements of Page
+   *
+   * @param {any} pages Array of pages Model Obj
+   *
+   */
+  const generatePageList = pages.map(page => (
+    <li key={`my-bookmarks:${page._id}`}>
+      <Page page={page.page} />
+    </li>
+  ));
+
+  return (
+    <div className="page-list-container-create">
+      {pages.length === 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}
+            align="center"
+            size="sm"
+          />
+        </>
+      )}
+    </div>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const BookmarkListWrapper = withUnstatedContainers(BookmarkList, [AppContainer]);
+
+BookmarkList.propTypes = {
+  t: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  userId: PropTypes.string.isRequired,
+};
+
+export default withTranslation()(BookmarkListWrapper);

src/client/js/components/PaginationWrapper.jsx

@@ -5,9 +5,6 @@ import { withTranslation } from 'react-i18next';
 
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 
-import { withUnstatedContainers } from './UnstatedUtils';
-import AppContainer from '../services/AppContainer';
-
 class PaginationWrapper extends React.Component {
 
   constructor(props) {
@@ -181,22 +178,19 @@ class PaginationWrapper extends React.Component {
 
 }
 
-const PaginationWrappered = withUnstatedContainers(PaginationWrapper, [AppContainer]);
-
 PaginationWrapper.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   activePage: PropTypes.number.isRequired,
   changePage: PropTypes.func.isRequired,
   totalItemsCount: PropTypes.number.isRequired,
-  pagingLimit: PropTypes.number,
+  pagingLimit: PropTypes.number.isRequired,
   align: PropTypes.string,
   size: PropTypes.string,
 };
+
 PaginationWrapper.defaultProps = {
   align: 'left',
   size: 'md',
-  pagingLimit: PropTypes.number,
 };
 
-export default withTranslation()(PaginationWrappered);
+export default withTranslation()(PaginationWrapper);

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

@@ -4,9 +4,8 @@ import PropTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
-import PaginationWrapper from '../PaginationWrapper';
-
 import Page from '../PageList/Page';
+import PaginationWrapper from '../PaginationWrapper';
 
 class RecentCreated extends React.Component {
 
@@ -17,7 +16,7 @@ class RecentCreated extends React.Component {
       pages: [],
       activePage: 1,
       totalPages: 0,
-      pagingLimit: null,
+      pagingLimit: 10,
     };
 
     this.handlePage = this.handlePage.bind(this);
@@ -35,7 +34,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 });