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

groups design

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-10 22:02:17 -04:00
parent 5269d9b889
commit a1663d0f9a
2 changed files with 162 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Groups.tsx
View File

@ -1,8 +1,34 @@
import Button from '@material-ui/core/Button';
import React, { useState, useEffect } from 'react'; 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';
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 Groups = () => {
const classes = useStyles();
const [state, setState] = useState({ const [state, setState] = useState({
Groups: [ MyGroups: [
{ {
id: 1, id: 1,
group_title: 'TJ', group_title: 'TJ',
@ -24,39 +50,73 @@ const Groups = () => {
callAPI(); callAPI();
}, []); }, []);
return ( return (
<div className="bg-dark" style={{ minHeight: '100vh' }}> <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: 'Impact' }} style={{ backgroundColor: '#F1EAE8' }}
> >
Groups Groups
</h1> </h1>
<a <Box textAlign="center">
className="btn btn-large btn-success" <Button
variant="contained"
className={classes.button}
startIcon={<CloudUploadIcon />}
href="/create_group" href="/create_group"
style={{ fontFamily: 'Courier New' }}
> >
Create Group Create Group
</a> </Button>
</Box>
<div className="container" style={{ fontFamily: 'Courier New' }}> <div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br> <br></br>
{state.Groups.map((group, index) => { {state.MyGroups.map((group, index) => {
let background;
if (index % 2 === 0) {
background = '#F1EAE8';
} else {
background = '#FFFFFF';
}
return ( return (
<div <Card
className="card card-body text-left" className={classes.root + 'd-inline-flex'}
style={{ style={{ margin: '0.5rem' }}
backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF', >
<CardActionArea href={'/group/' + group.id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.group_title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
></Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
let link: string = 'localhost:3000/group/' + group.id;
navigator.clipboard.writeText(link);
}} }}
> >
<form action={'/requestgroup/' + group.id} method="POST"> Share
<p className="card-title">{group.group_title}</p> </Button>
<input <Button
type="submit" href={'/group/' + group.id}
value="Request to Join" size="small"
className="btn btn-success d-flex" color="primary"
/> >
</form> Learn More
</div> </Button>
</CardActions>
</Card>
); );
})} })}
</div> </div>

85
src/components/MyGroups.tsx
View File

@ -1,6 +1,32 @@
import Button from '@material-ui/core/Button';
import React, { useState, useEffect } from 'react'; 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';
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 MyGroups = () => {
const classes = useStyles();
const [state, setState] = useState({ const [state, setState] = useState({
MyGroups: [ MyGroups: [
{ {
@ -24,20 +50,26 @@ const MyGroups = () => {
callAPI(); callAPI();
}, []); }, []);
return ( return (
<div className="bg-dark" style={{ minHeight: '100vh' }}> <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: 'Impact' }} style={{ backgroundColor: '#F1EAE8' }}
> >
My Groups My Groups
</h1> </h1>
<a <Box textAlign="center">
className="btn btn-large btn-success" <Button
variant="contained"
className={classes.button}
startIcon={<CloudUploadIcon />}
href="/create_group" href="/create_group"
style={{ fontFamily: 'Courier New' }}
> >
Create Group Create Group
</a> </Button>
</Box>
<div className="container" style={{ fontFamily: 'Courier New' }}> <div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br> <br></br>
{state.MyGroups.map((group, index) => { {state.MyGroups.map((group, index) => {
@ -48,14 +80,43 @@ const MyGroups = () => {
background = '#FFFFFF'; background = '#FFFFFF';
} }
return ( return (
<div <Card
className="card card-body text-left" className={classes.root + 'd-inline-flex'}
style={{ backgroundColor: background }} style={{ margin: '0.5rem' }}
> >
<a href={'/group/' + group.id} className="card-title"> <CardActionArea href={'/group/' + group.id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{group.group_title} {group.group_title}
</a> </Typography>
</div> <Typography
variant="body2"
color="textSecondary"
component="p"
></Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
size="small"
color="primary"
onClick={() => {
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> </div>