rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

add sign in with ion button

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 13:20:31 -04:00
parent 7b544abb07
commit 1d20268443
3 changed files with 61 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -20,7 +20,6 @@ function App() {
<BrowserRouter> <BrowserRouter>
<Nav /> <Nav />
<Switch> <Switch>
<Route component={Home} path="/" />
<Route component={Signup} path="/register" /> <Route component={Signup} path="/register" />
<Route component={Signin} path="/login" /> <Route component={Signin} path="/login" />
<Route component={Main} path="/about" /> <Route component={Main} path="/about" />
@ -29,6 +28,7 @@ function App() {
<Route component={Pools} path="/pools" /> <Route component={Pools} path="/pools" />
<Route component={Pool} path="/pool/:id" /> <Route component={Pool} path="/pool/:id" />
<Route component={Profile} path="/profile" /> <Route component={Profile} path="/profile" />
<Route component={Home} path="/" />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
</div> </div>

7
src/components/Home.js
View File

@ -9,12 +9,7 @@ export default function Home() {
> >
<h1>Home</h1> <h1>Home</h1>
<div style={{ display: 'flex', flexDirection: 'row' }}> <div style={{ display: 'flex', flexDirection: 'row' }}>
<a href="/signin" className="mx-2"> <a href="/">Log In with Ion</a>
Sign In
</a>
<a href="/signup" className="mx-2">
Sign Up
</a>
</div> </div>
</div> </div>
); );

120
src/components/Pools.js
View File

@ -1,65 +1,63 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
const Pools = (props) => { const Pools = (props) => {
const [state, setState] = useState({ const [pools, setPools] = useState([
Pools: [ {
{ id: 1,
id: 1, pool_title: 'TJ Carpool',
pool_title: 'TJ Carpool', pool_text: 'Carpool from TJ track to homes',
pool_text: 'Carpool from TJ track to homes', start_time: '4/10/2021 3:00 PM',
start_time: '4/10/2021 3:00 PM', end_time: '4/10/2021 4:00 PM',
end_time: '4/10/2021 4:00 PM', capacity: 2,
capacity: 2, participants: [],
participants: [], comments: [
comments: [ 'What is the covid vaccination status of all the participants?',
'What is the covid vaccination status of all the participants?', ],
], },
}, {
{ id: 2,
id: 2, pool_title: 'TJ Carpool',
pool_title: 'TJ Carpool', pool_text: 'Carpool from TJ track to homes',
pool_text: 'Carpool from TJ track to homes', start_time: '4/10/2021 3:00 PM',
start_time: '4/10/2021 3:00 PM', end_time: '4/10/2021 4:00 PM',
end_time: '4/10/2021 4:00 PM', capacity: 2,
capacity: 2, participants: [],
participants: [], comments: [
comments: [ 'What is the covid vaccination status of all the participants?',
'What is the covid vaccination status of all the participants?', ],
], },
}, {
{ id: 3,
id: 3, pool_title: 'TJ Carpool',
pool_title: 'TJ Carpool', pool_text: 'Carpool from TJ track to homes',
pool_text: 'Carpool from TJ track to homes', start_time: '4/10/2021 3:00 PM',
start_time: '4/10/2021 3:00 PM', end_time: '4/10/2021 4:00 PM',
end_time: '4/10/2021 4:00 PM', capacity: 2,
capacity: 2, participants: [],
participants: [], comments: [
comments: [ 'What is the covid vaccination status of all the participants?',
'What is the covid vaccination status of all the participants?', ],
], },
}, {
{ id: 4,
id: 4, pool_title: 'TJ Carpool',
pool_title: 'TJ Carpool', pool_text: 'Carpool from TJ track to homes',
pool_text: 'Carpool from TJ track to homes', start_time: '4/10/2021 3:00 PM',
start_time: '4/10/2021 3:00 PM', end_time: '4/10/2021 4:00 PM',
end_time: '4/10/2021 4:00 PM', capacity: 2,
capacity: 2, participants: [],
participants: [], comments: [
comments: [ 'What is the covid vaccination status of all the participants?',
'What is the covid vaccination status of all the participants?', ],
], },
}, ]);
],
});
const callAPI = () => { const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`) fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data !== undefined) { if (data !== undefined) {
setState(data); setPools(data.Pools);
} }
}); });
}; };
@ -86,9 +84,9 @@ const Pools = (props) => {
</a> </a>
<div className="container" style={{ fontFamily: 'Courier New' }}> <div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br> <br></br>
{state.Pools.map((Pool, el) => { {pools.map((pool, index) => {
let background; let background;
if (el % 2 === 0) { if (index % 2 === 0) {
background = '#F1EAE8'; background = '#F1EAE8';
} else { } else {
background = '#FFFFFF'; background = '#FFFFFF';
@ -98,16 +96,16 @@ const Pools = (props) => {
className="card card-body text-left" className="card card-body text-left"
style={{ backgroundColor: background }} style={{ backgroundColor: background }}
> >
<a href={'/Pool/' + Pool.id} className="card-title"> <a href={'/Pool/' + pool.id} className="card-title">
{Pool.pool_title} {pool.pool_title}
</a> </a>
<p className="text-left"> <p className="text-left">
Capacity: {Pool.participants.length} / {Pool.capacity} Capacity: {pool.participants.length} / {pool.capacity}
</p> </p>
<p className="text-left">Start Time: {Pool.start_time}</p> <p className="text-left">Start Time: {pool.start_time}</p>
<p className="text-left">End Time: {Pool.end_time}</p> <p className="text-left">End Time: {pool.end_time}</p>
<p className="text-warning"> <p className="text-warning">
{maybePluralize(Pool.comments.length, 'comment')} {maybePluralize(pool.comments.length, 'comment')}
</p> </p>
</div> </div>
); );