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

Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 17:34:54 -04:00
commit 21cae9b016
7 changed files with 35541 additions and 35564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70715
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

98
package.json
View File

@ -1,51 +1,51 @@
{ {
"name": "carpool-frontend", "name": "carpool-frontend",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.3", "@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.12", "@types/bootstrap": "^5.0.12",
"@types/node": "^14.14.37", "@types/node": "^14.14.37",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@types/react-router-dom": "^5.1.7", "@types/react-router-dom": "^5.1.7",
"axios": "^0.21.1", "axios": "^0.21.1",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.5.2", "react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"typescript": "^4.2.4", "typescript": "^4.2.4",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} }
} }

2
src/App.tsx
View File

@ -8,7 +8,6 @@ import CreatePool from './components/CreatePool';
import CreateGroup from './components/CreateGroup'; import CreateGroup from './components/CreateGroup';
import Groups from './components/Groups'; import Groups from './components/Groups';
import MyGroups from './components/MyGroups'; import MyGroups from './components/MyGroups';
import MyPools from './components/MyPools';
import UpdatePool from './components/UpdatePool'; import UpdatePool from './components/UpdatePool';
import Home from './components/Home'; import Home from './components/Home';
import Main from './components/Main'; import Main from './components/Main';
@ -30,7 +29,6 @@ function App() {
<Route component={CreateGroup} path="/create_group" /> <Route component={CreateGroup} path="/create_group" />
<Route component={Groups} path="/groups" /> <Route component={Groups} path="/groups" />
<Route component={MyGroups} path="/mygroups" /> <Route component={MyGroups} path="/mygroups" />
<Route component={MyPools} path="/mypools" />
<Route component={UpdatePool} path="/update_pool" /> <Route component={UpdatePool} path="/update_pool" />
<Route component={Group} path="/group/:id" /> <Route component={Group} path="/group/:id" />
<Route component={Pool} path="/pool/:id" /> <Route component={Pool} path="/pool/:id" />

118
src/components/MyPools.tsx
View File

@ -1,118 +0,0 @@
import React, { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api/api';
const MyPools = () => {
// const id = props.match.params.id;
const [pools, setPools] = useState([
{
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?',
],
},
]);
useEffect(() => {
console.log(process.env);
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json())
.then((json) => {
if (json) {
setPools(json.data);
}
});
}, []);
const maybePluralize = (count: number, noun: string, 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>
{pools.map((pool, index) => {
let background;
if (index % 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 MyPools;

1
src/components/Nav.tsx
View File

@ -24,7 +24,6 @@ const navLinks = [
{ title: `Profile`, path: `/profile` }, { title: `Profile`, path: `/profile` },
{ title: `Groups`, path: `/groups` }, { title: `Groups`, path: `/groups` },
{ title: `MyGroups`, path: `/mygroups` }, { title: `MyGroups`, path: `/mygroups` },
{ title: `MyPools`, path: `/mypools` },
]; ];
const Nav = () => { const Nav = () => {
const classes = useStyles(); const classes = useStyles();

167
src/components/Profile.tsx
View File

@ -1,50 +1,80 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api/api';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
const Profile = () => { const Profile = () => {
const [state, setState] = useState({ const [state, setState] = useState({
user: { user: {
username: 'HyperionLegion', username: 'HyperionLegion',
}, },
pools: [
{
title: 'TJ Carpool',
description: '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?',
],
},
{
title: 'TJ Carpool',
description: '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?',
],
},
{
title: 'TJ Carpool',
description: '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: [], groups: [],
}); });
const [pools, setPools] = useState([
{
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 classes = useStyles();
const callAPI = () => { const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`) fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
@ -57,10 +87,20 @@ const Profile = () => {
}; };
useEffect(() => { useEffect(() => {
callAPI(); console.log(process.env);
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json())
.then((json) => {
if (json) {
setPools(json.data);
}
});
}, []); }, []);
return ( return (
<div className="" style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}> <div
className=""
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
>
<h1 <h1
className="d-flex justify-content-center p-4" className="d-flex justify-content-center p-4"
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }} style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
@ -68,19 +108,52 @@ const Profile = () => {
Profile Profile
</h1> </h1>
<div className="container" style={{ fontFamily: 'Courier New' }}> <div className="container" style={{ fontFamily: 'Courier New' }}>
<h2><u>{state.user.username}'s Pools</u></h2> <h2>
<u>{state.user.username}'s Pools</u>
</h2>
<div className=""> <div className="">
{state.pools.map((pool) => { {pools.map((pool) => {
return ( return (
<div <Card className={classes.root + 'd-inline-flex'}>
className="text-left m-2 p-1" <CardActionArea href={'/pool/' + pool.id}>
style={{minHeight: 50, minWidth: '200px', maxWidth: '200px', border: '3px #000000 solid', verticalAlign: 'center', textAlign: 'center', padding: '10px 10px 5px 10px', margin: '0px 10px 0px 10px', display: 'inline'}}> <CardContent>
<a href={'pool/' + pool.id}>{pool.title}</a> <Typography gutterBottom variant="h5" component="h2">
</div> {pool.pool_title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
{pool.pool_text}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
let link: string = 'localhost:3000/pool/' + pool.id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/pool/' + pool.id}
size="small"
color="primary"
>
Learn More
</Button>
</CardActions>
</Card>
); );
})} })}
</div> </div>
</div> </div>
<script></script>
</div> </div>
); );
}; };

4
yarn.lock
View File

@ -9460,7 +9460,7 @@
"strip-ansi" "6.0.0" "strip-ansi" "6.0.0"
"text-table" "0.2.0" "text-table" "0.2.0"
"react-dom@^17.0.2": "react-dom@^17.0.2", "react-dom@>=16.3.0", "react-dom@>=16.8.0":
"integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==" "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
"version" "17.0.2" "version" "17.0.2"
@ -9628,7 +9628,7 @@
"loose-envify" "^1.4.0" "loose-envify" "^1.4.0"
"prop-types" "^15.6.2" "prop-types" "^15.6.2"
"react@^17.0.2": "react@^17.0.2", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.3.0", "react@>=16.3.2", "react@>=16.8.0":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2" "version" "17.0.2"