Adding user context for all components😍 & updating reviews

frontend/grad-admissions-hub-app/src/App.css

@@ -73,7 +73,7 @@ main {
   flex-wrap: wrap;
   top: 50%;
   left: 50%;
-  /* bring your own prefixes */
+  max-height: 85vh;
   transform: translate(-50%, -50%);
 }
 
@@ -111,7 +111,6 @@ main {
   border-radius: 20px;
   box-shadow: 2px 1px 20px 2px #848484;
   min-width: 40rem;
-  max-width: 560px;
   padding: 25px;
 }
 
@@ -126,6 +125,10 @@ main {
   justify-content: center;
 }
 
+.applications {
+  flex-basis: 100%;
+}
+
 .create-review-card {
   display: flex;
   flex-direction: column;
@@ -219,7 +222,7 @@ main {
   border-radius: 20px;
   box-shadow: 2px 1px 20px 2px #848484;
   min-width: 42rem;
-  max-width: 560px;
+  max-width: 800px;
   padding: 25px;
   overflow-y: scroll;
   max-height: 85vh;
@@ -456,18 +459,18 @@ main {
 .application-list {
   display: flex;
   flex-direction: column;
-  min-width: 40em;
+  min-width: 40rem;
+  padding: 0;
 }
 
 .application-preview {
-  width: 100%;
+  flex-basis: 100%;
   height: 2em;
   border-radius: 20px;
   background-color: var(--bg-primary);
   box-shadow: 2px 1px 20px 2px #848484;
-  margin: 10px;
+  margin: 10px 0px;
   padding: 10px;
-  width: 40em;
   transition: all 0.3s ease-in-out;
   color: var(--sage-green);
   cursor: pointer;

frontend/grad-admissions-hub-app/src/App.js

@@ -1,4 +1,6 @@
 import "./App.css";
+import React, { useState, useEffect } from 'react';
+
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import Home from "./Pages/Home";
 import ApplicantSignup from "./Pages/ApplicantSignup";
@@ -11,30 +13,62 @@ import Profile from './Pages/Profile';
 import Navbar from "./Components/Navbar/Navbar";
 import Application from './Pages/Application';
 
-
-import Amplify from 'aws-amplify';
+import Amplify, { Auth } from 'aws-amplify';
 import awsconfig from './aws-exports';
 
 Amplify.configure(awsconfig);
 
+export const UserContext = React.createContext();
+
+const initialUserState = {
+  loggedIn: false,
+  profile: '',
+  id: ''
+}
+
 function App() {
+  const [userState, setUserState] = useState(initialUserState);
+
+  useEffect(() => {
+    async function getAuth() {
+      try {
+        await Auth.currentSession().then((res) => {
+          console.log(res);
+          const payload = res.idToken.payload;
+
+          const newUser = {
+            loggedIn: true,
+            profile: payload.profile,
+            id: payload.email
+          }
+          setUserState(newUser);
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    }
+    getAuth();
+  }, [])
+
   return (
-    <Router>
-      <div>
-        <Navbar />
-        <Switch>
-          <Route path="/about" component={About} />
-          <Route path="/proflogin" component={ProfLogin} />
-          <Route path="/" exact component={Home} />
-          <Route path="/applicantSignup" component={ApplicantSignup} />
-          <Route path="/submission" component={Submission} />
-          <Route path="/profile" component={Profile} />
-          <Route path="/application/:id" component={Application} />
-          {/* <Route path="/professor" component={Professor} />
+    <UserContext.Provider value={{userState, setUserState}}>
+      <Router>
+        <div>
+          <Navbar />
+          <Switch>
+            <Route path="/about" component={About} />
+            <Route path="/proflogin" component={ProfLogin} />
+            <Route path="/" exact component={Home} />
+            <Route path="/applicantSignup" component={ApplicantSignup} />
+            <Route path="/submission" component={Submission} />
+            <Route path="/profile" component={Profile} />
+            <Route path="/application/:id" component={Application} />
+            {/* <Route path="/professor" component={Professor} />
           <Route path="/applicant" component={Applicant} /> */}
-        </Switch>
-      </div>
-    </Router>
+          </Switch>
+        </div>
+      </Router>
+    </UserContext.Provider>
   );
 }
 

frontend/grad-admissions-hub-app/src/Components/CreateApplication.js

@@ -45,7 +45,7 @@ const orgSelectedProf = {
     id: ''
 }
 
-const CreateApplication = () => {
+const CreateApplication = ({applicantId}) => {
     const [selectedProf, setSelectedProf] = useState(orgSelectedProf);
     const [profs, setProfs] = useState(orgProfs);
 
@@ -103,37 +103,10 @@ const CreateApplication = () => {
         areasOfResearch: []
     })
 
-    const requestBody = `{
-        "Application": {
-				"applicant": "2bfaa7bd-c1ba-4a06-b46a-058fc858cfee",
-				"professor": "328e1dd4-7928-4d7e-a538-f7a66cff8d11",
-				"dateSubmitted": "31/12/1998",
-				"areasOfResearch": [${state.areasOfResearch}],
-				"resumeDocumentId": "23",
-				"diplomaDocumentId": "45",
-				"auditDocumentId": "45",
-				"reviews": []
-			}
-		}
-    }`
-
     const handleSelect = (prof) => {
         setSelectedProf(prof);
     }
 
-    const onNameChangeHandle = (event) => {
-        const newState = { ...state, name: event.target.value };
-        setState(newState);
-    }
-
-    const handleButton = (event) => {
-        console.log("Application Sent!");
-        fetch("https://j2ofh2owcb.execute-api.us-east-1.amazonaws.com/main/graphql", {
-            method: 'POST',
-            body: requestBody
-
-        })
-    }
     const onCheckBoxChange = (event) => {
         console.log(event.target.name);
         console.log(event.target.checked);
@@ -162,8 +135,34 @@ const CreateApplication = () => {
 
     }
 
-    const handleApply = (e) => {
-        console.log('apply clicked');
+    const handleApply = async (event) => {
+
+        const date = new Date();
+        const newDate = "" + (parseInt(date.getDate()) + 1) + "/" + (parseInt(date.getMonth()) + 1) + "/" + date.getFullYear();
+
+        const requestBody = `{
+            "Application": {
+                "applicant": ${applicantId},
+                "professor": "${selectedProf.id}",
+                "dateSubmitted": "${newDate}",
+                "areasOfResearch": "${`dafsdfasdf`}",
+                "resumeDocumentId": "${`dafsdfasdf`}",
+                "auditDocumentId": "${`dafsdfasdf`}",
+                "reviews": []
+            }
+        }`
+
+        try {
+            console.log("Successfully signed up!");
+
+            fetch("https://j2ofh2owcb.execute-api.us-east-1.amazonaws.com/main/graphql",
+                {
+                    method: 'POST',
+                    body: requestBody 
+                }).then(res => console.log(res))
+        } catch (error) {
+            console.log('error signing up:', error);
+        }
     }
 
     return (

frontend/grad-admissions-hub-app/src/Components/Review/Review.js

@@ -10,10 +10,6 @@ function Review({ title, body, rating, date, id }) {
 
     const [ratings, setRatings] = useState(new Array(rating));
 
-    useEffect(() => {
-
-    }, [])
-
     return (
         <Accordion
             title={title}

frontend/grad-admissions-hub-app/src/Components/SignUpLogIn/SignUp.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useContext } from 'react';
 import lottie from 'lottie-web';
 
 import Input from '../Input/Input';
@@ -7,7 +7,11 @@ import Button from '../Button/Button';
 import { Link } from "react-router-dom";
 import { Auth } from 'aws-amplify';
 
+import { UserContext } from '../../App';
+
 function SignUp() {
+    const { userState, setUserState } = useContext(UserContext);
+
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [login, setLogin] = useState(false);
@@ -37,11 +41,17 @@ function SignUp() {
 
     const handleLogInButton = async (event) => {
         console.log("login is clicked!");
-
         try {
           await Auth.signIn(email, password)
-            .then((response) => {
-              console.log("sign in successful", response);
+            .then((res) => {
+                const payload = res.signInUserSession.idToken.payload;
+                console.log("sign in successful", res);
+                const newUser = {
+                    loggedIn: true,
+                    profile: payload.profile,
+                    id: payload.email
+                }
+                setUserState(newUser);
             });
         } catch (error) {
           console.log('error signing in', error);

frontend/grad-admissions-hub-app/src/Pages/Applicant.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 
 import { Redirect } from 'react-router-dom';
 
@@ -8,6 +8,8 @@ import Button from '../Components/Button/Button';
 import Input from '../Components/Input/Input';
 import Checkbox from '../Components/Checkbox/Checkbox';
 
+import { UserContext } from '../App';
+
 const majors = [
     'Engineering',
     'Arts',
@@ -23,7 +25,8 @@ const applicant1 = {
     graduationDate: '04/27/2021'
 }
 
-function Applicant({ id }) {
+function Applicant() {
+    const { userState, setUserState } = useContext(UserContext);
     const [applicant, setApplicant] = useState(applicant1);
 
     useEffect(() => {
@@ -38,8 +41,22 @@ function Applicant({ id }) {
         getApplicantById();
     }, [])
 
-    const handleLogOut = (e) => {
-        Auth.signOut();
+    const handleLogOut = async (event) => {
+        console.log("logout is clicked!");
+        try {
+          await Auth.signOut()
+            .then((res) => {
+                console.log("sign out successful", res);
+                const newUser = {
+                    loggedIn: false,
+                    profile: '',
+                    id: ''
+                }
+                setUserState(newUser);
+            });
+        } catch (error) {
+          console.log('error signing in', error);
+        }
     }
 
     return (

frontend/grad-admissions-hub-app/src/Pages/Application.js

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 
 import Review from '../Components/Review/Review';
 import CreateReview from '../Components/Review/CreateReview';
+
+import { UserContext } from '../App';
 // id: ID
 //   applicant: Applicant
 //   professor: Professor
@@ -59,12 +61,13 @@ const orgReviews = [
     {
         title: "Bloody Brilliant m8",
         body: "This chap is phenomenal",
-        ranking: [1, 2, 3, 4,5 ,6, 7, 5],
+        ranking: [1, 2, 3, 4, 5, 6, 7, 5],
         dateSubmitted: new Date()
     },
 ]
 
 function Application(props) {
+    const { userState } = useContext(UserContext);
     const [reviews, setReviews] = useState(orgReviews);
     const [application, setApplication] = useState(orgApplication);
 
@@ -110,11 +113,12 @@ function Application(props) {
                         rating={elem.ranking}
                     />
                 ))}
-
-                <CreateReview
-                    applicationId={application.id}
-                    professorId={"9cc14e72-eca7-4528-b2b8-1ab6f16ce02a"}
-                />
+                {userState.profile === 'professor' && (
+                    <CreateReview
+                        applicationId={id}
+                        professorId={userState.id}
+                    />
+                )}
             </div>
         </div>
     )