Remove instances of fetch()

src/components/Authenticator.tsx

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { Redirect, useLocation, useParams } from 'react-router-dom';
 import { API_ENDPOINT } from '../api/api';
+import { makeAPIPostCall } from '../api/utils';
 import AuthenticationContext from './AuthenticationContext';
 
 export default function Authenticator() {
@@ -13,26 +14,15 @@ export default function Authenticator() {
 	);
 
 	useEffect(() => {
-		fetch(`${API_ENDPOINT}/create_session`, {
+		makeAPIPostCall('/create_session', { code, provider })
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				code,
-				provider,
-			}),
-		})
 			.then((response) => {
-				response.json().then((json) => {
+				if (response.data.status === 'success') {
-					if (json.status === 'success') {
+					localStorage.setItem('session_token', response.data.token);
-						localStorage.setItem('session_token', json.token);
 					refreshAuthState && refreshAuthState();
 					setStatus('authenticated');
 				} else {
 					setStatus('errored');
 				}
-				});
 			})
 			.catch(() => {
 				setStatus('errored');

src/components/Groups.tsx

@@ -1,28 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import { makeAPIGetCall } from '../api/utils';
 
 const Groups = () => {
-	const [state, setState] = useState({
+	const [groups, setGroups] = useState<Carpool.Group[]>([
-		Groups: [
 		{
-				id: 1,
+			_id: '1234',
-				group_title: 'TJ',
+			name: 'TJ',
+			creator_id: 'michael',
+			member_ids: [],
 		},
-		],
+	]);
-	});
-
-	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setState(data);
-				}
-			});
-	};
 
 	useEffect(() => {
-		callAPI();
+		makeAPIGetCall('/groups').then((res) => {
+			if (res.data.data) {
+				setGroups(res.data.data);
+			}
+		});
 	}, []);
+
 	return (
 		<div className="bg-dark" style={{ minHeight: '100vh' }}>
 			<h1
@@ -40,7 +36,7 @@ const Groups = () => {
 			</a>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
-				{state.Groups.map((group, index) => {
+				{groups.map((group, index) => {
 					return (
 						<div
 							className="card card-body text-left"
@@ -48,8 +44,8 @@ const Groups = () => {
 								backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
 							}}
 						>
-							<form action={'/requestgroup/' + group.id} method="POST">
+							<form action={'/requestgroup/' + group._id} method="POST">
-								<p className="card-title">{group.group_title}</p>
+								<p className="card-title">{group.name}</p>
 								<input
 									type="submit"
 									value="Request to Join"

src/components/MyGroups.tsx

@@ -1,28 +1,24 @@
 import React, { useState, useEffect } from 'react';
+import { makeAPIGetCall } from '../api/utils';
 
 const MyGroups = () => {
-	const [state, setState] = useState({
+	const [groups, setGroups] = useState<Carpool.Group[]>([
-		MyGroups: [
 		{
-				id: 1,
+			_id: '1234',
-				group_title: 'TJ',
+			name: 'TJ',
+			creator_id: '12345Q',
+			member_ids: [],
 		},
-		],
+	]);
-	});
-
-	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setState(data);
-				}
-			});
-	};
 
 	useEffect(() => {
-		callAPI();
+		makeAPIGetCall('/groups').then((res) => {
+			if (res.data.data) {
+				setGroups(res.data.data);
+			}
+		});
 	}, []);
+
 	return (
 		<div className="bg-dark" style={{ minHeight: '100vh' }}>
 			<h1
@@ -40,7 +36,7 @@ const MyGroups = () => {
 			</a>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
-				{state.MyGroups.map((group, index) => {
+				{groups.map((group, index) => {
 					let background;
 					if (index % 2 === 0) {
 						background = '#F1EAE8';
@@ -52,8 +48,8 @@ const MyGroups = () => {
 							className="card card-body text-left"
 							style={{ backgroundColor: background }}
 						>
-							<a href={'/group/' + group.id} className="card-title">
+							<a href={'/group/' + group._id} className="card-title">
-								{group.group_title}
+								{group.name}
 							</a>
 						</div>
 					);

src/components/MyPools.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { API_ENDPOINT } from '../api/api';
+import { makeAPIGetCall } from '../api/utils';
 
 const MyPools = () => {
 	// const id = props.match.params.id;
@@ -55,12 +56,9 @@ const MyPools = () => {
 	]);
 
 	useEffect(() => {
-		console.log(process.env);
+		makeAPIGetCall('/my_pools').then((res) => {
-		fetch(`${API_ENDPOINT}/my_pools`)
+			if (res.data.data) {
-			.then((response) => response.json())
+				setPools(res.data.data);
-			.then((json) => {
-				if (json) {
-					setPools(json.data);
 			}
 		});
 	}, []);

src/components/Pools.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { API_ENDPOINT } from '../api/api';
+import { makeAPIGetCall } from '../api/utils';
 
 const maybePluralize = (count: number, noun: string, suffix = 's') =>
 	`${count} ${noun}${count !== 1 ? suffix : ''}`;
@@ -58,12 +59,9 @@ const Pools = () => {
 	]);
 
 	useEffect(() => {
-		console.log(process.env);
+		makeAPIGetCall('/my_pools').then((res) => {
-		fetch(`${API_ENDPOINT}/my_pools`)
+			if (res.data.data) {
-			.then((response) => response.json())
+				setPools(res.data.data);
-			.then((json) => {
-				if (json) {
-					setPools(json.data);
 			}
 		});
 	}, []);

src/components/UpdatePool.tsx

@@ -5,6 +5,7 @@ import React, {
 	FormEventHandler,
 } from 'react';
 import { useParams } from 'react-router-dom';
+import { makeAPIGetCall } from '../api/utils';
 
 const UpdatePool = () => {
 	const id = useParams<{ id: string }>().id;
@@ -21,26 +22,17 @@ const UpdatePool = () => {
 		comments: ['What is the covid vaccination status of all the participants?'],
 	});
 
-	const callAPI = useCallback(() => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
-			.then((response) => response.json())
-			.then((data) => {
-				if (data !== undefined) {
-					setPool(data);
-				}
-			});
-	}, [id]);
 	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
 		e.preventDefault();
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`)
+		makeAPIGetCall('/update_pool').then((res) => {
-			.then((response) => response.json())
+			console.log(res);
-			.then((data) => {
-				console.log(data);
 		});
 	};
 	useEffect(() => {
-		callAPI();
+		makeAPIGetCall('/pool', { poolID: id }).then((res) => {
-	}, [callAPI]);
+			if (res.data.data) setPool(res.data.data);
+		});
+	}, [id]);
 	return (
 		<div
 			className="bg-dark"