mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 19:29:51 -04:00
functionality added for components
This commit is contained in:
Joshua Hsueh
parent
0f4342ba4d
commit
8d67ec2b49
32
src/App.js
32
src/App.js
|
|
@ -1,17 +1,18 @@
|
|||
import React, { useState } 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";
|
||||
import CreatePool from "./components/CreatePool";
|
||||
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";
|
||||
import React, { useState } 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';
|
||||
import CreatePool from './components/CreatePool';
|
||||
import UpdatePool from './components/UpdatePool';
|
||||
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 (
|
||||
|
|
@ -23,7 +24,8 @@ function App() {
|
|||
<Route component={Signin} path="/login" />
|
||||
<Route component={Main} path="/about" />
|
||||
<ProtectedRoute component={CreatePool} path="/create_pool" />
|
||||
<ProtectedRoute component={Pools} path="/pool" />
|
||||
<ProtectedRoute component={UpdatePool} path="/update_pool" />
|
||||
<ProtectedRoute component={Pools} path="/pools" />
|
||||
<ProtectedRoute component={Pool} path="/pool/:id" />
|
||||
<ProtectedRoute component={Profile} path="/profile" />
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const CreatePool = (props) => {
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const requestOptions = {
|
||||
method: "Pool",
|
||||
method: 'Pool',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify({ Poolid: props.id }),
|
||||
};
|
||||
|
|
@ -20,19 +20,19 @@ const CreatePool = (props) => {
|
|||
return (
|
||||
<div
|
||||
className="bg-dark"
|
||||
style={{ minHeight: "100vh", fontFamily: "Courier New" }}
|
||||
style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
|
||||
>
|
||||
<div
|
||||
className="container card card-body text-left "
|
||||
style={{ backgroundColor: "#F1EAE8" }}
|
||||
style={{ backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<h1 className="form-title" style={{ fontFamily: "Impact" }}>
|
||||
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
|
||||
Create Pool
|
||||
</h1>
|
||||
<label className="" for="title">
|
||||
Pool Title:{" "}
|
||||
Pool Title:{' '}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -43,7 +43,7 @@ const CreatePool = (props) => {
|
|||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="title">
|
||||
<label className="" for="capacity">
|
||||
Pool Capacity:
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -54,6 +54,30 @@ const CreatePool = (props) => {
|
|||
placeholder="5"
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="pool_start">
|
||||
Start Time:
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="pool_start"
|
||||
name="pool_start"
|
||||
className="form-control"
|
||||
placeholder=""
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="pool_end">
|
||||
End Time:
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="pool_end"
|
||||
name="pool_end"
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="title">
|
||||
Pool Description:
|
||||
|
|
@ -62,7 +86,7 @@ const CreatePool = (props) => {
|
|||
type="text"
|
||||
id="Pool-text"
|
||||
name="Pool-text"
|
||||
style={{ height: "200px" }}
|
||||
style={{ height: '200px' }}
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></textarea>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
const Nav = (props) => {
|
||||
return (
|
||||
|
|
@ -17,7 +17,7 @@ const Nav = (props) => {
|
|||
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul className="navbar-nav mr-auto">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link text-white" href="/about">
|
||||
<a className="nav-link text-white" href="/">
|
||||
Carpool <span className="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -27,8 +27,8 @@ const Nav = (props) => {
|
|||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link text-white" href="/posts">
|
||||
Posts
|
||||
<a className="nav-link text-white" href="/pools">
|
||||
Pools
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Pool = (props) => {
|
||||
const id = props.match.params.id;
|
||||
const [state, setState] = useState({
|
||||
pool_title: 'TJ Carpool',
|
||||
id: 1,
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
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)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data !== undefined) {
|
||||
setState(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
const onComment = (e) => {
|
||||
e.preventDefault();
|
||||
const requestOptions = {
|
||||
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}/pool/comments`, requestOptions)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
}, []);
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<h1
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
className=" d-flex justify-content-center p-4"
|
||||
>
|
||||
Pool {id}
|
||||
</h1>
|
||||
<div className="container " style={{ fontFamily: 'Courier New' }}>
|
||||
<div className="card card-body " style={{ backgroundColor: '#F1EAE8' }}>
|
||||
<h1 className="card-title">{state.pool_title}</h1>
|
||||
<p className="text-left">
|
||||
Capacity: {state.participants.length} / {state.capacity}
|
||||
</p>
|
||||
<p className="text-left">Start Time: {state.start_time}</p>
|
||||
<p className="text-left">End Time: {state.end_time}</p>
|
||||
<p className="text-left">{state.pool_text}</p>
|
||||
</div>
|
||||
<form onSubmit={onComment}>
|
||||
<div id="form-group" className="text-left">
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="comment"
|
||||
type="text"
|
||||
placeholder="Enter comment here..."
|
||||
/>
|
||||
<input className="btn btn-primary" type="submit" value="Submit" />
|
||||
</div>
|
||||
<br />
|
||||
</form>
|
||||
<div className="text-left">
|
||||
<h4 className="text-white">Comments:</h4>
|
||||
{state.comments.map((comment) => {
|
||||
return (
|
||||
<div
|
||||
className="card card-body"
|
||||
style={{ backgroundColor: '#D6D1D0' }}
|
||||
>
|
||||
<p className="card-text">{comment}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pool;
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Pools = (props) => {
|
||||
const [state, setState] = useState({
|
||||
Pools: [
|
||||
{
|
||||
id: 1,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
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}/Pools/`, requestOptions)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data !== undefined) {
|
||||
setState(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
}, []);
|
||||
const maybePluralize = (count, noun, suffix = 's') =>
|
||||
`${count} ${noun}${count !== 1 ? suffix : ''}`;
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
>
|
||||
Pools
|
||||
</h1>
|
||||
<a
|
||||
className="btn btn-large btn-success"
|
||||
href="/create_pool"
|
||||
style={{ fontFamily: 'Courier New' }}
|
||||
>
|
||||
Create Pool
|
||||
</a>
|
||||
<div className="container" style={{ fontFamily: 'Courier New' }}>
|
||||
<br></br>
|
||||
{state.Pools.map((Pool, el) => {
|
||||
let background;
|
||||
if (el % 2 == 0) {
|
||||
background = '#F1EAE8';
|
||||
} else {
|
||||
background = '#FFFFFF';
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="card card-body text-left"
|
||||
style={{ backgroundColor: background }}
|
||||
>
|
||||
<a href={'/Pool/' + Pool.id} className="card-title">
|
||||
{Pool.pool_title}
|
||||
</a>
|
||||
<p className="text-left">
|
||||
Capacity: {Pool.participants.length} / {Pool.capacity}
|
||||
</p>
|
||||
<p className="text-left">Start Time: {Pool.start_time}</p>
|
||||
<p className="text-left">End Time: {Pool.end_time}</p>
|
||||
<p className="text-warning">
|
||||
{maybePluralize(Pool.comments.length, 'comment')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pools;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Profile = (props) => {
|
||||
const [state, setState] = useState({
|
||||
user: { username: 'HyperionLegion' },
|
||||
pools: [
|
||||
{
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 1,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 2,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 3,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
],
|
||||
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)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data !== undefined) {
|
||||
setState(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
}, []);
|
||||
return (
|
||||
<div className="" style={{ minHeight: '100vh' }}>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
>
|
||||
Profile
|
||||
</h1>
|
||||
<div className="container" style={{ fontFamily: 'Courier New' }}>
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h2>Your Pools:</h2>
|
||||
<div className="">
|
||||
{state.pools.map((pool) => {
|
||||
return (
|
||||
<div
|
||||
className="text-left m-2 p-1"
|
||||
style={{ backgroundColor: '#D6D1D0' }}
|
||||
>
|
||||
<a href={'pool/' + pool.id}>{pool.pool_title}</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const UpdatePool = (props) => {
|
||||
const id = props.match.params.id;
|
||||
const [state, setState] = useState({
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
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)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data !== undefined) {
|
||||
setState(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const requestOptions = {
|
||||
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);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
className="bg-dark"
|
||||
style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
|
||||
>
|
||||
<div
|
||||
className="container card card-body text-left "
|
||||
style={{ backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
|
||||
Create Pool
|
||||
</h1>
|
||||
<label className="" for="title">
|
||||
Pool Title:{' '}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
className="form-control d-flex"
|
||||
placeholder="Enter title here..."
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="capacity">
|
||||
Pool Capacity:
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="capacity"
|
||||
name="capacity"
|
||||
className="form-control d-flex"
|
||||
placeholder="5"
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="pool_start">
|
||||
Start Time:
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="pool_start"
|
||||
name="pool_start"
|
||||
className="form-control"
|
||||
placeholder=""
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="pool_end">
|
||||
End Time:
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="pool_end"
|
||||
name="pool_end"
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="title">
|
||||
Pool Description:
|
||||
</label>
|
||||
<textarea
|
||||
type="text"
|
||||
id="Pool-text"
|
||||
name="Pool-text"
|
||||
style={{ height: '200px' }}
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="btn btn-success text-left"
|
||||
type="submit"
|
||||
value="Submit"
|
||||
/>
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdatePool;
|
||||
Loading…
Reference in New Issue
Block a user