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

Integrate CreatePool into the Group page

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-11 10:19:38 -04:00
parent a8d4e1a692
commit b0c03b4887
4 changed files with 91 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -4,7 +4,6 @@ import Nav from './components/Nav';
import Group from './components/Group'; import Group from './components/Group';
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 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';
@ -26,7 +25,6 @@ function App() {
<Switch> <Switch>
<Route component={Main} path="/about" /> <Route component={Main} path="/about" />
<Route component={Authenticator} path="/auth/:provider/callback" /> <Route component={Authenticator} path="/auth/:provider/callback" />
<Route component={CreatePool} path="/create_pool" />
<Route component={CreateGroup} path="/create_group" /> <Route component={CreateGroup} path="/create_group" />
<Route component={MyGroups} path="/mygroups" /> <Route component={MyGroups} path="/mygroups" />
<Route component={UpdatePool} path="/update_pool" /> <Route component={UpdatePool} path="/update_pool" />

128
src/components/CreatePool.tsx
View File

@ -8,11 +8,7 @@ import { searchForPlaces } from '../api/google';
import { makeAPIPostCall, makeAPIGetCall } from '../api/utils'; import { makeAPIPostCall, makeAPIGetCall } from '../api/utils';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { makeAPIPostCall } from '../api/utils'; import PlacesAutocomplete from 'react-places-autocomplete';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@ -26,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
}, },
})); }));
const CreatePool = () => { const CreatePool = ({ groupID }: { groupID?: string }) => {
const history = useHistory(); const history = useHistory();
const [title, setTitle] = useState('No Title'); const [title, setTitle] = useState('No Title');
const [capacity, setCapacity] = useState(0); const [capacity, setCapacity] = useState(0);
@ -188,6 +184,7 @@ const CreatePool = () => {
name="group-select" name="group-select"
id="group-select" id="group-select"
onChange={(event) => setGroup(event.target.value)} onChange={(event) => setGroup(event.target.value)}
defaultValue={groupID}
> >
<option value="">Select a group</option> <option value="">Select a group</option>
{groups.map((group) => ( {groups.map((group) => (
@ -218,67 +215,66 @@ const CreatePool = () => {
> >
Search Search
</button> </button>
<PlacesAutocomplete <PlacesAutocomplete
value={address} value={address}
onChange={handleChange} onChange={handleChange}
onSelect={handleSelect} onSelect={handleSelect}
>
{({
getInputProps,
suggestions,
getSuggestionItemProps,
loading,
}) => (
<div>
<label className="" htmlFor="address">
Address:
</label>
<input
name="address"
id="address"
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input form-control',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map((suggestion) => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</div>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={onClick}
startIcon={<CloudUploadIcon />}
> >
Submit {({
</Button> getInputProps,
</CardContent> suggestions,
</Card> getSuggestionItemProps,
</div> loading,
}) => (
<div>
<label className="" htmlFor="address">
Address:
</label>
<input
name="address"
id="address"
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input form-control',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map((suggestion) => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</div>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={onClick}
startIcon={<CloudUploadIcon />}
>
Submit
</Button>
</CardContent>
</Card>
</div> </div>
); );
}; };

55
src/components/Group.tsx
View File

@ -1,9 +1,10 @@
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { makeAPIGetCall } from '../api/utils'; import { makeAPIGetCall } from '../api/utils';
import CreatePool from './CreatePool';
const maybePluralize = (count: number, noun: string, suffix = 's') => const maybePluralize = (count: number, noun: string, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`; `${count} ${noun}${count !== 1 ? suffix : ''}`;
@ -41,6 +42,7 @@ export default function Group() {
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [group, setGroup] = useState<Carpool.Group>(); const [group, setGroup] = useState<Carpool.Group>();
const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS); const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
const [createPoolVisible, setCreatePoolVisible] = useState(false);
useEffect(() => { useEffect(() => {
makeAPIGetCall(`/groups/${id}`).then((res) => { makeAPIGetCall(`/groups/${id}`).then((res) => {
@ -80,30 +82,31 @@ export default function Group() {
<Typography variant="h3" align="center"> <Typography variant="h3" align="center">
Pools Pools
</Typography> </Typography>
<Button <div style={{ display: 'flex', flexDirection: 'column' }}>
onClick={() => (window.location.href = '/create_pool')} <div>
variant="contained" <Button
> onClick={() => setCreatePoolVisible((v) => !v)}
Create Pool variant="contained"
</Button> >
<div className="container"> {createPoolVisible ? 'Cancel' : 'Create Pool'}
{pools.map((pool, index) => { </Button>
return ( {createPoolVisible && <CreatePool groupID={group._id} />}
<Card style={{ margin: '0.5em' }} key={index}> </div>
<a href={'/pools/' + pool._id} className="card-title"> {pools.map((pool, index) => (
{pool.title} <Card style={{ margin: '0.5rem', padding: '0.5rem' }} key={index}>
</a> <a href={'/pools/' + pool._id} className="card-title">
<p className="text-left"> {pool.title}
Capacity: {pool.participant_ids.length} / {pool.capacity} </a>
</p> <p className="text-left">
<p className="text-left">Start Time: {pool.start_time}</p> Capacity: {pool.participant_ids.length} / {pool.capacity}
<p className="text-left">End Time: {pool.end_time}</p> </p>
<p className="text-warning"> <p className="text-left">Start Time: {pool.start_time}</p>
{maybePluralize(pool.comments.length, 'comment')} <p className="text-left">End Time: {pool.end_time}</p>
</p> <p className="text-warning">
</Card> {maybePluralize(pool.comments.length, 'comment')}
); </p>
})} </Card>
))}
</div> </div>
</div> </div>
); );

20
src/components/Groups.tsx
View File

@ -11,8 +11,6 @@ import Box from '@material-ui/core/Box';
import { makeAPIGetCall, makeAPIPostCall } from '../api/utils'; import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import GoogleMapReact from 'google-map-react';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
maxWidth: 345, maxWidth: 345,
@ -32,24 +30,6 @@ const useStyles = makeStyles((theme) => ({
const Groups = () => { const Groups = () => {
const history = useHistory(); const history = useHistory();
const classes = useStyles(); 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[]>([ const [groups, setGroups] = useState<Carpool.Group[]>([
{ {