fix session tokens

.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
 

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<AuthState>({
 		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();

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');

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<Carpool.Group[]>([]);
-	const [pools, setPools] = useState([
+	const [pools, setPools] = useState<Carpool.Pool[]>([
+		/*
 		{
 			id: 1,
 			pool_title: 'TJ Carpool',
@@ -69,17 +70,15 @@ 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);
 			}
 		});
 	}, []);
@@ -113,14 +112,14 @@ const Profile = () => {
 								<CardActionArea href={'/pool/' + pool.id}>
 									<CardContent>
 										<Typography gutterBottom variant="h5" component="h2">
-											{pool.pool_title}
+											{pool.title}
 										</Typography>
 										<Typography
 											variant="body2"
 											color="textSecondary"
 											component="p"
 										>
-											{pool.pool_text}
+											{pool.description}
 										</Typography>
 									</CardContent>
 								</CardActionArea>