connected the API to the frontend

This commit is contained in:
Michael Fatemi 2021-04-10 13:32:20 -04:00
parent 1d20268443
commit d257ef52ec
8 changed files with 22 additions and 14 deletions

1
.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_API_ENDPOINT=http://localhost:8080/api

View File

@ -1,8 +1,6 @@
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import Signin from './components/auth/Signin';
import Signup from './components/auth/Signup';
import Pools from './components/Pools';
import Pool from './components/Pool';
import Profile from './components/Profile';
@ -20,8 +18,6 @@ function App() {
<BrowserRouter>
<Nav />
<Switch>
<Route component={Signup} path="/register" />
<Route component={Signin} path="/login" />
<Route component={Main} path="/about" />
<Route component={CreatePool} path="/create_pool" />
<Route component={UpdatePool} path="/update_pool" />

2
src/api.js Normal file
View File

@ -0,0 +1,2 @@
const dev = process.env.NODE_ENV === 'development';
export const API_ENDPOINT = 'http://localhost/api';

View File

@ -0,0 +1,7 @@
export default function Main() {
return (
<div className="d-flex flex-column">
<h1>About Us</h1>
</div>
);
}

View File

@ -1,7 +1,9 @@
import React, { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api';
const Pools = (props) => {
const [pools, setPools] = useState([
/*
{
id: 1,
pool_title: 'TJ Carpool',
@ -49,22 +51,20 @@ const Pools = (props) => {
comments: [
'What is the covid vaccination status of all the participants?',
],
},
},*/
]);
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`)
useEffect(() => {
console.log(process.env);
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
setPools(data.Pools);
.then((json) => {
if (json) {
setPools(json.data);
}
});
};
useEffect(() => {
callAPI();
}, []);
const maybePluralize = (count, noun, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`;
return (

View File

@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
const UpdatePool = (props) => {
const id = props.match.params.id;
// eslint-disable-next-line
const [pool, setPool] = useState({
id: 1,
pool_title: 'TJ Carpool',