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

feat: didn't go to sleep

Browse Source
This commit is contained in:
Rushil Umaretiya 2021-04-11 04:02:39 -04:00
parent 2ef179048b
commit c5b9447a53
No known key found for this signature in database
GPG Key ID: 4E8FAF9C926AF959
8 changed files with 136 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -10,6 +10,7 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.12",
"@types/google-map-react": "^2.1.0",
"@types/leaflet": "^1.7.0",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
@ -17,7 +18,9 @@
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"google-map-react": "^2.1.9",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"popper.js": "^1.16.1",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",

16
src/components/CreateGroup.tsx
View File

@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { useState } from 'react';
import { makeAPIPostCall } from '../api/utils';
import { useHistory } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
root: {
@ -19,11 +20,24 @@ const useStyles = makeStyles((theme) => ({
},
}));
const CreateGroup = () => {
const history = useHistory();
const [title, setTitle] = useState('No Title');
const classes = useStyles();
const onClick = () => {
makeAPIPostCall('/groups/', { title });
makeAPIPostCall('/groups/', {
name: title,
}).then((res) => {
handleCallback(res.data);
});
};
const handleCallback = (res: any) => {
if (res.status === 'error') {
alert('There was a problem with your form!');
} else {
history.push('/profile');
}
};
return (

41
src/components/CreatePool.tsx
View File

@ -5,7 +5,8 @@ import { makeStyles } from '@material-ui/core/styles';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { useEffect, useState } from 'react';
import { searchForPlaces } from '../api/google';
import { makeAPIPostCall } from '../api/utils';
import { makeAPIPostCall, makeAPIGetCall } from '../api/utils';
import { useHistory } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
root: {
@ -20,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
}));
const CreatePool = () => {
const history = useHistory();
const [title, setTitle] = useState('No Title');
const [capacity, setCapacity] = useState(0);
const [start, setStart] = useState('');
@ -29,6 +31,7 @@ const CreatePool = () => {
const [description, setDescription] = useState('');
const classes = useStyles();
const [group, setGroup] = useState('');
const [groups, setGroups] = useState<Carpool.Group[]>([]);
const onClick = () => {
makeAPIPostCall('/pools/', {
@ -40,9 +43,25 @@ const CreatePool = () => {
direction,
type,
group_id: group,
}).then((res) => {
handleCallback(res.data);
});
};
useEffect(() => {}, []);
const handleCallback = (res: any) => {
if (res.status === 'error') {
alert('There was a problem with your form!');
} else {
history.push('/profile');
}
};
useEffect(() => {
makeAPIGetCall('/users/@me/groups').then((res) => {
if (res.data.data) setGroups(res.data.data);
});
}, []);
return (
<div className="container">
<Card
@ -143,15 +162,21 @@ const CreatePool = () => {
/>
</div>
<div className="form-group">
<label className="" htmlFor="pool_start">
<label className="" htmlFor="group-select">
Group:
</label>
<input
type="text"
className="form-control"
placeholder=""
<select
name="group-select"
id="group-select"
onChange={(event) => setGroup(event.target.value)}
></input>
>
<option value="">Select a group</option>
{groups.map((group) => (
<option key={group._id} value={group._id}>
{group.name}
</option>
))}
</select>
</div>
<div className="form-group">
<label className="" htmlFor="location">

30
src/components/Groups.tsx
View File

@ -8,7 +8,10 @@ import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Box from '@material-ui/core/Box';
import { makeAPIGetCall } from '../api/utils';
import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
import { useHistory } from 'react-router-dom';
import GoogleMapReact from 'google-map-react';
const useStyles = makeStyles((theme) => ({
root: {
@ -27,6 +30,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Groups = () => {
const history = useHistory();
const classes = useStyles();
const [state, setState] = useState({
MyGroups: [
@ -46,6 +50,7 @@ const Groups = () => {
}
});
};
const [groups, setGroups] = useState<Carpool.Group[]>([
{
_id: '1234',
@ -93,7 +98,7 @@ const Groups = () => {
className={classes.root + 'd-inline-flex'}
style={{ margin: '0.5rem' }}
>
<CardActionArea href={'/group/' + group._id}>
<CardActionArea href={'/groups/' + group._id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.name}
@ -112,26 +117,35 @@ const Groups = () => {
color="primary"
onClick={() => {
alert('Copied to Clipboard');
let link: string = 'localhost:3000/group/' + group._id;
let link: string = 'localhost:3000/groups/' + group._id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/group/' + group._id}
href={'/groups/' + group._id}
size="small"
color="primary"
>
Learn More
</Button>
<form action={'/requestgroup/' + group._id} method="POST">
<input
<button
type="submit"
onClick={() => {
makeAPIPostCall(`/groups/${group._id}/join`).then((res) => {
if (res.data.status === 'error') {
alert('There was a problem joining the group!');
} else {
history.push(`/groups/${group._id}`);
}
});
}}
value="Request to Join"
className="btn btn-success d-flex"
/>
</form>
>
Join Group
</button>
</CardActions>
</Card>
);

48
src/components/MyGroups.tsx
View File

@ -28,35 +28,11 @@ const useStyles = makeStyles((theme) => ({
}));
const MyGroups = () => {
const classes = useStyles();
const [state, setState] = useState({
MyGroups: [
{
id: 1,
group_title: 'TJ',
},
],
});
const callAPI = () => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
setState(data);
}
});
};
const [groups, setGroups] = useState<Carpool.Group[]>([
{
_id: '1234',
name: 'TJ',
creator_id: '12345Q',
member_ids: [],
},
]);
const [groups, setGroups] = useState<Carpool.Group[]>();
useEffect(() => {
makeAPIGetCall('/browse/groups').then((res) => {
makeAPIGetCall('/users/@me/groups').then((res) => {
if (res.data.data) {
setGroups(res.data.data);
}
@ -86,19 +62,19 @@ const MyGroups = () => {
</Box>
<div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br>
{groups.map((group, index) => {
let background;
if (index % 2 === 0) {
background = '#F1EAE8';
} else {
background = '#FFFFFF';
}
{groups?.map((group, index) => {
// let background;
// if (index % 2 === 0) {
// background = '#F1EAE8';
// } else {
// background = '#FFFFFF';
// }
return (
<Card
className={classes.root + 'd-inline-flex'}
style={{ margin: '0.5rem' }}
>
<CardActionArea href={'/group/' + group._id}>
<CardActionArea href={'/groups/' + group._id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.name}
@ -117,14 +93,14 @@ const MyGroups = () => {
color="primary"
onClick={() => {
alert('Copied to Clipboard');
let link: string = 'localhost:3000/group/' + group._id;
let link: string = 'localhost:3000/groups/' + group._id;
navigator.clipboard.writeText(link);
}}
>
Share
</Button>
<Button
href={'/group/' + group._id}
href={'/groups/' + group._id}
size="small"
color="primary"
>

5
src/components/Nav.tsx
View File

@ -22,9 +22,8 @@ const useStyles = makeStyles({
});
const navLinks = [
{ title: `Profile`, path: `/profile` },
{ title: `Create Pool`, path: `/create_pool` },
// { title: `Groups`, path: `/groups` },
// { title: `MyGroups`, path: `/mygroups` },
{ title: `Groups`, path: `/groups` },
{ title: `My Groups`, path: `/mygroups` },
];
const Nav = () => {
const classes = useStyles();

32
src/components/PoolMap.tsx
View File

@ -1,27 +1,17 @@
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import GoogleMapReact from 'google-map-react';
const center = {
lat: 0,
lng: -180,
};
const position = {
lat: 37.772,
lng: -122.214,
};
const position = { lat: 39.043758, lng: -77.487442 };
export default function PoolMap() {
return (
<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
<div style={{ height: '50vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{
key: 'AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI',
}}
defaultCenter={position}
defaultZoom={11}
></GoogleMapReact>
</div>
);
}

36
yarn.lock
View File

@ -1161,6 +1161,13 @@
dependencies:
fast-deep-equal "^3.1.3"
"@googlemaps/js-api-loader@^1.7.0":
version "1.11.3"
resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.11.3.tgz#de2db86c5c64ed62f2f16dc59eb59821257dc583"
integrity sha512-MUX04/b5dBIqi2jl2/89FS48gWPm5cgUwO4dDffIoylKv/e7HP9gJvpKqk1/JMIYPX2y/qO2TqFteRAWmNU1BA==
dependencies:
fast-deep-equal "^3.1.3"
"@hapi/address@2.x.x":
version "2.1.4"
resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
@ -1380,6 +1387,11 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
"@mapbox/point-geometry@^0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
"@material-ui/core@^4.11.3":
version "4.11.3"
resolved "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz"
@ -1823,6 +1835,13 @@
"@types/minimatch" "*"
"@types/node" "*"
"@types/google-map-react@^2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@types/google-map-react/-/google-map-react-2.1.0.tgz#0acee58ae23f471d3dbbe345c273728458945ab6"
integrity sha512-HQF008Q8UKBBZu2T2++P5vx71IE52R2bHgmaKV8n6V5gyZIcrjsAe1OjIbgIN68aqjeo99N0/f10rYRyf2gTAA==
dependencies:
"@types/react" "*"
"@types/graceful-fs@^4.1.2":
version "4.1.5"
resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@ -4865,7 +4884,7 @@ etag@~1.8.1:
resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
eventemitter3@^4.0.0:
eventemitter3@^4.0.0, eventemitter3@^4.0.4:
version "4.0.7"
resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@ -5489,6 +5508,16 @@ globby@^6.1.0:
pify "^2.0.0"
pinkie-promise "^2.0.0"
google-map-react@^2.1.9:
version "2.1.9"
resolved "https://registry.yarnpkg.com/google-map-react/-/google-map-react-2.1.9.tgz#6e539ce8bf28e7b8cda6058402e7581d1d1cec3d"
integrity sha512-//Pa0o6sdspU2H0ehVztSDQSnYYeV6TY4Z6ftty34yiCJYLliOzeq17dA9uFkyUFdL+XwbTU6e9mfs+bjBMIzw==
dependencies:
"@googlemaps/js-api-loader" "^1.7.0"
"@mapbox/point-geometry" "^0.1.0"
eventemitter3 "^4.0.4"
prop-types "^15.7.2"
graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
version "4.2.6"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
@ -7112,6 +7141,11 @@ last-call-webpack-plugin@^3.0.0:
lodash "^4.17.5"
webpack-sources "^1.1.0"
leaflet@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
leven@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"