Merge pull request #2537 from weseek/imprv/apply-react-for-my-bookmark-list

added my bookmark list jsx

src/client/js/app.jsx

@@ -23,6 +23,7 @@ import TrashPageAlert from './components/Page/TrashPageAlert';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
+import MyBookmarkList from './components/MyBookmarkList/MyBookmarkList';
 import MyDraftList from './components/MyDraftList/MyDraftList';
 import SeenUserList from './components/User/SeenUserList';
 import LikerList from './components/User/LikerList';
@@ -92,6 +93,7 @@ if (pageContainer.state.pageId != null) {
     'seen-user-list': <SeenUserList />,
     'liker-list': <LikerList />,
 
+    'user-bookmark-list': <MyBookmarkList />,
     'user-created-list': <RecentCreated />,
     'user-draft-list': <MyDraftList />,
   });

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+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: Infinity,
+    };
+
+    this.handlePage = this.handlePage.bind(this);
+  }
+
+  componentWillMount() {
+    this.getMyBookmarkList(1);
+  }
+
+  async handlePage(selectedPage) {
+    await this.getMyBookmarkList(selectedPage);
+  }
+
+  async getMyBookmarkList(selectPageNumber) {
+    const { appContainer, pageContainer } = this.props;
+    const { pageId } = pageContainer.state;
+
+    const userId = appContainer.currentUserId;
+    /* TODO GW-3255 get config from customize settings */
+    const limit = appContainer.getConfig().recentCreatedLimit;
+    const offset = (selectPageNumber - 1) * limit;
+
+
+    /* /pages.myBookmarks is not exitst. TODO GW-3251 Create api v3 /pages.myBookmarks */
+
+    // This block is cited from MyDraftList
+    /* await this.props.appContainer.apiGet('/pages.myBookmarks', {
+      page_id: pageId, user: userId, limit, offset,
+    })
+      .then((res) => {
+        const totalPages = res.totalCount;
+        const pages = res.pages;
+        const activePage = selectPageNumber;
+        this.setState({
+          pages,
+          activePage,
+          totalPages,
+          pagingLimit: limit,
+        });
+      }); */
+    try {
+      await pageContainer.retrieveMyBookmarkList(pageId, userId, limit, offset);
+    }
+    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) {
+    /* TODO GW-3251 */
+    return pages.map(page => (
+      <li key={`my-bookmarks-list:list-view:${page._id}`}>
+        <Page 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
+          activePage={this.state.activePage}
+          changePage={this.handlePage}
+          totalItemsCount={this.state.totalPages}
+          pagingLimit={this.state.pagingLimit}
+        />
+      </div>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const MyBookmarkListWrapper = withUnstatedContainers(MyBookmarkList, [AppContainer, PageContainer]);
+
+MyBookmarkList.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default MyBookmarkListWrapper;

src/client/js/services/PageContainer.js

@@ -487,4 +487,8 @@ export default class PageContainer extends Container {
 
   }
 
+  /* TODO GW-325 */
+  retrieveMyBookmarkList() {
+  }
+
 }

src/server/views/widget/user_page_content.html

@@ -31,13 +31,14 @@
   <div class="user-page-content-tab tab-content">
 
     <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
-      {% if bookmarkList.length == 0 %}
+      <!-- TODO This block for compareation, it will delete later. -->
+      {# {% if bookmarkList.length == 0 %}
         No bookmarks yet.
-      {% else %}
+      {% else %} #}
         <div class="page-list-container">
-          {% include 'page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %}
+          {# {% include 'page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %} #}
         </div>
-      {% endif %}
+        {# {% endif %} #}
     </div>
 
     <div class="tab-pane user-created-list page-list" id="user-created-list">