5 |
6 | return(
7 |
17 | );
18 | };
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/components/ResidentDetails.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState } from 'react';
2 |
3 | export const ResidentDetails = (props) => {
4 |
5 | const elems = [];
6 | console.log(props.user);
7 | for (const key in props.user) {
8 | if (key !== 'id') {
9 | if (props.user[key] === '') {
10 | if (key === 'name') {
11 | elems.push( props.changeInput(e, key)}/>);
12 | } else if (key === 'email') {
13 | elems.push( props.changeInput(e, key)}/>);
14 | } else if (key === 'linkedin') {
15 | elems.push( props.changeInput(e, key)}/>);
16 | } else if (key === 'photo') {
17 | elems.push( props.changeInput(e, key)}/>);
18 | } else if (key === 'organization') {
19 | elems.push( props.changeInput(e, key)}/>);
20 | } else if (key === 'message') {
21 | elems.push( props.changeInput(e, key)}/>);
22 | }
23 | } else {
24 | elems.push( props.changeInput(e, key)}/>);
25 | }
26 | }
27 | }
28 |
29 | return (
30 |
31 | {elems}
32 |
33 |
39 |
40 | );
41 | };
--------------------------------------------------------------------------------
/src/components/SearchBar.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState } from 'react';
2 |
3 | export const SearchBar = (props) => {
4 | const [textValue, setTextValue] = useState('');
5 | //Fetch for search value result
6 | function clickFunction() {
7 | changeValues();
8 | }
9 |
10 | function enterFunction(e) {
11 | if (e.key === 'Enter') {
12 | changeValues();
13 | }
14 | }
15 |
16 | function changeValues() {
17 | props.setActive('Search');
18 | props.setSearchValue(textValue);
19 | setTextValue('');
20 | }
21 |
22 | return (
23 |
24 | setTextValue(e.target.value)}>
25 |
26 |
27 | );
28 | };
--------------------------------------------------------------------------------
/src/components/SetCohort.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState } from 'react';
2 | export const SetCohort = (props) => {
3 | const [cohortValue, changeCohort] = useState('FTRI');
4 | const [numberValue, changeNumber] = useState(1);
5 | const [orgValue, changeOrg] = useState();
6 | const [linkedinUrl, changeUrl] = useState();
7 | const cohortNums = [];
8 |
9 | const getCookie = (cookie) => {
10 | return document.cookie
11 | .split('; ')
12 | .find(row => row.startsWith(cookie + '='))
13 | ?.split('=')[1];
14 | };
15 |
16 |
17 | //Set Cohort and make a PATCH/PUT request to change user's cohort
18 | function cohortSet() {
19 | //FETCH REQUEST BELOW
20 | fetch('http://localhost:8080/residents/register', {
21 | method: 'POST',
22 | headers: { 'Content-Type': 'application/json' },
23 | body: JSON.stringify({ id: getCookie('userId'), cohort: `${cohortValue} ${numberValue}`, organization: orgValue, linkedin: linkedinUrl }),
24 | })
25 | .then(data => data.json())
26 | .then(result => {
27 | console.log(result);
28 | props.setCohort(true);
29 | }, []);
30 | //Change cohortIsSet to true if successful
31 | }
32 |
33 | for (let i = 1; i <= 40; i++) {
34 | cohortNums.push();
35 | }
36 |
37 | return (
38 |
39 |
40 |
Welcome!
It seems you're new here.
Please let us know just a little bit more info about you.
41 |
42 | {/*
changeInput(e.target.value)}> */}
43 |
44 |
Cohort:
45 |
51 |
54 |
Organization:
55 |
changeOrg(e.target.value)}>
56 |
57 |
58 |
LinkedIn Profile URL:
59 |
changeUrl(e.target.value)}>
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
35 |
Search by Cohort
36 | {
37 | !active
38 | ?
39 |
40 | {cohorts}
41 |
42 | :
43 |
44 |
45 |
46 |
47 |
48 |
49 | }
50 |
;
18 | } else if (active === 'Organization') {
19 | elem =
;
20 | } else if (active === 'Cohort') {
21 | elem =
;
22 | } else if (active === 'Search') {
23 | elem =
;
24 | } else if (active === 'Residents') {
25 | elem =
;
26 | } else if (active === 'User') {
27 | elem =
;
28 | }
29 |
30 | return (
31 |
32 |
33 | {elem}
34 |
35 | );
36 | };
--------------------------------------------------------------------------------
/src/containers/MainContainer.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, useState, useEffect } from 'react';
2 | import { HomeContainer } from './HomeContainer.jsx';
3 | import { LandingPage } from '../components/LandingPage.jsx';
4 | import { SetCohort } from '../components/SetCohort.jsx';
5 |
6 | export default function MainContainer() {
7 | const [isAuthenticated, changeAuthenticated] = useState(false);
8 | const [cohortIsSet, setCohort] = useState(false);
9 | // const [isComplete, changeComplete] = useState(false);
10 |
11 | const getCookie = (cookie) => {
12 | return document.cookie
13 | .split('; ')
14 | .find(row => row.startsWith(cookie + '='))
15 | ?.split('=')[1];
16 | };
17 |
18 | useEffect(() => {
19 | // On page load, we need to check if linkedInAccessToken and User ID cookies are set
20 | // if so, we need to redirect to the server to check if the cookie is valid
21 | // if the cookie is valid, we need to set isAuthenticated to true on the client side
22 | // if cookie is invalid, clear cookie and redirect back to homepage
23 | // if cookie is not set, load the landing page
24 | //Check if cohortIsSet when isAuthenticated is changed to true
25 | //Fetching to the server, whether user is Authenticated and cohortisset
26 |
27 | if (getCookie('userId') && getCookie('linkedInAuthCode') && getCookie('linkedInAuthCode') !== 'undefined') {
28 | console.log('found a user ID and auth code, going to verify user');
29 | fetch('http://localhost:8080/verifyuser', {
30 | credentials: 'same-origin',
31 | })
32 | .then(res => {
33 | console.log(res);
34 | if (res.status === 200) changeAuthenticated(true);
35 | });
36 | } else {
37 | changeAuthenticated(false);
38 | }
39 | if (getCookie('userId')) {
40 | fetch('http://localhost:8080/verifyuser/complete')
41 | .then(res => res.json())
42 | .then(res => {
43 | console.log(res);
44 | if (res) setCohort(true);
45 | });
46 | }
47 | });
48 |
49 | return (
50 |
51 | {
52 | isAuthenticated
53 | ? cohortIsSet
54 | ?
55 | :
56 | :
57 | // ?
58 | // :
59 | // :
60 | }
61 |
62 | {/* {isComplete && } */}
63 |
64 | );
65 | }
--------------------------------------------------------------------------------
/src/containers/NavBarContainer.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { SearchBar } from '../components/SearchBar.jsx';
3 |
4 | export const NavBar = (props) => {
5 |
6 | function clickFunction(focus) {
7 | props.setActive(focus);
8 | }
9 |
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
37 |
Search by Organization
38 | {
39 | !active
40 | ?
41 |
42 |
43 | {orgs}
44 |
45 | :
46 |
47 |
48 |
49 |
50 |
51 |
52 | }
53 |
23 | Residents
24 |
25 | {residents}
26 |
27 |