feat(Donor setup after sign up): [FAIR-1]

client/src/App.js

@@ -8,13 +8,15 @@ import './App.scss';
 
 import {AuthContextProvider, AuthProtectedRoute} from './AuthContext';
 import Events from './Events/Events';
-import Donors from './Donors/Donors';
 import Header from './Header';
 import FooterPage from './FooterPage';
 import Home from './Home';
 import Login from './Login';
 import Passwords from './Passwords';
 import Register from './Register';
+import Students from './Students/Students';
+import NonProfitPartners from './NonProfitPartner/NonProfitPartners';
+import Donors from './Donors/Donors';
 import Organizations from './Organizations/Organizations';
 import ProgramDirectors from './ProgramDirectors/ProgramDirectors';
 import Setup from './Setup/Setup';
@@ -37,6 +39,15 @@ function App() {
           <Route path="/events">
             <Events />
           </Route>
+          <Route path="/students">
+            <Students />
+          </Route>
+          <Route path="/donors">
+            <Donors />
+          </Route>
+          <Route path="/nonprofitpartners">
+            <NonProfitPartners />
+          </Route>
           <Route path="/organizations">
             <Organizations />
           </Route>

client/src/Donor.scss

@@ -0,0 +1,21 @@
+.heading{
+    color: #212529;
+}
+.requiredResponse{
+    color: red;
+}
+.description{
+    color: #212529;
+}
+.form-control{
+    margin-bottom: 0em;
+}
+.form{
+    background: #F8F9FA;
+    border-radius:24px ;
+    margin-bottom: 5em;
+    height: 100%;
+}
+button{
+    margin-bottom: 2em;
+}

client/src/Donors/Donors.js

@@ -2,7 +2,6 @@ import { Route, Switch, useRouteMatch } from "react-router-dom";
 
 import DonorsList from './DonorsList';
 import DonorsForm from './DonorsForm';
-
 function Donors() {
     const { path } = useRouteMatch();
     return (

client/src/Donors/DonorsForm.js

@@ -5,6 +5,7 @@ import Api from "../Api";
 function DonorsForm() {
     const {id} = useParams();
     const history = useHistory();
+    const [users, setUsers] = useState([]);
     const [aDonor, setDonor] = useState({
         donorType: '',
         companyName: '',
@@ -19,7 +20,22 @@ function DonorsForm() {
             Api.donors.get(id).then((response) => setDonor(response.data));
     } 
 }, []);
-
+    useEffect(function () {
+    Promise.all([Api.users.index()]).then((responses) => {
+        setUsers(responses[0].data);
+        if (id) {
+            Api.donors.get(id).then((response) => setDonor(response.data));
+        } else {
+            const newDonor = {
+                UserId: '',
+            };
+            if (responses[0].data.length > 0) {
+                newDonor.UserId = responses[0].data[0].id;
+            }
+            setDonor(newDonor);
+        }
+    });
+}, [id]);
     function onChange(donor) {
         const newDonor= {...aDonor};
         newDonor[donor.target.name] = donor.target.value;

client/src/Donors/DonorsList.js

@@ -1,12 +1,10 @@
-import { useAuthContext } from "../AuthContext";
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Api from '../Api';
 
 function DonorsList() {
-    const { user } = useAuthContext();
     const [aDonor, setDonor] = useState([]);
-
+    
     useEffect(function () {
         Api.donors.index().then(response => setDonor(response.data));
     }, []);
@@ -26,7 +24,7 @@ function DonorsList() {
     return (
         <main className="container">
             <h1>Donor Setup (Setting up your Profile)</h1>
-            <p>Hello {user && user.firstName}, thanks for joining FairPlay in our mission to bridge the digital divide. As a Donor, we will need some information from you. Please fill the following form. </p>
+
 
             {/*
             Not needed 
@@ -41,12 +39,12 @@ function DonorsList() {
             <ul>
                 {aDonor.map(s => (
                     <li>
-                        <p><Link to={`/donors/${s.id}/edit`}>{s.donorType}, {s.webLink}, {s.createdAt}</Link></p>
+                        <p><Link to={`/donors/${s.id}/edit`}>{s.firstName} {s.lastName} is a donor for {s.companyName}</Link></p>
                         <p><button onClick={() => onDelete(s)} type="button" className="btn btn-sm btn-danger">Delete</button></p>
                     </li>
                 ))}
             </ul>
         </main>
     );
 }
-export default DonorsList;
+export default DonorsList;

client/src/Header.js

@@ -54,6 +54,10 @@ function Header() {
             <li className="nav-item active">
               <Link className="nav-link" aria-current="page" to="/programDirectors">Program Directors List</Link>
             </li>
+            <li className="nav-item active">
+              <Link className="nav-link" aria-current="page" to="/donors">donors List</Link>
+            </li>
+
             <div className="flex-grow-1 d-flex justify-content-end">
               {user && (
                 <li className="nav-item">

client/src/NonProfitPartner/NonProfitPartnerForm.js

@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import { useHistory, useParams} from "react-router-dom";
+import Api from "../Api";
+
+function NonProfitPartnersForm() {
+    const {id} = useParams();
+    const history = useHistory();
+    const [anNonProfitPartner, setNonProfitPartner] = useState({
+        directorType: '',
+        userOrgRole: '',
+    });
+
+    useEffect(function(){
+        if(id){
+            Api.nonprofitpartner.get(id).then((response) => setNonProfitPartner(response.data));
+    } 
+}, []);
+
+    function onChange(nonprofitpartner) {
+        const newNonProfitPartner= {...anNonProfitPartner};
+        newNonProfitPartner[nonprofitpartner.target.name] = nonprofitpartner.target.value;
+        setNonProfitPartner(newNonProfitPartner);
+    }
+
+    async function onSubmit(nonprofitpartner) {
+        nonprofitpartner.preventDefault();
+        try {
+            if(id){
+            await Api.nonprofitpartners.update(id, anNonProfitPartner);
+            }else{
+            await Api.nonprofitpartners.create(anNonProfitPartner);
+        }
+            history.push('/nonprofitpartners');
+        } catch (error) {
+            console.log(error);
+        }
+    }
+    return (
+        <main className="container">
+            <h1>Non-profit-partner Creation Form</h1>
+            <form onSubmit={onSubmit}>
+                <div className="mb-3">
+                    <label className="form-label">Non-profit-partner Name</label>
+                    <input className="form-control" type="text" name="directorType" value={anNonProfitPartner.directorType} onChange={onChange} />
+                </div>
+                <div className="mb-3">
+                    <label className="form-label">Event Type</label>
+                    <input className="form-control" type="text" name="userOrgRole" value={anNonProfitPartner.userOrgRole} onChange={onChange} />
+                </div>
+                <button className="btn btn-primary" type="submit">Submit</button>
+            </form>
+            <p>{JSON.stringify(anNonProfitPartner)}</p>
+        </main>
+    );
+}
+
+export default NonProfitPartnersForm;

client/src/NonProfitPartner/NonProfitPartnerList.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Api from '../Api';
+
+function NonProfitPartnersList() {
+    const [anNonProfitPartner, setNonProfitPartner] = useState([]);
+
+    useEffect(function () {
+        Api.nonprofitpartners.index().then(response => setNonProfitPartner(response.data));
+    }, []);
+
+    function onDelete(anNonProfitPartner){
+        if(window.confirm(`Are you sure you wish to delete ${anNonProfitPartner.directorType}?`)){
+            //we will execute code to delete the section
+            Api.nonprofitpartners.delete(anNonProfitPartner.id).then(function(){
+                /*Filtering the sections list, keeping every section
+                 that does not match the one we are deleting*/
+                const newNonProfitPartner = anNonProfitPartner.filter(s => s.id !== anNonProfitPartner.id);
+                setNonProfitPartner(newNonProfitPartner);
+            });
+        }
+    }
+
+    return (
+        <main className="container">
+            <h1>NonProfitPartner List</h1>
+            <Link className="btn btn-primary" to="/nonprofitpartners/new">New</Link>
+            <ul>
+                {anNonProfitPartner.map(s => (
+                    <li>
+                        <p><Link to={`/nonprofitpartners/${s.id}/edit`}>{s.directorType}, {s.userOrgRole}</Link></p>
+                        <p><button onClick={() => onDelete(s)} type="button" className="btn btn-sm btn-danger">Delete</button></p>
+                    </li>
+                ))}
+            </ul>
+        </main>
+    );
+}
+export default NonProfitPartnersList;

client/src/NonProfitPartner/NonProfitPartners.js

@@ -0,0 +1,24 @@
+import { Route, Switch, useRouteMatch } from "react-router-dom";
+
+//import NonProfitPartnerList from './NonProfitPartnerList';
+import NonProfitPartnerForm from './NonProfitPartnerForm';
+
+function NonProfitPartners() {
+    const { path } = useRouteMatch();
+    return (
+        <Switch>
+            <Route exact path={path}>
+                <NonProfitPartnerList />
+            </Route>
+            <Route path={`${path}/new`}>
+                <NonProfitPartnerForm />
+            </Route>
+            <Route path={`${path}/:id/edit`}>
+                <NonProfitPartnerForm />
+            </Route>
+        </Switch>
+
+    );
+}
+
+export default NonProfitPartners;

client/src/Register.js

@@ -69,6 +69,7 @@ function Register() {
                   <option value="donor">Donor</option>
                 </select>
               </div>
+
               <div className="form-group">
                 <div className="row">
                   <div className="col-md-6">