From a336c9cbe63c5508765797c3a3f646595793f9b2 Mon Sep 17 00:00:00 2001 From: Ren Burnett Date: Sat, 13 May 2023 10:48:57 -0700 Subject: [PATCH 1/5] unifiying donor and client detail/index pages --- README.md | 2 +- src/App.js | 3 +++ src/Pages/{DonorPage => UserDetailPage}/index.js | 11 +++++++---- .../style.module.css | 0 src/Pages/{AllDonorsPage => UsersPage}/index.js | 6 ++++-- src/Pages/{DonorPage => UsersPage}/style.module.css | 0 src/stories/AllDonorsPage.stories.js | 9 --------- src/stories/DonorPage.stories.js | 9 --------- src/stories/UserDetailPage.stories.js | 9 +++++++++ src/stories/UserIndexPage.stories.js | 9 +++++++++ 10 files changed, 33 insertions(+), 25 deletions(-) rename src/Pages/{DonorPage => UserDetailPage}/index.js (94%) rename src/Pages/{AllDonorsPage => UserDetailPage}/style.module.css (100%) rename src/Pages/{AllDonorsPage => UsersPage}/index.js (96%) rename src/Pages/{DonorPage => UsersPage}/style.module.css (100%) delete mode 100644 src/stories/AllDonorsPage.stories.js delete mode 100644 src/stories/DonorPage.stories.js create mode 100644 src/stories/UserDetailPage.stories.js create mode 100644 src/stories/UserIndexPage.stories.js diff --git a/README.md b/README.md index 8cdd4f0..074b54c 100644 --- a/README.md +++ b/README.md @@ -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 ``` diff --git a/src/App.js b/src/App.js index 85f8007..0355bfa 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import HomePage from './Pages/HomePage'; import SettingsPage from './Pages/SettingsPage'; import ReviewApplicationPage from './Pages/ReviewApplicationPage'; import LoginPage from './Pages/LoginPage/index'; +import AllDonorsPage from './Pages/UsersPage'; function App() { return ( @@ -20,6 +21,8 @@ function App() { } /> } /> } /> + } /> + } /> diff --git a/src/Pages/DonorPage/index.js b/src/Pages/UserDetailPage/index.js similarity index 94% rename from src/Pages/DonorPage/index.js rename to src/Pages/UserDetailPage/index.js index eb56674..0586b1b 100644 --- a/src/Pages/DonorPage/index.js +++ b/src/Pages/UserDetailPage/index.js @@ -85,7 +85,10 @@ const testData = [ }, ]; -function DonorPage() { +// NOTE: user variant is either "donor", "client" or "all" +function UserDetailPage(userVariant = 'all') { + console.log('userVariant:', userVariant); + const entriesPerPage = 10; const [displayData, setDisplayData] = useState([]); const [currentPage, setCurrentPage] = useState(1); @@ -113,7 +116,7 @@ function DonorPage() { } }; - const newDonorPageBCT = [ + const UserDetailPageBCT = [ { pageName: 'Home', url: 'localhost:3000' }, { pageName: 'Donor', url: 'localhost:3000' }, { pageName: 'New Donor Applications', url: 'localhost:3000' }, @@ -125,7 +128,7 @@ function DonorPage() {
- +

NEW APPLICATIONS (DONOR)

@@ -170,4 +173,4 @@ function DonorPage() { ); } -export default DonorPage; +export default UserDetailPage; diff --git a/src/Pages/AllDonorsPage/style.module.css b/src/Pages/UserDetailPage/style.module.css similarity index 100% rename from src/Pages/AllDonorsPage/style.module.css rename to src/Pages/UserDetailPage/style.module.css diff --git a/src/Pages/AllDonorsPage/index.js b/src/Pages/UsersPage/index.js similarity index 96% rename from src/Pages/AllDonorsPage/index.js rename to src/Pages/UsersPage/index.js index a64e75d..de555a0 100644 --- a/src/Pages/AllDonorsPage/index.js +++ b/src/Pages/UsersPage/index.js @@ -84,8 +84,10 @@ const testData = [ status: 'active', }, ]; +// NOTE: user variant is either "donor", "client" or "all" +function UserIndexPage(userVariant = 'all') { + console.log('userVariant:', userVariant); -function AllDonorsPage() { const entriesPerPage = 10; const [displayData, setDisplayData] = useState([]); const [currentPage, setCurrentPage] = useState(1); @@ -170,4 +172,4 @@ function AllDonorsPage() { ); } -export default AllDonorsPage; +export default UserIndexPage; diff --git a/src/Pages/DonorPage/style.module.css b/src/Pages/UsersPage/style.module.css similarity index 100% rename from src/Pages/DonorPage/style.module.css rename to src/Pages/UsersPage/style.module.css diff --git a/src/stories/AllDonorsPage.stories.js b/src/stories/AllDonorsPage.stories.js deleted file mode 100644 index a621136..0000000 --- a/src/stories/AllDonorsPage.stories.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import AllDonorsPage from '../Pages/AllDonorsPage'; - -export default { - title: 'AllDonorsPage', - component: AllDonorsPage, -}; - -export const presentation = () => ; diff --git a/src/stories/DonorPage.stories.js b/src/stories/DonorPage.stories.js deleted file mode 100644 index 31496ca..0000000 --- a/src/stories/DonorPage.stories.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import DonorPage from '../Pages/DonorPage'; - -export default { - title: 'DonorPage', - component: DonorPage, -}; - -export const presentation = () => ; diff --git a/src/stories/UserDetailPage.stories.js b/src/stories/UserDetailPage.stories.js new file mode 100644 index 0000000..d49d2be --- /dev/null +++ b/src/stories/UserDetailPage.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import UserDetailPage from '../Pages/UserDetailPage'; + +export default { + title: 'UserDetailPage', + component: UserDetailPage, +}; + +export const presentation = () => ; diff --git a/src/stories/UserIndexPage.stories.js b/src/stories/UserIndexPage.stories.js new file mode 100644 index 0000000..d9e59e6 --- /dev/null +++ b/src/stories/UserIndexPage.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import UserIndexPage from '../Pages/UsersPage'; + +export default { + title: 'UserIndexPage', + component: UserIndexPage, +}; + +export const presentation = () => ; From 8d1572d9f260b0ea9c602f83c9c7b5025527f905 Mon Sep 17 00:00:00 2001 From: Ren Burnett Date: Sat, 13 May 2023 15:29:54 -0700 Subject: [PATCH 2/5] tweaks --- .github/PULL_REQUEST_TEMPLATE.md | 8 +++----- README.md | 4 ++-- src/App.js | 5 +++-- src/Pages/UserDetailPage/index.js | 12 +++++++++--- src/Pages/{UsersPage => UserIndexPage}/index.js | 11 ++++++++--- .../{UsersPage => UserIndexPage}/style.module.css | 0 src/stories/UserDetailPage.stories.js | 2 +- src/stories/UserIndexPage.stories.js | 4 ++-- 8 files changed, 28 insertions(+), 18 deletions(-) rename src/Pages/{UsersPage => UserIndexPage}/index.js (94%) rename src/Pages/{UsersPage => UserIndexPage}/style.module.css (100%) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index b1b0387..88d0ff0 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.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 diff --git a/README.md b/README.md index 074b54c..0299d29 100644 --- a/README.md +++ b/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-app`) # Installation (Mac/OSX) diff --git a/src/App.js b/src/App.js index 0355bfa..14c1e92 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ import HomePage from './Pages/HomePage'; import SettingsPage from './Pages/SettingsPage'; import ReviewApplicationPage from './Pages/ReviewApplicationPage'; import LoginPage from './Pages/LoginPage/index'; -import AllDonorsPage from './Pages/UsersPage'; +import UserIndexPage from './Pages/UserIndexPage'; function App() { return ( @@ -21,7 +21,8 @@ function App() { } /> } /> } /> - } /> + } /> + } /> } />
diff --git a/src/Pages/UserDetailPage/index.js b/src/Pages/UserDetailPage/index.js index 0586b1b..4a5300b 100644 --- a/src/Pages/UserDetailPage/index.js +++ b/src/Pages/UserDetailPage/index.js @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import { v4 } from 'uuid'; +import { useParams } from 'react-router-dom'; import BreadCrumb from '../../Components/BreadCrumb'; import Navbar from '../../Components/Navbar'; @@ -85,8 +86,9 @@ const testData = [ }, ]; -// NOTE: user variant is either "donor", "client" or "all" -function UserDetailPage(userVariant = 'all') { +// NOTE: user variant can only be either "donor", "client" or "all" +function UserDetailPage() { + const { userVariant } = useParams(); console.log('userVariant:', userVariant); const entriesPerPage = 10; @@ -130,7 +132,11 @@ function UserDetailPage(userVariant = 'all') {
-

NEW APPLICATIONS (DONOR)

+

+ NEW APPLICATIONS ( + {userVariant} + ) +

-

ALL LISTS (DONOR)

+

+ ALL LISTS + {userVariant} +

; +export const presentation = () => ; diff --git a/src/stories/UserIndexPage.stories.js b/src/stories/UserIndexPage.stories.js index d9e59e6..a1bea39 100644 --- a/src/stories/UserIndexPage.stories.js +++ b/src/stories/UserIndexPage.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import UserIndexPage from '../Pages/UsersPage'; +import UserIndexPage from '../Pages/UserIndexPage'; export default { title: 'UserIndexPage', component: UserIndexPage, }; -export const presentation = () => ; +export const presentation = () => ; From 3758de4ebdfbe061e2397bc4cf50fe663180e934 Mon Sep 17 00:00:00 2001 From: Ren Burnett Date: Sat, 13 May 2023 15:58:09 -0700 Subject: [PATCH 3/5] tweaks --- README.md | 2 +- src/App.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 0299d29..b6eb5b3 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Step 0 is to [install the backend](https://github.com/FoodIsLifeBGP/banana-rails 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-app`) +otherwise you can just navigate to your project's root folder in the terminal (e.g. `cd ~/Projects/banana-admin`) # Installation (Mac/OSX) diff --git a/src/App.js b/src/App.js index 14c1e92..b01084b 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,6 @@ function App() { } /> } /> } /> - } /> } /> } /> From ac0c6d9e6f8c49ac49a74f077eb6b4d94e91e02e Mon Sep 17 00:00:00 2001 From: Ren Burnett Date: Sat, 13 May 2023 16:10:39 -0700 Subject: [PATCH 4/5] tweaks --- src/Pages/UserDetailPage/index.js | 2 +- src/Pages/UserIndexPage/index.js | 22 ++++++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/Pages/UserDetailPage/index.js b/src/Pages/UserDetailPage/index.js index 4a5300b..b87842b 100644 --- a/src/Pages/UserDetailPage/index.js +++ b/src/Pages/UserDetailPage/index.js @@ -142,7 +142,7 @@ function UserDetailPage() {
diff --git a/src/Pages/UserIndexPage/index.js b/src/Pages/UserIndexPage/index.js index 3a8c11b..3a4bcdc 100644 --- a/src/Pages/UserIndexPage/index.js +++ b/src/Pages/UserIndexPage/index.js @@ -85,10 +85,18 @@ const testData = [ status: 'active', }, ]; -// NOTE: user variant can only be either "donor", "client" or "all" +// NOTE: user variant can only be either "donors", "clients" or "all" function UserIndexPage() { const { userVariant } = useParams(); - console.log('userVariant:', userVariant); + let userVariantText = userVariant; + + if (userVariant === 'all') { + userVariantText = 'Donors & Clients'; + } else { + userVariantText = userVariant.charAt(0).toUpperCase() + userVariant.slice(1); + } + + console.log('userVariant:', userVariantText); const entriesPerPage = 10; const [displayData, setDisplayData] = useState([]); @@ -118,9 +126,8 @@ function UserIndexPage() { }; const newDonorPageBCT = [ - { pageName: 'Home', url: 'localhost:3000' }, - { pageName: 'Donor', url: 'localhost:3000' }, - { pageName: 'All Lists', url: 'localhost:3000' }, + { pageName: 'Home', url: '/' }, + { pageName: userVariantText, url: '/' }, ]; const paginate = (pageNumber) => setCurrentPage(pageNumber); @@ -132,15 +139,14 @@ function UserIndexPage() {

- ALL LISTS - {userVariant} + {userVariantText}

From 07f939582612d61d0a56fc01f95b087fa3383377 Mon Sep 17 00:00:00 2001 From: Ren Burnett Date: Mon, 29 May 2023 12:38:25 -0700 Subject: [PATCH 5/5] general styling updates --- src/App.js | 6 +- src/Components/ApplicationCard/index.js | 4 +- .../{style.module.css => style.module.scss} | 10 +- src/Components/ApplicationStatusForm/index.js | 2 +- .../{style.module.css => style.module.scss} | 0 src/Components/BreadCrumb/style.module.scss | 1 + src/Components/Button/style.module.css | 1 - src/Components/DonationCard/index.js | 2 +- src/Components/DonationCard/style.module.css | 4 +- src/Components/Icon/index.js | 16 +-- src/Components/Input/index.js | 2 +- src/Components/Navbar/index.js | 10 +- .../{style.module.css => style.module.scss} | 0 src/Components/Paginator/index.js | 7 +- src/Components/ProfilePicture/index.js | 2 +- .../{style.module.css => style.module.scss} | 0 src/Components/Search/index.js | 2 +- .../{style.module.css => style.module.scss} | 5 +- src/Components/Status/index.js | 60 ++------ src/Components/Status/style.module.css | 135 ------------------ src/Components/Status/style.module.scss | 33 +++++ src/Components/SuccessPopUp/index.js | 2 +- .../{style.module.css => style.module.scss} | 0 src/Components/UserList/index.js | 2 +- .../{style.module.css => style.module.scss} | 0 .../index.js | 2 +- .../style.module.scss} | 1 - .../index.js | 70 +++++---- .../style.module.scss} | 27 +++- src/Pages/ErrorPage/index.js | 7 +- src/Pages/ErrorPage/style.module.scss | 20 +-- src/Pages/SettingsPage/index.js | 2 +- .../{style.module.css => style.module.scss} | 0 src/stories/Icon.stories.js | 2 +- src/stories/UserDetailPage.stories.js | 8 +- src/stories/UserIndexPage.stories.js | 8 +- 36 files changed, 174 insertions(+), 279 deletions(-) rename src/Components/ApplicationCard/{style.module.css => style.module.scss} (93%) rename src/Components/ApplicationStatusForm/{style.module.css => style.module.scss} (100%) rename src/Components/Navbar/{style.module.css => style.module.scss} (100%) rename src/Components/ProfilePicture/{style.module.css => style.module.scss} (100%) rename src/Components/Search/{style.module.css => style.module.scss} (90%) delete mode 100644 src/Components/Status/style.module.css create mode 100644 src/Components/Status/style.module.scss rename src/Components/SuccessPopUp/{style.module.css => style.module.scss} (100%) rename src/Components/UserList/{style.module.css => style.module.scss} (100%) rename src/Pages/{UserDetailPage => ApplicationDetailPage}/index.js (99%) rename src/Pages/{UserDetailPage/style.module.css => ApplicationDetailPage/style.module.scss} (97%) rename src/Pages/{UserIndexPage => ApplicationIndexPage}/index.js (74%) rename src/Pages/{UserIndexPage/style.module.css => ApplicationIndexPage/style.module.scss} (65%) rename src/Pages/SettingsPage/{style.module.css => style.module.scss} (100%) diff --git a/src/App.js b/src/App.js index b01084b..c5537cb 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,8 @@ import HomePage from './Pages/HomePage'; import SettingsPage from './Pages/SettingsPage'; import ReviewApplicationPage from './Pages/ReviewApplicationPage'; import LoginPage from './Pages/LoginPage/index'; -import UserIndexPage from './Pages/UserIndexPage'; +import ApplicationIndexPage from './Pages/ApplicationIndexPage'; +import ApplicationDetailPage from './Pages/ApplicationDetailPage'; function App() { return ( @@ -21,7 +22,8 @@ function App() { } /> } /> } /> - } /> + } /> + } /> } />
diff --git a/src/Components/ApplicationCard/index.js b/src/Components/ApplicationCard/index.js index 741ae92..672f7be 100644 --- a/src/Components/ApplicationCard/index.js +++ b/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 (
- +
{userCount.toLocaleString(undefined, { minimumIntegerDigits: 2, useGrouping: false })} diff --git a/src/Components/ApplicationCard/style.module.css b/src/Components/ApplicationCard/style.module.scss similarity index 93% rename from src/Components/ApplicationCard/style.module.css rename to src/Components/ApplicationCard/style.module.scss index 739ef87..4f9514f 100644 --- a/src/Components/ApplicationCard/style.module.css +++ b/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 { diff --git a/src/Components/ApplicationStatusForm/index.js b/src/Components/ApplicationStatusForm/index.js index b83d335..74e18ef 100644 --- a/src/Components/ApplicationStatusForm/index.js +++ b/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 ( diff --git a/src/Components/ApplicationStatusForm/style.module.css b/src/Components/ApplicationStatusForm/style.module.scss similarity index 100% rename from src/Components/ApplicationStatusForm/style.module.css rename to src/Components/ApplicationStatusForm/style.module.scss diff --git a/src/Components/BreadCrumb/style.module.scss b/src/Components/BreadCrumb/style.module.scss index 081f645..8ed2563 100644 --- a/src/Components/BreadCrumb/style.module.scss +++ b/src/Components/BreadCrumb/style.module.scss @@ -4,6 +4,7 @@ background: white; display: flex; padding: 2rem 0rem; + list-style: none; } .linkStyle { diff --git a/src/Components/Button/style.module.css b/src/Components/Button/style.module.css index 6f20aef..fed77e9 100644 --- a/src/Components/Button/style.module.css +++ b/src/Components/Button/style.module.css @@ -3,7 +3,6 @@ .buttonContainer{ - width: 150px; height: 70px; display: flex; justify-content: center; diff --git a/src/Components/DonationCard/index.js b/src/Components/DonationCard/index.js index 0b7b82a..8e3ecff 100644 --- a/src/Components/DonationCard/index.js +++ b/src/Components/DonationCard/index.js @@ -29,7 +29,7 @@ function DonationCard(props) { {`${fractionDonated}%`} - + diff --git a/src/Components/DonationCard/style.module.css b/src/Components/DonationCard/style.module.css index e491a92..8325984 100644 --- a/src/Components/DonationCard/style.module.css +++ b/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; } - + diff --git a/src/Components/Icon/index.js b/src/Components/Icon/index.js index dcaa30a..6988554 100644 --- a/src/Components/Icon/index.js +++ b/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 ( - - ); - } - return ( - + return fileRef ? ( + {fileRef} + ) : ( + ); } Icon.propTypes = { name: PropTypes.string.isRequired, - size: PropTypes.number.isRequired, + }; export default Icon; diff --git a/src/Components/Input/index.js b/src/Components/Input/index.js index 7747f84..a160d80 100644 --- a/src/Components/Input/index.js +++ b/src/Components/Input/index.js @@ -20,7 +20,7 @@ function Input(props) { const renderIcon = () => { if (iconName && iconName !== '') { return ( - + ); } return null; diff --git a/src/Components/Navbar/index.js b/src/Components/Navbar/index.js index 36f3dcc..71b7ed4 100644 --- a/src/Components/Navbar/index.js +++ b/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) { - + @@ -37,13 +37,13 @@ function Navbar(props) { diff --git a/src/Components/Navbar/style.module.css b/src/Components/Navbar/style.module.scss similarity index 100% rename from src/Components/Navbar/style.module.css rename to src/Components/Navbar/style.module.scss diff --git a/src/Components/Paginator/index.js b/src/Components/Paginator/index.js index a13a20a..5af960a 100644 --- a/src/Components/Paginator/index.js +++ b/src/Components/Paginator/index.js @@ -19,7 +19,7 @@ function Paginator(props) { return ( priorPage(currentPage)} disabled={currentPage === 1}> - + « @@ -30,8 +30,9 @@ function Paginator(props) { onClick={() => paginate(number)} className={number === currentPage ? 'activeSquare paginationItemStyle' : 'paginationItemStyle'} active={number === currentPage} + key={number + 1} > - + {number} @@ -39,7 +40,7 @@ function Paginator(props) { ))} nextPage(currentPage)} disabled={currentPage === pages}> - + » diff --git a/src/Components/ProfilePicture/index.js b/src/Components/ProfilePicture/index.js index 1d269fa..3699dd7 100644 --- a/src/Components/ProfilePicture/index.js +++ b/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'); diff --git a/src/Components/ProfilePicture/style.module.css b/src/Components/ProfilePicture/style.module.scss similarity index 100% rename from src/Components/ProfilePicture/style.module.css rename to src/Components/ProfilePicture/style.module.scss diff --git a/src/Components/Search/index.js b/src/Components/Search/index.js index 39eecbd..20c0c07 100644 --- a/src/Components/Search/index.js +++ b/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(''); diff --git a/src/Components/Search/style.module.css b/src/Components/Search/style.module.scss similarity index 90% rename from src/Components/Search/style.module.css rename to src/Components/Search/style.module.scss index c837041..f2a4951 100644 --- a/src/Components/Search/style.module.css +++ b/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); diff --git a/src/Components/Status/index.js b/src/Components/Status/index.js index 5976e55..90d7479 100644 --- a/src/Components/Status/index.js +++ b/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 ( -
-

Pending

-
- ); - } - - if (statusState === 'active') { - return ( -
-

Active

-
- ); - } - - if (statusState === 'inactive') { - return ( -
-

Inactive

-
- ); - } - - if (statusState === 'incomplete') { - return ( -
-

Incomplete

-
- ); - } - - if (statusState === 'suspended') { - return ( -
-

Suspended

-
- ); - } - - if (statusState === 'closed') { - return ( -
-

Closed

-
- ); - } + return ( +
+ {parsedState} +
+ ); } Status.propTypes = { statusState: PropTypes.string.isRequired, }; - -export default Status; diff --git a/src/Components/Status/style.module.css b/src/Components/Status/style.module.css deleted file mode 100644 index 111ac0f..0000000 --- a/src/Components/Status/style.module.css +++ /dev/null @@ -1,135 +0,0 @@ -@import "../../colors.module.css"; -@import "../../fonts.module.css"; - - - .text { - position: static; - width: 67px; - height: 27px; - left: 10px; - top: 5px; - - font-family: Open Sans; - font-style: normal; - font-weight: bold; - font-size: 20px; - line-height: 27px; - display: flex; - align-items: center; - letter-spacing: 0.04em; - - /* Inside Auto Layout */ - - flex: none; - order: 0; - flex-grow: 0; - margin: 10px 0px; - } - - .whiteText { - color: var(--WHITE); - } - - .navyBlueText { - color: var(--NAVY_BLUE); - } - -.pendingDiv { - /* Auto Layout */ - - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 106px; - height: 37px; - /* left: 1108px; - top: 0px; */ - - /* Banana Yellow */ - - background-color: var(--BANANA_YELLOW); - border-radius: 8px; -} - -.activeDiv { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 87px; - height: 37px; - /* left: 1210px; - top: 485px; */ - - background: var(--GREEN); - border-radius: 8px; -} - -.inactiveDiv { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 106px; - height: 37px; - /* left: 1203px; - top: 740px; */ - - background: #C8CED3; - border-radius: 8px; -} - -.incompleteDiv { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 141px; - height: 37px; - /* left: 1188.5px; - top: 825px; */ - - background: var(--ORANGE); - border-radius: 8px; -} - -.suspendedDiv { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 136px; - height: 37px; - /* left: 1189.5px; - top: 910px; */ - - background: var(--SUSPENDED_RED); - border-radius: 8px; -} - -.closedDiv { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 10px; - - /* position: absolute; */ - width: 90px; - height: 37px; - /* left: 1211px; - top: 1167px; */ - - background: #6D6D6D; - border-radius: 8px; -} \ No newline at end of file diff --git a/src/Components/Status/style.module.scss b/src/Components/Status/style.module.scss new file mode 100644 index 0000000..ccce92b --- /dev/null +++ b/src/Components/Status/style.module.scss @@ -0,0 +1,33 @@ +@import "../../colors.module.css"; +@import "../../fonts.module.css"; + +.applicationStatusLabel { + padding: 5px 10px; + border-radius: 8px; + width: fit-content; + + &.pending { + color: var(--BLACK); + background-color: var(--BANANA_YELLOW); + } + &.active { + color: var(--BLACK); + background-color: var(--GREEN); + } + &.inactive { + color: var(--BLACK); + background-color: #C8CED3; + } + &.incomplete { + color: var(--BLACK); + background-color: var(--ORANGE); + } + &.suspended { + color: var(--BLACK); + background-color: var(--SUSPENDED_RED); + } + &.closed { + color: var(--BLACK); + background-color: #6D6D6D; + } +} \ No newline at end of file diff --git a/src/Components/SuccessPopUp/index.js b/src/Components/SuccessPopUp/index.js index f022a4b..4bdf5a7 100644 --- a/src/Components/SuccessPopUp/index.js +++ b/src/Components/SuccessPopUp/index.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import styles from './style.module.css'; +import styles from './style.module.scss'; function SuccessPopUp(props) { const [show, setShow] = useState(true); diff --git a/src/Components/SuccessPopUp/style.module.css b/src/Components/SuccessPopUp/style.module.scss similarity index 100% rename from src/Components/SuccessPopUp/style.module.css rename to src/Components/SuccessPopUp/style.module.scss diff --git a/src/Components/UserList/index.js b/src/Components/UserList/index.js index 25e3074..639607f 100644 --- a/src/Components/UserList/index.js +++ b/src/Components/UserList/index.js @@ -2,7 +2,7 @@ import React from 'react'; // eslint-disable-next-line no-unused-vars import PropTypes from 'prop-types'; import { v4 } from 'uuid'; -import styles from './style.module.css'; +import styles from './style.module.scss'; import Status from '../Status'; const testData = [ diff --git a/src/Components/UserList/style.module.css b/src/Components/UserList/style.module.scss similarity index 100% rename from src/Components/UserList/style.module.css rename to src/Components/UserList/style.module.scss diff --git a/src/Pages/UserDetailPage/index.js b/src/Pages/ApplicationDetailPage/index.js similarity index 99% rename from src/Pages/UserDetailPage/index.js rename to src/Pages/ApplicationDetailPage/index.js index b87842b..6893e1f 100644 --- a/src/Pages/UserDetailPage/index.js +++ b/src/Pages/ApplicationDetailPage/index.js @@ -8,7 +8,7 @@ import Search from '../../Components/Search'; import Paginator from '../../Components/Paginator'; import Status from '../../Components/Status'; -import styles from './style.module.css'; +import styles from './style.module.scss'; // TODO: Pull real data, not dummy data const testData = [ diff --git a/src/Pages/UserDetailPage/style.module.css b/src/Pages/ApplicationDetailPage/style.module.scss similarity index 97% rename from src/Pages/UserDetailPage/style.module.css rename to src/Pages/ApplicationDetailPage/style.module.scss index 0689377..04955cd 100644 --- a/src/Pages/UserDetailPage/style.module.css +++ b/src/Pages/ApplicationDetailPage/style.module.scss @@ -29,7 +29,6 @@ h2 { } .viewAllButton { - width: 14rem; height: 4.5rem; display: flex; justify-content: center; diff --git a/src/Pages/UserIndexPage/index.js b/src/Pages/ApplicationIndexPage/index.js similarity index 74% rename from src/Pages/UserIndexPage/index.js rename to src/Pages/ApplicationIndexPage/index.js index 3a4bcdc..ba8b3fa 100644 --- a/src/Pages/UserIndexPage/index.js +++ b/src/Pages/ApplicationIndexPage/index.js @@ -7,8 +7,8 @@ import Navbar from '../../Components/Navbar'; import Search from '../../Components/Search'; import Paginator from '../../Components/Paginator'; import Status from '../../Components/Status'; - -import styles from './style.module.css'; +import styles from './style.module.scss'; +import ApiService from '../../Services/ApiService'; // TODO: Pull real data, not dummy data const testData = [ @@ -85,10 +85,12 @@ const testData = [ status: 'active', }, ]; -// NOTE: user variant can only be either "donors", "clients" or "all" -function UserIndexPage() { + +// NOTE: `userVariant` can only be either "donors", "clients" or "all" +function ApplicationIndexPage() { const { userVariant } = useParams(); let userVariantText = userVariant; + const { axiosRequest } = ApiService(); if (userVariant === 'all') { userVariantText = 'Donors & Clients'; @@ -96,7 +98,21 @@ function UserIndexPage() { userVariantText = userVariant.charAt(0).toUpperCase() + userVariant.slice(1); } - console.log('userVariant:', userVariantText); + const fetchUsers = async () => { + try { + const response = await axiosRequest( + 'GET', + 'clients', + ); + console.log('response:', response); + } catch (error) { + console.log('error:', error); + } + }; + + useEffect(() => { + fetchUsers(); + }, []); const entriesPerPage = 10; const [displayData, setDisplayData] = useState([]); @@ -146,30 +162,34 @@ function UserIndexPage() {
{/* Replace table with dynamic table component when it's ready */} - - - - - - - - - {/* Replace testData.map with line below for production - {data.map((entry, index) => { */} - {displayData.map((entry, index) => ( - - - - - - +
No.NameBusiness NameDate RegisteredStatus
{index + 1}{entry.name}{entry.businessName}{entry.dateSubmitted}
+ + + + + + + - ))} + {/* Replace testData.map with line below for production + {data.map((entry, index) => { */} + {displayData.map((entry, index) => ( + + + + + + + + ))} +
No.NameBusiness NameDate RegisteredStatus
{index + 1}{entry.name}{entry.businessName}{entry.dateSubmitted} + +
{ document.body.classList.add('theBody'); }, []); @@ -32,9 +29,9 @@ function ErrorPage() {
- +
- +
diff --git a/src/Pages/ErrorPage/style.module.scss b/src/Pages/ErrorPage/style.module.scss index 3e8f0b4..464dae7 100644 --- a/src/Pages/ErrorPage/style.module.scss +++ b/src/Pages/ErrorPage/style.module.scss @@ -92,37 +92,37 @@ p{ .sb-show-main.sb-main-padded.theBody{ padding: 0rem; } - + .body{ padding: 5vh 0px; display: flex; justify-content: center; - align-items: start; + align-items: flex-start; } - + .rightBody{ display: flex; } - + .buttonContainer{ display: flex; justify-content: center; } - + h1, p { color: var(--NAVY_BLUE); text-align: center; } - + h1 { font: "open sans"; font-size: 5rem; } - + p{ font-size: 1.5rem; } - + .goBackButton{ width: 21vw; height: 7vw; @@ -139,7 +139,7 @@ p{ border-width: 0px; margin: 10px 10px 10px 1vw; } - + .homeButton{ width: 21vw; height: 7vw; @@ -162,7 +162,7 @@ p{ left: -60px; top: 349px; } - + .bottomBar{ height: 15vh; background-color: var(--BANANA_YELLOW); diff --git a/src/Pages/SettingsPage/index.js b/src/Pages/SettingsPage/index.js index c261665..a70ee10 100644 --- a/src/Pages/SettingsPage/index.js +++ b/src/Pages/SettingsPage/index.js @@ -2,7 +2,7 @@ import React from 'react'; import Navbar from '../../Components/Navbar'; import ProfilePicture from '../../Components/ProfilePicture'; import Button from '../../Components/Button'; -import styles from './style.module.css'; +import styles from './style.module.scss'; const userStub = { firstName: 'John', diff --git a/src/Pages/SettingsPage/style.module.css b/src/Pages/SettingsPage/style.module.scss similarity index 100% rename from src/Pages/SettingsPage/style.module.css rename to src/Pages/SettingsPage/style.module.scss diff --git a/src/stories/Icon.stories.js b/src/stories/Icon.stories.js index f649a76..a844dbe 100644 --- a/src/stories/Icon.stories.js +++ b/src/stories/Icon.stories.js @@ -6,4 +6,4 @@ export default { component: Icon, }; -export const presentation = () => ; +export const presentation = () => ; diff --git a/src/stories/UserDetailPage.stories.js b/src/stories/UserDetailPage.stories.js index 3f53099..faeda6a 100644 --- a/src/stories/UserDetailPage.stories.js +++ b/src/stories/UserDetailPage.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import UserDetailPage from '../Pages/UserDetailPage'; +import ApplicationDetailPage from '../Pages/ApplicationDetailPage'; export default { - title: 'UserDetailPage', - component: UserDetailPage, + title: 'ApplicationDetailPage', + component: ApplicationDetailPage, }; -export const presentation = () => ; +export const presentation = () => ; diff --git a/src/stories/UserIndexPage.stories.js b/src/stories/UserIndexPage.stories.js index a1bea39..78077be 100644 --- a/src/stories/UserIndexPage.stories.js +++ b/src/stories/UserIndexPage.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import UserIndexPage from '../Pages/UserIndexPage'; +import ApplicationIndexPage from '../Pages/ApplicationIndexPage'; export default { - title: 'UserIndexPage', - component: UserIndexPage, + title: 'ApplicationIndexPage', + component: ApplicationIndexPage, }; -export const presentation = () => ; +export const presentation = () => ;