Adding pagination to dashboard and minor changes. (#495)

* Adding pagination to dashboard and minor changes.

* Requested changes

Author: AuraOfDivinity

src/user/proposals/ProposalEditor/EditorContent/EditorContent.js

@@ -203,15 +203,17 @@ class EditorContent extends Component {
             <span className="title-text">Write your Proposal</span>
             <div className="form-container">
               <Form>
-                <Form.Label>Proposal Title</Form.Label>
+                <Form.Label className="field-title">Proposal Title</Form.Label>
                 <Form.Control
                   as="input"
                   name="proposalTitle"
                   className="searchbar"
                   onChange={this.handleChange}
                   value={this.state.proposalTitle}
                 />
-                <Form.Label>Short Description</Form.Label>
+                <Form.Label className="field-title">
+                  Short Description
+                </Form.Label>
                 <Form.Control
                   name="proposalDescription"
                   as="textarea"

src/user/proposals/ProposalEditor/EditorContent/EditorContent.scss

@@ -12,6 +12,11 @@
       width: 60%;
       .form-container {
         margin-top: 10px;
+        .field-title {
+          font-weight: bold;
+          margin-top: 15px;
+          margin-bottom: 0px;
+        }
       }
       .title-text {
         font-family: Inter;
@@ -54,7 +59,7 @@
     }
   }
   .proposal-bottompanel {
-    flex-grow: 5;
+    flex-grow: 12;
     display: flex;
   }
 

src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Form, Image } from "react-bootstrap";
+import { Button, Form, Image, Pagination } from "react-bootstrap";
 import "./DashboardContent.scss";
 import userIcon2 from "../../../../assets/images/userIcon2.jpg";
 import { Link } from "react-router-dom";
@@ -15,9 +15,13 @@ class DashboardContent extends Component {
     this.state = {
       userId: localStorage.getItem("userId"),
       proposals: [],
-      displayItems: [],
+      displayItems: [0],
       allProposals: [],
       userProposals: [],
+
+      pageCount: 0,
+      pageSize: 4,
+      currentPage: 0,
     };
   }
 
@@ -29,21 +33,25 @@ class DashboardContent extends Component {
   componentWillReceiveProps(nextProps) {
     const { allProposals, userProposals } = nextProps;
 
+    let pageCount = Math.ceil(allProposals.length / this.state.pageSize);
+
     this.setState({
       allProposals: allProposals,
       userProposals: userProposals,
       displayItems: allProposals,
+      pageCount: pageCount,
     });
   }
 
   handleSearchBarChange = (evt) => {
     const value = evt.target.value.toLowerCase();
-    const proposals = this.state.proposals;
+    const proposals = this.props.allProposals;
     let results = [];
 
     if (value.length === 0) {
       this.setState({
         displayItems: proposals,
+        pageCount: this.calculatePageCount(proposals.length),
       });
     } else {
       proposals.forEach((item) => {
@@ -54,20 +62,27 @@ class DashboardContent extends Component {
 
       this.setState({
         displayItems: results,
+        pageCount: this.calculatePageCount(results.length),
       });
     }
   };
 
+  calculatePageCount = (length) => {
+    return Math.ceil(length / this.state.pageSize);
+  };
+
   handleButtonClick = (name) => {
     const proposals = this.state.userProposals;
     const allProposals = this.state.allProposals;
 
     let results = [];
+    let pageCount;
 
     switch (name) {
       case "All":
         this.setState({
           displayItems: allProposals,
+          pageCount: this.calculatePageCount(allProposals.length),
         });
         break;
       case "Accepted":
@@ -76,51 +91,59 @@ class DashboardContent extends Component {
             results.push(item);
           }
         });
-        this.setState({
-          displayItems: results,
-        });
+        this.handleStateChange(results)
         break;
       case "Submitted":
         proposals.forEach((item) => {
           if (item.proposalStatus === "SUBMITTED") {
             results.push(item);
           }
         });
-        this.setState({
-          displayItems: results,
-        });
+        this.handleStateChange(results)
         break;
       case "Draft":
         proposals.forEach((item) => {
           if (item.proposalStatus === "DRAFT") {
             results.push(item);
           }
         });
-        this.setState({
-          displayItems: results,
-        });
+        this.handleStateChange(results)
         break;
       case "Rejected":
         proposals.forEach((item) => {
           if (item.proposalStatus === "REJECTED") {
             results.push(item);
           }
         });
-        this.setState({
-          displayItems: results,
-        });
+        this.handleStateChange(results)
         break;
     }
   };
 
+  handleStateChange = (results)=> {
+    this.setState({
+      displayItems: results,
+      pageCount: this.calculatePageCount(results.length),
+    });
+  }
+
+  handlePaginationClick = (e, index) => {
+    e.preventDefault();
+
+    this.setState({
+      currentPage: index,
+    });
+  };
+
   render() {
+    const { currentPage, pageSize, displayItems } = this.state;
     return (
       <div className="dashboard-content">
         <div className="searchbar-container">
           <Form>
             <Form.Control
               as="input"
-              placeholder="search"
+              placeholder="Search"
               className="searchbar"
               onChange={this.handleSearchBarChange}
             />
@@ -178,90 +201,121 @@ class DashboardContent extends Component {
 
         <div className="proposal-container">
           <div className="proposals">
-            {this.state.displayItems.map((proposalItem, index) => {
-              return (
-                <div className="single-proposal" key={index}>
-                  <div className="user-info">
-                    <div className="image">
-                      <Image src={userIcon2} alt="icon" rounded />
-                    </div>
-                    <div className="img-desc">
-                      <h2>{proposalItem.title}</h2>
-                      <p className="proposal-date">{proposalItem.createdAt}</p>
-                    </div>
-                    {proposalItem.proposalStatus === "DRAFT" ? (
-                      <Button
-                        variant="primary"
-                        className="status-btn"
-                        size="sm"
-                      >
-                        <span className="btn-content">
-                          {proposalItem.proposalStatus}
-                        </span>
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="primary"
-                        className="status-btn-submitted"
-                        size="sm"
-                      >
-                        <span className="btn-content">
-                          {proposalItem.proposalStatus}
-                        </span>
-                      </Button>
-                    )}
-                  </div>
-                  <div className="proposal-content">
-                    <div className="proposal-details">
-                      {proposalItem.proposalDescription}
+            {displayItems
+              .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
+              .map((proposalItem, index) => {
+                return (
+                  <div className="single-proposal" key={index}>
+                    <div className="user-info">
+                      <div className="image">
+                        <Image src={userIcon2} alt="icon" rounded />
+                      </div>
+                      <div className="img-desc">
+                        <h2>{proposalItem.title}</h2>
+                        <p className="proposal-date">
+                          {proposalItem.createdAt}
+                        </p>
+                      </div>
+                      {proposalItem.proposalStatus === "DRAFT" ? (
+                        <Button
+                          variant="primary"
+                          className="status-btn"
+                          size="sm"
+                        >
+                          <span className="btn-content">
+                            {proposalItem.proposalStatus}
+                          </span>
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="primary"
+                          className="status-btn-submitted"
+                          size="sm"
+                        >
+                          <span className="btn-content">
+                            {proposalItem.proposalStatus}
+                          </span>
+                        </Button>
+                      )}
                     </div>
-                    <div className="proposal-options">
-                      {proposalItem.creator === this.state.userId ? (
+                    <div className="proposal-content">
+                      <div className="proposal-details">
+                        {proposalItem.proposalDescription}
+                      </div>
+                      <div className="proposal-options">
+                        {proposalItem.creator === this.state.userId ? (
+                          <Link
+                            to={{
+                              pathname: "/proposaleditor",
+                              state: {
+                                proposalId: proposalItem._id,
+                              },
+                            }}
+                          >
+                            <Button
+                              variant="primary"
+                              className="option-btn"
+                              size="sm"
+                            >
+                              <span className="option-text">Edit</span>
+                            </Button>
+                          </Link>
+                        ) : null}
                         <Link
                           to={{
-                            pathname: "/proposaleditor",
+                            pathname: "/proposaldiscussion",
                             state: {
                               proposalId: proposalItem._id,
+                              isAdmin: false,
+                              userId: this.state.userId,
+                              isCreator:
+                                proposalItem.creator === this.state.userId,
                             },
                           }}
                         >
                           <Button
+                            active
                             variant="primary"
                             className="option-btn"
                             size="sm"
                           >
-                            <span className="option-text">Edit</span>
+                            <span className="option-text">View</span>
                           </Button>
                         </Link>
-                      ) : null}
-                      <Link
-                        to={{
-                          pathname: "/proposaldiscussion",
-                          state: {
-                            proposalId: proposalItem._id,
-                            isAdmin: false,
-                            userId: this.state.userId,
-                            isCreator:
-                              proposalItem.creator === this.state.userId,
-                          },
-                        }}
-                      >
-                        <Button
-                          active
-                          variant="primary"
-                          className="option-btn"
-                          size="sm"
-                        >
-                          <span className="option-text">View</span>
-                        </Button>
-                      </Link>
+                      </div>
                     </div>
                   </div>
-                </div>
+                );
+              })}
+          </div>
+        </div>
+        {this.state.pageCount !== 0 ? (
+          <div className="pagination-container">
+            <Pagination.Prev
+              disabled={currentPage <= 0}
+              onClick={(e) => this.handlePaginationClick(e, currentPage - 1)}
+              className="pagination-item"
+            />
+
+            {[...Array(this.state.pageCount)].map((page, index) => {
+              return (
+                <Pagination.Item
+                  className="pagination-item"
+                  active={index === currentPage}
+                  onClick={(e) => this.handlePaginationClick(e, index)}
+                >
+                  {index + 1}
+                </Pagination.Item>
               );
             })}
+
+            <Pagination.Next
+              disabled={currentPage >= this.state.pageCount - 1}
+              onClick={(e) => this.handlePaginationClick(e, currentPage + 1)}
+              className="pagination-item"
+            />
           </div>
-        </div>
+        ) : null}
       </div>
     );
   }

src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss

@@ -170,4 +170,10 @@
       }
     }
   }
+  .pagination-container {
+    text-align: center;
+    .pagination-item {
+      display: inline-block;
+    }
+  }
 }