Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main

src/App.js

@@ -13,7 +13,6 @@ import Main from './components/Main';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
 import './App.css';
-import ProtectedRoute from './components/ProtectedRoute.js';
 
 function App() {
 	return (
@@ -25,11 +24,11 @@ function App() {
 					<Route component={Signup} path="/register" />
 					<Route component={Signin} path="/login" />
 					<Route component={Main} path="/about" />
-					<ProtectedRoute component={CreatePool} path="/create_pool" />
+					<Route component={CreatePool} path="/create_pool" />
-					<ProtectedRoute component={UpdatePool} path="/update_pool" />
+					<Route component={UpdatePool} path="/update_pool" />
-					<ProtectedRoute component={Pools} path="/pools" />
+					<Route component={Pools} path="/pools" />
-					<ProtectedRoute component={Pool} path="/pool/:id" />
+					<Route component={Pool} path="/pool/:id" />
-					<ProtectedRoute component={Profile} path="/profile" />
+					<Route component={Profile} path="/profile" />
 				</Switch>
 			</BrowserRouter>
 		</div>

src/components/CreatePool.js

@@ -3,15 +3,8 @@ import React from 'react';
 const CreatePool = (props) => {
 	const onSubmit = (e) => {
 		e.preventDefault();
-		const requestOptions = {
+
-			method: 'Pool',
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${localStorage.getItem('token')}`,
-			},
-			body: JSON.stringify({ Poolid: props.id }),
-		};
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
 			.then((response) => response.json())
 			.then((data) => {
 				console.log(data);

src/components/Pool.js

@@ -13,15 +13,8 @@ const Pool = (props) => {
 		comments: ['What is the covid vaccination status of all the participants?'],
 	});
 
-	const requestOptions = {
-		method: 'GET',
-		headers: {
-			Authorization: `Bearer ${localStorage.getItem('token')}`,
-		},
-	};
-
 	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
@@ -31,15 +24,8 @@ const Pool = (props) => {
 	};
 	const onComment = (e) => {
 		e.preventDefault();
-		const requestOptions = {
+
-			method: 'pool',
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`)
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${localStorage.getItem('token')}`,
-			},
-			body: JSON.stringify({ poolid: props.id }),
-		};
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`, requestOptions)
 			.then((response) => response.json())
 			.then((data) => {
 				console.log(data);

src/components/Pools.js

@@ -54,15 +54,8 @@ const Pools = (props) => {
 		],
 	});
 
-	const requestOptions = {
-		method: 'GET',
-		headers: {
-			Authorization: `Bearer ${localStorage.getItem('token')}`,
-		},
-	};
-
 	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/Pools/`, requestOptions)
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
@@ -95,7 +88,7 @@ const Pools = (props) => {
 				<br></br>
 				{state.Pools.map((Pool, el) => {
 					let background;
-					if (el % 2 == 0) {
+					if (el % 2 === 0) {
 						background = '#F1EAE8';
 					} else {
 						background = '#FFFFFF';

src/components/Profile.js

@@ -43,17 +43,9 @@ const Profile = (props) => {
 		],
 		groups: [],
 	});
-	const [stocks, setStocks] = useState([]);
-
-	const requestOptions = {
-		method: 'GET',
-		headers: {
-			Authorization: `Bearer ${localStorage.getItem('token')}`,
-		},
-	};
 
 	const callAPI = () => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`, requestOptions)
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {

src/components/ProtectedRoute.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-
-const ProtectedRoute = ({ component: Component, ...rest }) => {
-	const isAuthenticated = async () => {
-		try {
-			const requestOptions = {
-				method: 'GET',
-				headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
-			};
-			const response = await fetch(
-				`${process.env.REACT_APP_API_ENDPOINT}/profile`,
-				requestOptions
-			);
-
-			console.log(`Checking status! ${response.status}`);
-			if (response.status === 200) {
-				return true;
-			} else {
-				const requestOptions = {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: { refresh: localStorage.getItem('refresh') },
-				};
-				const response = await fetch(
-					`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
-					requestOptions
-				);
-
-				const data = response.json();
-
-				localStorage.setItem('token', data.access);
-
-				return false;
-			}
-		} catch (e) {
-			const requestOptions = {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: { refresh: localStorage.getItem('refresh') },
-			};
-			const response = await fetch(
-				`${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
-				requestOptions
-			);
-
-			const data = response.json();
-
-			localStorage.setItem('token', data.access);
-
-			return false;
-		}
-	};
-
-	return (
-		<Route
-			{...rest}
-			render={(props) => {
-				if (isAuthenticated()) {
-					return <Component {...props} {...rest} />;
-				} else {
-					return (
-						<Redirect
-							to={{
-								pathname: '/login',
-								state: {
-									from: props.location,
-								},
-							}}
-						/>
-					);
-				}
-			}}
-		/>
-	);
-};
-
-export default ProtectedRoute;

src/components/UpdatePool.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 const UpdatePool = (props) => {
 	const id = props.match.params.id;
 	const [pool, setPool] = useState({
+		id: 1,
 		pool_title: 'TJ Carpool',
 		pool_text: 'Carpool from TJ track to homes',
 		start_time: '4/10/2021 3:00 PM',
@@ -11,33 +12,19 @@ const UpdatePool = (props) => {
 		participants: [],
 		comments: ['What is the covid vaccination status of all the participants?'],
 	});
-	const requestOptions = {
-		method: 'GET',
-		headers: {
-			Authorization: `Bearer ${localStorage.getItem('token')}`,
-		},
-	};
 
 	const callAPI = useCallback(() => {
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`, requestOptions)
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
 					setPool(data);
 				}
 			});
-	}, [id, requestOptions]);
+	}, [id]);
 	const onSubmit = (e) => {
 		e.preventDefault();
-		const requestOptions = {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/create_pool`)
-			method: 'Pool',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${localStorage.getItem('token')}`,
-			},
-			body: JSON.stringify({ Poolid: props.id }),
-		};
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
 			.then((response) => response.json())
 			.then((data) => {
 				console.log(data);
@@ -58,7 +45,7 @@ const UpdatePool = (props) => {
 				<form onSubmit={onSubmit}>
 					<div className="form-group">
 						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
-							Create Pool
+							Update Pool
 						</h1>
 						<label className="" for="title">
 							Pool Title:{' '}
@@ -124,7 +111,7 @@ const UpdatePool = (props) => {
 					<input
 						className="btn btn-success text-left"
 						type="submit"
-						value="Submit"
+						value="Update"
 					/>
 					<br />
 				</form>