From 934b4dfb38f74f5df523966f10a1445c3e8bb755 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 19:47:29 -0400 Subject: [PATCH 1/5] fix session tokens --- .gitignore | 2 +- src/components/AuthenticationWrapper.tsx | 6 +++--- src/components/Authenticator.tsx | 5 ++++- src/components/Profile.tsx | 23 +++++++++++------------ 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575..04c5395 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -/node_modules +node_modules /.pnp .pnp.js diff --git a/src/components/AuthenticationWrapper.tsx b/src/components/AuthenticationWrapper.tsx index fdcc6a7..d3df9c6 100644 --- a/src/components/AuthenticationWrapper.tsx +++ b/src/components/AuthenticationWrapper.tsx @@ -7,7 +7,7 @@ export default function AuthenticationWrapper({ }: { children: React.ReactNode; }) { - const sessionId = localStorage.getItem('session_id'); + const sessionToken = localStorage.getItem('session_token'); // Prevent race conditions const [authState, setAuthState] = useState({ isLoggedIn: null, @@ -16,7 +16,7 @@ export default function AuthenticationWrapper({ }); const refreshAuthState = useCallback(() => { - if (sessionId) { + if (sessionToken) { getMe().then((user) => { if (user) { setAuthState({ isLoggedIn: true, user, refreshAuthState }); @@ -27,7 +27,7 @@ export default function AuthenticationWrapper({ } else { setAuthState({ isLoggedIn: false, user: null, refreshAuthState }); } - }, [sessionId]); + }, [sessionToken]); useEffect(() => { refreshAuthState(); diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx index 2002aa3..e0d3d59 100644 --- a/src/components/Authenticator.tsx +++ b/src/components/Authenticator.tsx @@ -1,11 +1,13 @@ -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { Redirect, useLocation, useParams } from 'react-router-dom'; import { API_ENDPOINT } from '../api/api'; +import AuthenticationContext from './AuthenticationContext'; export default function Authenticator() { const { provider } = useParams<{ provider: string }>(); const query = new URLSearchParams(useLocation().search); const code = query.get('code'); + const { refreshAuthState } = useContext(AuthenticationContext); const [status, setStatus] = useState<'pending' | 'errored' | 'authenticated'>( 'pending' ); @@ -25,6 +27,7 @@ export default function Authenticator() { response.json().then((json) => { if (json.status === 'success') { localStorage.setItem('session_token', json.token); + refreshAuthState && refreshAuthState(); setStatus('authenticated'); } else { setStatus('errored'); diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 973c036..2f68f03 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -6,7 +6,7 @@ import CardContent from '@material-ui/core/CardContent'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import { useContext, useEffect, useState } from 'react'; -import { API_ENDPOINT } from '../api/api'; +import { makeAPIGetCall } from '../api/utils'; import AuthenticationContext from './AuthenticationContext'; const useStyles = makeStyles({ @@ -21,7 +21,8 @@ const useStyles = makeStyles({ const Profile = () => { const { user, isLoggedIn } = useContext(AuthenticationContext); const [groups, setGroups] = useState([]); - const [pools, setPools] = useState([ + const [pools, setPools] = useState([ + /* { id: 1, pool_title: 'TJ Carpool', @@ -69,19 +70,17 @@ const Profile = () => { comments: [ 'What is the covid vaccination status of all the participants?', ], - }, + },*/ ]); const classes = useStyles(); useEffect(() => { console.log(process.env); - fetch(`${API_ENDPOINT}/my_pools`) - .then((response) => response.json()) - .then((json) => { - if (json) { - setPools(json.data); - } - }); + makeAPIGetCall('/my_pools').then((response) => { + if (response.data.data) { + setPools(response.data.data); + } + }); }, []); if (!user) { @@ -113,14 +112,14 @@ const Profile = () => { - {pool.pool_title} + {pool.title} - {pool.pool_text} + {pool.description} From c33f655ec549eb8bfa598f83dbc212745f532998 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 20:00:32 -0400 Subject: [PATCH 2/5] remove empty script tag --- src/components/Profile.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 973c036..e647068 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -148,7 +148,6 @@ const Profile = () => { })} - ); }; From e61d5c8570f318477a1c83af22d808596a7cad09 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 20:02:33 -0400 Subject: [PATCH 3/5] fix errors --- src/components/Profile.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index e647068..387624b 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -6,7 +6,7 @@ import CardContent from '@material-ui/core/CardContent'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import { useContext, useEffect, useState } from 'react'; -import { API_ENDPOINT } from '../api/api'; +import { makeAPIGetCall } from '../api/utils'; import AuthenticationContext from './AuthenticationContext'; const useStyles = makeStyles({ @@ -21,7 +21,8 @@ const useStyles = makeStyles({ const Profile = () => { const { user, isLoggedIn } = useContext(AuthenticationContext); const [groups, setGroups] = useState([]); - const [pools, setPools] = useState([ + const [pools, setPools] = useState([ + /* { id: 1, pool_title: 'TJ Carpool', @@ -70,18 +71,14 @@ const Profile = () => { 'What is the covid vaccination status of all the participants?', ], }, + */ ]); const classes = useStyles(); useEffect(() => { - console.log(process.env); - fetch(`${API_ENDPOINT}/my_pools`) - .then((response) => response.json()) - .then((json) => { - if (json) { - setPools(json.data); - } - }); + makeAPIGetCall('/my_pools').then((res) => { + if (res.data.data) setPools(res.data.data); + }); }, []); if (!user) { @@ -113,14 +110,14 @@ const Profile = () => { - {pool.pool_title} + {pool.title} - {pool.pool_text} + {pool.description} From e4752197695a7a27991444aab047fcaefb26e1ad Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 20:25:42 -0400 Subject: [PATCH 4/5] Add registration code to front end --- src/components/Group.tsx | 106 +++++++++--------------- src/components/Nav.tsx | 1 + src/components/Pool.tsx | 168 +++++++++++++++++++++++---------------- 3 files changed, 138 insertions(+), 137 deletions(-) diff --git a/src/components/Group.tsx b/src/components/Group.tsx index 92749d0..4eddc1c 100644 --- a/src/components/Group.tsx +++ b/src/components/Group.tsx @@ -1,77 +1,51 @@ import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; -import { API_ENDPOINT } from '../api/api'; +import Typography from '@material-ui/core/Typography'; +import { makeAPIGetCall } from '../api/utils'; const maybePluralize = (count: number, noun: string, suffix = 's') => `${count} ${noun}${count !== 1 ? suffix : ''}`; -const Group = () => { +const SAMPLE_POOLS: Carpool.Pool[] = [ + { + id: '1234', + title: 'TJ Carpool', + description: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participant_ids: [], + comments: [ + { + author_id: 'joshua_hsueh', + body: 'What is the covid vaccination status of all the participants?', + id: 'comment_0', + }, + ], + driver_id: 'michael', + create_time: '0', + update_time: '0', + group_id: 'test_group', + status: 'pending', + direction: 'dropoff', + author_id: 'michael', + type: 'offer', + }, +]; + +export default function Group() { // eslint-disable-next-line const { id } = useParams<{ id: string }>(); - const [pools, setPools] = useState([ - { - id: 1, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 2, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 3, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 4, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - ]); + const [group, setGroup] = useState(); + const [pools, setPools] = useState(SAMPLE_POOLS); useEffect(() => { - console.log(process.env); - fetch(`${API_ENDPOINT}/my_pools`) - .then((response) => response.json()) - .then((json) => { - if (json) { - setPools(json.data); - } - }); - }, []); + makeAPIGetCall('/group', { id }).then((res) => setGroup(res.data.data)); + }, [id]); return ( -
+
+ Group

{ style={{ backgroundColor: background }} > - {pool.pool_title} + {pool.title}

- Capacity: {pool.participants.length} / {pool.capacity} + Capacity: {pool.participant_ids.length} / {pool.capacity}

Start Time: {pool.start_time}

End Time: {pool.end_time}

@@ -116,6 +90,4 @@ const Group = () => {

); -}; - -export default Group; +} diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 56bc356..1adb69f 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -22,6 +22,7 @@ const useStyles = makeStyles({ }); const navLinks = [ { title: `Profile`, path: `/profile` }, + { title: `Create Pool`, path: `/create_pool` }, // { title: `Groups`, path: `/groups` }, // { title: `MyGroups`, path: `/mygroups` }, ]; diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx index 80896ce..58644b8 100644 --- a/src/components/Pool.tsx +++ b/src/components/Pool.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback, useRef } from 'react'; +import { useState, useEffect, useCallback, useRef, useContext } from 'react'; import { useParams } from 'react-router'; import Button from '@material-ui/core/Button'; import Card from '@material-ui/core/Card'; @@ -6,33 +6,38 @@ import Textarea from '@material-ui/core/TextareaAutosize'; import Typography from '@material-ui/core/Typography'; import Comment from './Comment'; import { makeAPIPostCall } from '../api/utils'; +import AuthenticationContext from './AuthenticationContext'; -export default function Pool({ registered = false }: { registered?: boolean }) { +// eslint-disable-next-line +const SAMPLE_POOL = { + id: '123', + title: 'TJ Carpool', + description: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participant_ids: [], + comments: [ + { + author_id: 'myfatemi04', + id: '1234', + body: "what's the vaccination status of everyone?", + }, + ], + driver_id: 'None', + create_time: '1234', + update_time: '1234', + group_id: 'tj', + status: 'pending', + direction: 'dropoff', + author_id: 'michael', + type: 'offer', +}; + +export default function Pool() { const id = useParams<{ id: string }>().id; - const [pool, setPool] = useState({ - id: '123', - title: 'TJ Carpool', - description: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participant_ids: [], - comments: [ - { - author_id: 'myfatemi04', - id: '1234', - body: "what's the vaccination status of everyone?", - }, - ], - driver_id: 'None', - create_time: '1234', - update_time: '1234', - group_id: 'tj', - status: 'pending', - direction: 'dropoff', - author_id: 'michael', - type: 'offer', - }); + const [pool, setPool] = useState(); + const { user } = useContext(AuthenticationContext); const commentTextareaRef = useRef(null); const [commentStatus, setCommentStatus] = useState< @@ -69,6 +74,20 @@ export default function Pool({ registered = false }: { registered?: boolean }) { [] ); + const onRegister = useCallback(() => { + if (user) { + let userID = user.id; + makeAPIPostCall('/join_pool', { id }).then(() => { + if (pool) { + setPool({ + ...pool, + participant_ids: [...pool.participant_ids, userID], + }); + } + }); + } + }, [user]); + useEffect(() => { fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) .then((response) => response.json()) @@ -81,50 +100,59 @@ export default function Pool({ registered = false }: { registered?: boolean }) { return ( - - {pool.title} - - - Capacity: {pool.participant_ids.length} / {pool.capacity} - - - Start Time: {pool.start_time} - - - End Time: {pool.end_time} - - {pool.description} - -
-