mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
functionality added for components
This commit is contained in:
Joshua Hsueh
parent
0f4342ba4d
commit
8d67ec2b49
62
src/App.js
62
src/App.js
|
|
@ -1,35 +1,37 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from 'react';
|
||||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||||
import Nav from "./components/Nav";
|
import Nav from './components/Nav';
|
||||||
import Signin from "./components/auth/Signin";
|
import Signin from './components/auth/Signin';
|
||||||
import Signup from "./components/auth/Signup";
|
import Signup from './components/auth/Signup';
|
||||||
import Pools from "./components/Pools";
|
import Pools from './components/Pools';
|
||||||
import Pool from "./components/Pool";
|
import Pool from './components/Pool';
|
||||||
import Profile from "./components/Profile";
|
import Profile from './components/Profile';
|
||||||
import CreatePool from "./components/CreatePool";
|
import CreatePool from './components/CreatePool';
|
||||||
import Main from "./components/Main";
|
import UpdatePool from './components/UpdatePool';
|
||||||
import "bootstrap/dist/css/bootstrap.min.css";
|
import Main from './components/Main';
|
||||||
import "bootstrap/dist/js/bootstrap.bundle.min";
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import "./App.css";
|
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||||
import ProtectedRoute from "./components/ProtectedRoute.js";
|
import './App.css';
|
||||||
|
import ProtectedRoute from './components/ProtectedRoute.js';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Nav />
|
<Nav />
|
||||||
<Switch>
|
<Switch>
|
||||||
<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" />
|
||||||
<ProtectedRoute component={CreatePool} path="/create_pool" />
|
<ProtectedRoute component={CreatePool} path="/create_pool" />
|
||||||
<ProtectedRoute component={Pools} path="/pool" />
|
<ProtectedRoute component={UpdatePool} path="/update_pool" />
|
||||||
<ProtectedRoute component={Pool} path="/pool/:id" />
|
<ProtectedRoute component={Pools} path="/pools" />
|
||||||
<ProtectedRoute component={Profile} path="/profile" />
|
<ProtectedRoute component={Pool} path="/pool/:id" />
|
||||||
</Switch>
|
<ProtectedRoute component={Profile} path="/profile" />
|
||||||
</BrowserRouter>
|
</Switch>
|
||||||
</div>
|
</BrowserRouter>
|
||||||
);
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
||||||
|
|
@ -1,83 +1,107 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
const CreatePool = (props) => {
|
const CreatePool = (props) => {
|
||||||
const onSubmit = (e) => {
|
const onSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const requestOptions = {
|
const requestOptions = {
|
||||||
method: "Pool",
|
method: 'Pool',
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
'Content-Type': 'application/json',
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ Poolid: props.id }),
|
body: JSON.stringify({ Poolid: props.id }),
|
||||||
};
|
};
|
||||||
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
|
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="bg-dark"
|
className="bg-dark"
|
||||||
style={{ minHeight: "100vh", fontFamily: "Courier New" }}
|
style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="container card card-body text-left "
|
className="container card card-body text-left "
|
||||||
style={{ backgroundColor: "#F1EAE8" }}
|
style={{ backgroundColor: '#F1EAE8' }}
|
||||||
>
|
>
|
||||||
<form onSubmit={onSubmit}>
|
<form onSubmit={onSubmit}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<h1 className="form-title" style={{ fontFamily: "Impact" }}>
|
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
|
||||||
Create Pool
|
Create Pool
|
||||||
</h1>
|
</h1>
|
||||||
<label className="" for="title">
|
<label className="" for="title">
|
||||||
Pool Title:{" "}
|
Pool Title:{' '}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="title"
|
id="title"
|
||||||
name="title"
|
name="title"
|
||||||
className="form-control d-flex"
|
className="form-control d-flex"
|
||||||
placeholder="Enter title here..."
|
placeholder="Enter title here..."
|
||||||
></input>
|
></input>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className="" for="title">
|
<label className="" for="capacity">
|
||||||
Pool Capacity:
|
Pool Capacity:
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="capacity"
|
id="capacity"
|
||||||
name="capacity"
|
name="capacity"
|
||||||
className="form-control d-flex"
|
className="form-control d-flex"
|
||||||
placeholder="5"
|
placeholder="5"
|
||||||
></input>
|
></input>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className="" for="title">
|
<label className="" for="pool_start">
|
||||||
Pool Description:
|
Start Time:
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<input
|
||||||
type="text"
|
type="datetime-local"
|
||||||
id="Pool-text"
|
id="pool_start"
|
||||||
name="Pool-text"
|
name="pool_start"
|
||||||
style={{ height: "200px" }}
|
className="form-control"
|
||||||
className="form-control"
|
placeholder=""
|
||||||
placeholder="Enter text here..."
|
></input>
|
||||||
></textarea>
|
</div>
|
||||||
</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
|
<input
|
||||||
className="btn btn-success text-left"
|
className="btn btn-success text-left"
|
||||||
type="submit"
|
type="submit"
|
||||||
value="Submit"
|
value="Submit"
|
||||||
/>
|
/>
|
||||||
<br />
|
<br />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CreatePool;
|
export default CreatePool;
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
|
|
||||||
const Nav = (props) => {
|
const Nav = (props) => {
|
||||||
return (
|
return (
|
||||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<button
|
<button
|
||||||
className="navbar-toggler"
|
className="navbar-toggler"
|
||||||
type="button"
|
type="button"
|
||||||
data-toggle="collapse"
|
data-toggle="collapse"
|
||||||
data-target="#navbarNavDropdown"
|
data-target="#navbarNavDropdown"
|
||||||
aria-controls="navbarNavDropdown"
|
aria-controls="navbarNavDropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-label="Toggle navigation"
|
aria-label="Toggle navigation"
|
||||||
>
|
>
|
||||||
<span className="navbar-toggler-icon"></span>
|
<span className="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
||||||
<ul className="navbar-nav mr-auto">
|
<ul className="navbar-nav mr-auto">
|
||||||
<li className="nav-item">
|
<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>
|
Carpool <span className="sr-only">(current)</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<a className="nav-link text-white" href="/profile">
|
<a className="nav-link text-white" href="/profile">
|
||||||
Profile <span className="sr-only">(current)</span>
|
Profile <span className="sr-only">(current)</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<a className="nav-link text-white" href="/posts">
|
<a className="nav-link text-white" href="/pools">
|
||||||
Posts
|
Pools
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Nav;
|
export default Nav;
|
||||||
|
|
|
||||||
|
|
@ -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