From d257ef52ec3deabe4992f1bd8d30c7782ef0e7d0 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 13:32:20 -0400
Subject: [PATCH] connected the API to the frontend
---
.env | 1 +
src/App.js | 4 ----
src/api.js | 2 ++
src/components/Main.js | 7 +++++++
src/components/Pools.js | 20 ++++++++++----------
src/components/UpdatePool.js | 2 ++
src/components/auth/Signin.js | 0
src/components/auth/Signup.js | 0
8 files changed, 22 insertions(+), 14 deletions(-)
create mode 100644 .env
create mode 100644 src/api.js
delete mode 100644 src/components/auth/Signin.js
delete mode 100644 src/components/auth/Signup.js
diff --git a/.env b/.env
new file mode 100644
index 0000000..48a28f2
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_API_ENDPOINT=http://localhost:8080/api
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index a888e3c..dd218ca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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" />
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..26b0ca0
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,2 @@
+const dev = process.env.NODE_ENV === 'development';
+export const API_ENDPOINT = 'http://localhost/api';
diff --git a/src/components/Main.js b/src/components/Main.js
index e69de29..4b6ff24 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -0,0 +1,7 @@
+export default function Main() {
+ return (
+ <div className="d-flex flex-column">
+ <h1>About Us</h1>
+ </div>
+ );
+}
diff --git a/src/components/Pools.js b/src/components/Pools.js
index 8590347..83a8c2b 100644
--- a/src/components/Pools.js
+++ b/src/components/Pools.js
@@ -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 (
diff --git a/src/components/UpdatePool.js b/src/components/UpdatePool.js
index 1742e3d..e093b49 100644
--- a/src/components/UpdatePool.js
+++ b/src/components/UpdatePool.js
@@ -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',
diff --git a/src/components/auth/Signin.js b/src/components/auth/Signin.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
deleted file mode 100644
index e69de29..0000000