mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-05-02 07:59:51 -04:00
Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main
This commit is contained in:
Michael Fatemi
commit
445a8b7f80
src/components
|
|
@ -126,7 +126,7 @@ const CreatePool = () => {
|
|||
onChange={(event) => setType(event.target.value)}
|
||||
>
|
||||
<option value="offer">Offering carpool</option>
|
||||
<option value="request">Requesting carpooll</option>
|
||||
<option value="request">Requesting carpool</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,51 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
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 { 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';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
maxWidth: 345,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
media: {
|
||||
height: 140,
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing(1),
|
||||
background: '#40E0D0',
|
||||
'&:hover': {
|
||||
background: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
}));
|
||||
const Groups = () => {
|
||||
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',
|
||||
|
|
@ -20,39 +64,76 @@ const Groups = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<div
|
||||
className=""
|
||||
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
style={{ backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
Groups
|
||||
</h1>
|
||||
<a
|
||||
className="btn btn-large btn-success"
|
||||
href="/create_group"
|
||||
style={{ fontFamily: 'Courier New' }}
|
||||
>
|
||||
Create Group
|
||||
</a>
|
||||
<Box textAlign="center">
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button}
|
||||
startIcon={<CloudUploadIcon />}
|
||||
href="/create_group"
|
||||
>
|
||||
Create Group
|
||||
</Button>
|
||||
</Box>
|
||||
<div className="container" style={{ fontFamily: 'Courier New' }}>
|
||||
<br></br>
|
||||
|
||||
{groups.map((group, index) => {
|
||||
return (
|
||||
<div
|
||||
className="card card-body text-left"
|
||||
style={{
|
||||
backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
|
||||
}}
|
||||
<Card
|
||||
className={classes.root + 'd-inline-flex'}
|
||||
style={{ margin: '0.5rem' }}
|
||||
>
|
||||
<form action={'/requestgroup/' + group._id} method="POST">
|
||||
<p className="card-title">{group.name}</p>
|
||||
<input
|
||||
type="submit"
|
||||
value="Request to Join"
|
||||
className="btn btn-success d-flex"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<CardActionArea href={'/group/' + group._id}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{group.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
component="p"
|
||||
></Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
|
||||
<CardActions>
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
alert('Copied to Clipboard');
|
||||
let link: string = 'localhost:3000/group/' + group._id;
|
||||
navigator.clipboard.writeText(link);
|
||||
}}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
<Button
|
||||
href={'/group/' + group._id}
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
<form action={'/requestgroup/' + group._id} method="POST">
|
||||
<input
|
||||
type="submit"
|
||||
value="Request to Join"
|
||||
className="btn btn-success d-flex"
|
||||
/>
|
||||
</form>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,51 @@
|
|||
import Button from '@material-ui/core/Button';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
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 { 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';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
maxWidth: 345,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
media: {
|
||||
height: 140,
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing(1),
|
||||
background: '#40E0D0',
|
||||
'&:hover': {
|
||||
background: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
}));
|
||||
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',
|
||||
|
|
@ -20,20 +64,26 @@ const MyGroups = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<div
|
||||
className=""
|
||||
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
style={{ backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
My Groups
|
||||
</h1>
|
||||
<a
|
||||
className="btn btn-large btn-success"
|
||||
href="/create_group"
|
||||
style={{ fontFamily: 'Courier New' }}
|
||||
>
|
||||
Create Group
|
||||
</a>
|
||||
<Box textAlign="center">
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button}
|
||||
startIcon={<CloudUploadIcon />}
|
||||
href="/create_group"
|
||||
>
|
||||
Create Group
|
||||
</Button>
|
||||
</Box>
|
||||
<div className="container" style={{ fontFamily: 'Courier New' }}>
|
||||
<br></br>
|
||||
{groups.map((group, index) => {
|
||||
|
|
@ -44,14 +94,44 @@ const MyGroups = () => {
|
|||
background = '#FFFFFF';
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="card card-body text-left"
|
||||
style={{ backgroundColor: background }}
|
||||
<Card
|
||||
className={classes.root + 'd-inline-flex'}
|
||||
style={{ margin: '0.5rem' }}
|
||||
>
|
||||
<a href={'/groups/' + group._id} className="card-title">
|
||||
{group.name}
|
||||
</a>
|
||||
</div>
|
||||
<CardActionArea href={'/group/' + group._id}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{group.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
component="p"
|
||||
></Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
|
||||
<CardActions>
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
alert('Copied to Clipboard');
|
||||
let link: string = 'localhost:3000/group/' + group._id;
|
||||
navigator.clipboard.writeText(link);
|
||||
}}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
<Button
|
||||
href={'/group/' + group._id}
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user