feature/pagy integration and page consolidation

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,15 +2,13 @@
 
 #### Please check if the PR fulfills these requirements
 
-- [ ] The changes don't come from your master branch. ([Source](https://blog.jasonmeridth.com/posts/do-not-issue-pull-requests-from-your-master-branch/)) 
+- [ ] The changes don't come from your master branch. ([Source](https://blog.jasonmeridth.com/posts/do-not-issue-pull-requests-from-your-master-branch/))
 
 ---
 
 ### [Trello Card](trello.com/LINK-TO-TRELLO-CARD)
 
-#### What kind of change does this PR introduce? (bug fix, feature, docs update, ...)
-
-Please delete options that are not relevant.
+#### What kind of change does this PR introduce? [check at least one box] (bug fix, feature, docs update, ...)
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
@@ -48,7 +46,7 @@ Please delete options that are not relevant.
 ---
 
 
-#### TODO:
+#### TODO: [delete if there are no relevant TODOs after this PR is merged]
 - this
 - that
 - other

README.md

@@ -15,9 +15,9 @@ Banana App is an open-source, not-for-profit project of The Be Good Foundation.
 
 Step 0 is to [install the backend](https://github.com/FoodIsLifeBGP/banana-rails).  Follow those instructions to make sure you have everything needed to install this repo.
 
-Then if you havent already done so, clone the repository to your desired project folder and install dependencies: `git clone https://github.com/FoodIsLifeBGP/banana-rn && cd banana-rn && npm i`
+Then if you haven't already done so, clone the repository to your desired project folder and install dependencies: `git clone https://github.com/FoodIsLifeBGP/banana-admin && cd banana-admin`
 
-otherwise you can just navigate to your project's root folder in the terminal (e.g. `cd ~/Projects/banana-rn`)
+otherwise you can just navigate to your project's root folder in the terminal (e.g. `cd ~/Projects/banana-admin`)
 
 # Installation (Mac/OSX)
 
@@ -73,7 +73,7 @@ Run ESLint (you'll need to ensure you fix any linter errors and visually double-
 yarn lint
 ```
 
-...and infequently you may need to build the project:
+...and infrequently you may need to build the project:
 ```
 yarn run build
 ```

src/App.js

@@ -9,6 +9,8 @@ import HomePage from './Pages/HomePage';
 import SettingsPage from './Pages/SettingsPage';
 import ReviewApplicationPage from './Pages/ReviewApplicationPage';
 import LoginPage from './Pages/LoginPage/index';
+import ApplicationIndexPage from './Pages/ApplicationIndexPage';
+import ApplicationDetailPage from './Pages/ApplicationDetailPage';
 
 function App() {
   return (
@@ -20,6 +22,9 @@ function App() {
             <Route exact path="/home" element={<HomePage />} />
             <Route exact path="/settings" element={<SettingsPage />} />
             <Route exact path="/review-applications" element={<ReviewApplicationPage />} />
+            <Route exact path="/applications/:userVariant" element={<ApplicationIndexPage />} />
+            <Route exact path="/applications/:userVariant/:id" element={<ApplicationDetailPage />} />
+            <Route exact path="/review-applications" element={<ReviewApplicationPage />} />
           </Routes>
         </div>
       </Router>

src/Components/ApplicationCard/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import Icon from '../Icon';
 
 function ApplicationCard(props) {
@@ -26,7 +26,7 @@ function ApplicationCard(props) {
   return (
     <div className={styles.container} type={type}>
       <div className={styles.icon}>
-        <Icon className={styles.icon} name={iconName} size={70} />
+        <Icon className={styles.icon} name={iconName} />
       </div>
       <div className={styles.body}>
         {userCount.toLocaleString(undefined, { minimumIntegerDigits: 2, useGrouping: false })}

src/Components/ApplicationCard/style.module.css → src/Components/ApplicationCard/style.module.scss

@@ -1,8 +1,8 @@
 @import "../../colors.module.css";
 @import "../../fonts.module.css";
 
-.container{
-  width: 500px;
+.container {
+  width: 100%;
   height: 244px;
   display: flex;
   flex-direction: column;
@@ -28,9 +28,13 @@
 
 .icon {
   position: absolute;
-  height: 60px;
+  width: 2.75rem;
   right: 24px;
   top: 24px;
+
+  img {
+    width: 100%;
+  }
 }
 
 .body {

src/Components/ApplicationStatusForm/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 function ApplicationStatusForm({ title, handleSubmit }) {
   return (

src/Components/BreadCrumb/style.module.scss

@@ -4,6 +4,7 @@
   background: white;
   display: flex;
   padding: 2rem 0rem;
+  list-style: none;
 }
 
 .linkStyle {

src/Components/Button/style.module.css

@@ -3,7 +3,6 @@
 
 
 .buttonContainer{
-  width: 150px;
   height: 70px;
   display: flex;
   justify-content: center;

src/Components/DonationCard/index.js

@@ -29,7 +29,7 @@ function DonationCard(props) {
         <Row>
           <Col className={styles.body}>{`${fractionDonated}%`}</Col>
           <Col className={styles.alignRight}>
-            <Icon name="donationStatus" size={85} />
+            <Icon name="donationStatus" />
           </Col>
         </Row>
         <Row>

src/Components/DonationCard/style.module.css

@@ -3,7 +3,7 @@
  @import "../../fonts.module.css";
 
  .container{
-   width: 500px;
+   width: 100%;
    height: 512px;
    display: flex;
    flex-direction: column;
@@ -82,4 +82,4 @@
  ::-webkit-progress-value {
    background-color: currentColor;
  }
- 
+

src/Components/Icon/index.js

@@ -2,23 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import map from './map';
 
-function Icon(props) {
-  const { name, size } = props;
+function Icon({ name }) {
   const fileRef = map[name];
-  if (fileRef) {
-    return (
-      <img src={fileRef} style={{ width: size, height: size }} alt="" />
-    );
-  }
 
-  return (
-    <i className={`fa fa-${name}`} style={{ fontSize: `${size} + px` }} />
+  return fileRef ? (
+    <img src={fileRef} alt={fileRef} />
+  ) : (
+    <i className={`fa fa-${name}`} />
   );
 }
 
 Icon.propTypes = {
   name: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
+
 };
 
 export default Icon;

src/Components/Input/index.js

@@ -20,7 +20,7 @@ function Input(props) {
   const renderIcon = () => {
     if (iconName && iconName !== '') {
       return (
-        <Icon name={iconName} size={20} className={styles.icon} />
+        <Icon name={iconName} className={styles.icon} />
       );
     }
     return null;

src/Components/Navbar/index.js

@@ -9,7 +9,7 @@ import {
   Row,
   Col,
 } from 'reactstrap';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import Icon from '../Icon';
 
 function Navbar(props) {
@@ -24,7 +24,7 @@ function Navbar(props) {
       <NavbarBrand href="/">
         <Row className="align-items-center">
           <Col>
-            <Icon name="bananaIcon" size={75} />
+            <Icon name="bananaIcon" />
           </Col>
           <Col>
             <NavbarText className={styles.bananaPortalNav}>
@@ -37,13 +37,13 @@ function Navbar(props) {
       </NavbarBrand>
       <Nav pills>
         <NavItem className={styles.navIcon}>
-          <Icon name="alertBell" size={35} />
+          <Icon name="alertBell" />
         </NavItem>
         <NavItem className={styles.navIcon}>
-          <Icon name="tasks" size={35} />
+          <Icon name="tasks" />
         </NavItem>
         <NavItem className={styles.navIcon}>
-          <Icon name="ellipse" size={35} />
+          <Icon name="ellipse" />
         </NavItem>
       </Nav>
     </BootstrapNavbar>

src/Components/Paginator/index.js

@@ -19,7 +19,7 @@ function Paginator(props) {
   return (
     <Pagination aria-label="Page navigation" className={styles.paginationStyle}>
       <PaginationItem onClick={() => priorPage(currentPage)} disabled={currentPage === 1}>
-        <PaginationLink href="#">
+        <PaginationLink>
           <span className={currentPage !== 1 ? styles.pagTabText : ''}>
             &laquo;
           </span>
@@ -30,16 +30,17 @@ function Paginator(props) {
           onClick={() => paginate(number)}
           className={number === currentPage ? 'activeSquare paginationItemStyle' : 'paginationItemStyle'}
           active={number === currentPage}
+          key={number + 1}
         >
-          <PaginationLink href="#" className={number === currentPage ? styles.paginationLinkStyle : ''}>
+          <PaginationLink className={number === currentPage ? styles.paginationLinkStyle : ''}>
             <span className={styles.pagTabText}>
               {number}
             </span>
           </PaginationLink>
         </PaginationItem>
       ))}
       <PaginationItem onClick={() => nextPage(currentPage)} disabled={currentPage === pages}>
-        <PaginationLink href="#">
+        <PaginationLink>
           <span className={currentPage !== pages ? styles.pagTabText : ''}>
             &raquo;
           </span>

src/Components/ProfilePicture/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import BANANA from '../../Image/BANANA.svg';
 
 const classNames = require('classnames');

src/Components/Search/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Icon from '../Icon';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 function Search() {
   const [search, setSearch] = useState('');

src/Components/Search/style.module.css → src/Components/Search/style.module.scss

@@ -1,10 +1,11 @@
 .searchComponent {
-  width: 403px;
   height: 73px;
   display: flex;
   flex-direction: row;
   background: var(--LIGHT_GRAY);
   border-radius: 8px;
+  margin-top: 1rem;
+  margin-right: 1rem;
 }
 
 .vector {
@@ -19,7 +20,7 @@
   font-family: Open Sans;
   font-style: normal;
   font-weight: normal;
-  font-size: 24px;
+  font-size: 1.25rem;
   line-height: 33px;
   border: none;
   background: rgba(0,0,0,0);

src/Components/Status/index.js

@@ -1,61 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
-function Status(props) {
-  const { statusState } = props;
+export default function Status({ statusState }) {
+  const parsedState = statusState.charAt(0).toUpperCase() + statusState.slice(1);
 
-  if (statusState === 'pending') {
-    return (
-      <div className={styles.pendingDiv}>
-        <p className={styles.text}><strong>Pending</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'active') {
-    return (
-      <div className={styles.activeDiv}>
-        <p className={styles.text}><strong className={styles.whiteText}>Active</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'inactive') {
-    return (
-      <div className={styles.inactiveDiv}>
-        <p className={styles.text}><strong className={styles.navyBlueText}>Inactive</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'incomplete') {
-    return (
-      <div className={styles.incompleteDiv}>
-        <p className={styles.text}><strong>Incomplete</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'suspended') {
-    return (
-      <div className={styles.suspendedDiv}>
-        <p className={styles.text}><strong>Suspended</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'closed') {
-    return (
-      <div className={styles.closedDiv}>
-        <p className={styles.text}><strong className={styles.whiteText}>Closed</strong></p>
-      </div>
-    );
-  }
+  return (
+    <div className={`${styles.applicationStatusLabel} ${styles[statusState]}`}>
+      <strong>{parsedState}</strong>
+    </div>
+  );
 }
 
 Status.propTypes = {
   statusState: PropTypes.string.isRequired,
 };
-
-export default Status;