Merge pull request #22 from naseeihity/develop

Develop
naseeihity · Mar 19, 2018 · 2658f38 · 2658f38
2 parents 3b2859f + 7d0b9fa
commit 2658f38
Show file tree

Hide file tree

Showing 9 changed files with 428 additions and 62 deletions.
diff --git a/frontend/component/Posts/PostPage.js b/frontend/component/Posts/PostPage.js
@@ -11,7 +11,7 @@ const PostPage = props => (
     <div className={styles.container_main}>
       <div className={styles.container_box}>
         <Paper className={styles.container_context} elevation={5}>
-          <Posts total={props.total} />
+          <Posts total={props.total} match={props.match} />
         </Paper>
       </div>
     </div>

diff --git a/frontend/component/Posts/index.js b/frontend/component/Posts/index.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import Typography from 'material-ui/Typography';
 import { NavigateNext, NavigateBefore } from 'material-ui-icons';
-import ReactPaginate from 'react-paginate';
 import qs from 'query-string';
 import { Link } from 'react-router-dom';
+import PaginationBoxView from '../utils/paginate';
 import PostList from './PostList';
 
 import styles from './post.css';
@@ -14,15 +14,23 @@ class Posts extends Component {
     this.state = {
       articles: [],
       currentPage: 1,
-      pageSize: 5,
-      pageCount: props.total || 1
+      pageSize: 4,
+      pageCount: 1,
+      loading: true
     };
-    this.handlePageClick = this.handlePageClick.bind(this);
     this.getArticles = this.getArticles.bind(this);
   }
 
   componentDidMount() {
-    this.getArticles();
+    const { articles, pageSize } = this.state;
+    const { total } = this.props;
+    const page = this.props.match && this.props.match.params.page;
+    if (
+      articles.length === 0 &&
+      (!page || page <= Math.ceil(total / pageSize))
+    ) {
+      this.getArticles(page);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -31,13 +39,16 @@ class Posts extends Component {
         pageCount: Math.ceil(nextProps.total / this.state.pageSize)
       });
     }
+
+    if (nextProps.match && !Object.is(nextProps.match, this.props.match)) {
+      this.getArticles(nextProps.match.params.page);
+    }
   }
 
-  getArticles(page, pageSize) {
-    // TODO: get page from url param
+  getArticles(page = 1, pageSize) {
     const opts = {
       per_page: pageSize || this.state.pageSize,
-      page: page || this.state.currentPage
+      page: page || this.props.match.params.page
     };
 
     fetch(
@@ -48,21 +59,15 @@ class Posts extends Component {
       .then(res => res.json())
       .then(articles =>
         this.setState({
-          articles
+          articles,
+          pageCount: Math.ceil(this.props.total / this.state.pageSize),
+          currentPage: opts.page
         })
       );
   }
 
-  handlePageClick(page) {
-    // TODO
-    this.setState({ currentPage: page.selected + 1 });
-    this.getArticles(page.selected + 1);
-    window.scrollTo(0, 0);
-  }
-
   render() {
-    // TODO: Rewrite ReactPaginate with a LinkComponent props
-    const { articles, pageCount } = this.state;
+    const { articles, pageCount, currentPage } = this.state;
     return (
       <div>
         <Typography
@@ -75,33 +80,32 @@ class Posts extends Component {
         </Typography>
         <PostList articles={articles} />
         <div className={styles.post_paginate}>
-          <Link to={`/pages/${this.state.currentPage}`}>
-            <ReactPaginate
-              previousLabel={
-                <NavigateBefore
-                  viewBox={'0 0 25 25'}
-                  className={styles.post_paginate_icon}
-                />
-              }
-              nextLabel={
-                <NavigateNext
-                  viewBox={'0 0 25 25'}
-                  className={styles.post_paginate_icon}
-                />
-              }
-              breakLabel={<a href="">...</a>}
-              breakClassName={'break-me'}
-              activeClassName={styles.post_paginate_active}
-              pageCount={pageCount}
-              initialPage={0}
-              marginPagesDisplayed={1}
-              pageRangeDisplayed={3}
-              onPageChange={this.handlePageClick}
-              containerClassName={'pagination'}
-              disabledClassName={styles.post_paginate_disabled}
-              subContainerClassName={'pages pagination'}
-            />
-          </Link>
+          <PaginationBoxView
+            to="/pages"
+            previousLabel={
+              <NavigateBefore
+                viewBox={'0 0 25 25'}
+                className={styles.post_paginate_icon}
+              />
+            }
+            nextLabel={
+              <NavigateNext
+                viewBox={'0 0 25 25'}
+                className={styles.post_paginate_icon}
+              />
+            }
+            breakLabel={<Link to="/pages">...</Link>}
+            breakClassName={'break-me'}
+            activeClassName={styles.post_paginate_active}
+            pageCount={pageCount}
+            initialPage={0}
+            forcePage={currentPage - 1}
+            marginPagesDisplayed={1}
+            pageRangeDisplayed={3}
+            containerClassName={'pagination'}
+            disabledClassName={styles.post_paginate_disabled}
+            subContainerClassName={'pages pagination'}
+          />
         </div>
       </div>
     );

diff --git a/frontend/component/Posts/post.css b/frontend/component/Posts/post.css
@@ -222,17 +222,14 @@
   display: block;
 }
 
-.post_paginate_disabled a {
-  background-color: #ccc;
-  border: 1px solid #ccc;
-  cursor: default;
+.post_paginate .post_paginate_disabled {
+  display: none;
 }
 
-.post_paginate_disabled svg {
-  color: #eee;
+.post_show {
+  display: block;
 }
 
-.post_paginate_disabled:hover a {
-  background-color: #ccc;
-  border: 1px solid #ccc;
+.post_hide {
+  display: none;
 }
diff --git a/frontend/component/Wapper/Container.js b/frontend/component/Wapper/Container.js
@@ -34,7 +34,9 @@ class Container extends Component {
           <Route
             exact
             path="/"
-            render={() => <PostPage total={this.state.total} />}
+            render={({ match }) => (
+              <PostPage total={this.state.total} match={match} />
+            )}
           />
           <Route
             path="/pages/:page"

diff --git a/frontend/component/utils/paginate/BreakView.js b/frontend/component/utils/paginate/BreakView.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BreakView = props => {
+  const label = props.breakLabel;
+  const className = props.breakClassName || 'break';
+
+  return (
+    <li className={className} data-index={props.index}>
+      {React.cloneElement(label, { to: `${props.to}/${props.index + 1}` })}
+    </li>
+  );
+};
+
+export default BreakView;
diff --git a/frontend/component/utils/paginate/PageView.js b/frontend/component/utils/paginate/PageView.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const PageView = props => {
+  let cssClassName = props.pageClassName;
+  const linkClassName = props.pageLinkClassName;
+  const { onClick, href, to, page } = props;
+  const url = `${to}/${page}` || href;
+
+  let ariaLabel = `Page ${props.page}${
+    props.extraAriaContext ? ` ${props.extraAriaContext}` : ''
+  }`;
+  let ariaCurrent = null;
+
+  if (props.selected) {
+    ariaCurrent = 'page';
+    ariaLabel = `Page ${props.page} is your current page`;
+    if (typeof cssClassName !== 'undefined') {
+      cssClassName = `${cssClassName} ${props.activeClassName}`;
+    } else {
+      cssClassName = props.activeClassName;
+    }
+  }
+
+  return (
+    <li className={cssClassName}>
+      <Link
+        to={url}
+        onClick={onClick}
+        className={linkClassName}
+        tabIndex="0"
+        aria-label={ariaLabel}
+        aria-current={ariaCurrent}
+        onKeyPress={onClick}
+      >
+        {props.page}
+      </Link>
+    </li>
+  );
+};
+
+export default PageView;