mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
added cards to profile
This commit is contained in:
Joshua Hsueh
parent
8f11ed7947
commit
7260ae0f96
31
package-lock.json
generated
31
package-lock.json
generated
|
|
@ -1875,12 +1875,19 @@
|
|||
"node_modules/@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@restart/context": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
|
||||
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
|
||||
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@restart/hooks": {
|
||||
"version": "0.3.26",
|
||||
|
|
@ -1889,6 +1896,9 @@
|
|||
"dependencies": {
|
||||
"lodash": "^4.17.20",
|
||||
"lodash-es": "^4.17.20"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
|
|
@ -13403,6 +13413,9 @@
|
|||
"dependencies": {
|
||||
"react-is": "^16.3.2",
|
||||
"warning": "^4.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types-extra/node_modules/react-is": {
|
||||
|
|
@ -13652,6 +13665,10 @@
|
|||
"react-transition-group": "^4.4.1",
|
||||
"uncontrollable": "^7.2.1",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
|
|
@ -13839,6 +13856,10 @@
|
|||
"prop-types": "^15.7.2",
|
||||
"uncontrollable": "^7.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0",
|
||||
"react-dom": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
|
|
@ -16964,6 +16985,9 @@
|
|||
"@types/react": ">=16.9.11",
|
||||
"invariant": "^2.2.4",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||
|
|
@ -20858,7 +20882,8 @@
|
|||
"@restart/context": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
|
||||
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
|
||||
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"@restart/hooks": {
|
||||
"version": "0.3.26",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
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 MyPools = () => {
|
||||
// const id = props.match.params.id;
|
||||
const [pools, setPools] = useState([
|
||||
|
|
@ -67,6 +83,8 @@ const MyPools = () => {
|
|||
|
||||
const maybePluralize = (count: number, noun: string, suffix = 's') =>
|
||||
`${count} ${noun}${count !== 1 ? suffix : ''}`;
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<h1
|
||||
|
|
@ -92,22 +110,32 @@ const MyPools = () => {
|
|||
background = '#FFFFFF';
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="card card-body text-left"
|
||||
style={{ backgroundColor: background }}
|
||||
>
|
||||
<a href={'/Pool/' + pool.id} className="card-title">
|
||||
<Card className={classes.root + 'd-inline-flex'}>
|
||||
<CardActionArea>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{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>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
component="p"
|
||||
>
|
||||
Lizards are a widespread group of squamate reptiles, with
|
||||
over 6,000 species, ranging across all continents except
|
||||
Antarctica
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Button size="small" color="primary">
|
||||
Share
|
||||
</Button>
|
||||
<Button size="small" color="primary">
|
||||
Learn More
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,22 @@
|
|||
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 [state, setState] = useState({
|
||||
user: {
|
||||
|
|
@ -45,6 +62,7 @@ const Profile = () => {
|
|||
],
|
||||
groups: [],
|
||||
});
|
||||
const classes = useStyles();
|
||||
|
||||
const callAPI = () => {
|
||||
fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
|
||||
|
|
@ -60,7 +78,10 @@ const Profile = () => {
|
|||
callAPI();
|
||||
}, []);
|
||||
return (
|
||||
<div className="" style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}>
|
||||
<div
|
||||
className=""
|
||||
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
|
||||
|
|
@ -68,19 +89,52 @@ const Profile = () => {
|
|||
Profile
|
||||
</h1>
|
||||
<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="">
|
||||
{state.pools.map((pool) => {
|
||||
return (
|
||||
<div
|
||||
className="text-left m-2 p-1"
|
||||
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'}}>
|
||||
<a href={'pool/' + pool.id}>{pool.title}</a>
|
||||
</div>
|
||||
<Card className={classes.root + 'd-inline-flex'}>
|
||||
<CardActionArea href={'/pool/' + pool.id}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{pool.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
component="p"
|
||||
>
|
||||
{pool.description}
|
||||
</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>
|
||||
<script></script>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9460,7 +9460,7 @@
|
|||
"strip-ansi" "6.0.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=="
|
||||
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
|
||||
"version" "17.0.2"
|
||||
|
|
@ -9628,7 +9628,7 @@
|
|||
"loose-envify" "^1.4.0"
|
||||
"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=="
|
||||
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
||||
"version" "17.0.2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user