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..3a1d770 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'); @@ -34,7 +37,7 @@ export default function Authenticator() { .catch(() => { setStatus('errored'); }); - }, [code, provider]); + }, [code, provider, refreshAuthState]); switch (status) { case 'authenticated': diff --git a/src/components/Group.tsx b/src/components/Group.tsx index 92749d0..9b8a5bc 100644 --- a/src/components/Group.tsx +++ b/src/components/Group.tsx @@ -1,91 +1,72 @@ 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]); + + if (!group) { + return

Loading

; + } return ( -
-

+
+ + Group {group.id} + + + Pools -

- + + Create Pool -
+


{pools.map((pool, index) => { let background; @@ -100,10 +81,10 @@ const 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 +97,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..330365c 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, id, pool]); + 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} - -
-