From 543d8372a76e491f08b0a9d60f9636033fb2fcbd Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Sat, 10 Apr 2021 17:04:45 -0400
Subject: [PATCH] added cards to profile
---
src/App.tsx | 2 -
src/components/MyPools.tsx | 146 -------------------------------------
src/components/Nav.tsx | 1 -
src/components/Profile.tsx | 103 +++++++++++++++-----------
4 files changed, 61 insertions(+), 191 deletions(-)
delete mode 100644 src/components/MyPools.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 612b174..e49403c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import CreatePool from './components/CreatePool';
import CreateGroup from './components/CreateGroup';
import Groups from './components/Groups';
import MyGroups from './components/MyGroups';
-import MyPools from './components/MyPools';
import UpdatePool from './components/UpdatePool';
import Home from './components/Home';
import Main from './components/Main';
@@ -30,7 +29,6 @@ function App() {
<Route component={CreateGroup} path="/create_group" />
<Route component={Groups} path="/groups" />
<Route component={MyGroups} path="/mygroups" />
- <Route component={MyPools} path="/mypools" />
<Route component={UpdatePool} path="/update_pool" />
<Route component={Group} path="/group/:id" />
<Route component={Pool} path="/pool/:id" />
diff --git a/src/components/MyPools.tsx b/src/components/MyPools.tsx
deleted file mode 100644
index 93d0d27..0000000
--- a/src/components/MyPools.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-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([
- {
- id: 1,
- pool_title: 'TJ Carpool',
- pool_text: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- {
- id: 2,
- pool_title: 'TJ Carpool',
- pool_text: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- {
- id: 3,
- pool_title: 'TJ Carpool',
- pool_text: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- {
- id: 4,
- pool_title: 'TJ Carpool',
- pool_text: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- ]);
-
- useEffect(() => {
- console.log(process.env);
- fetch(`${API_ENDPOINT}/my_pools`)
- .then((response) => response.json())
- .then((json) => {
- if (json) {
- setPools(json.data);
- }
- });
- }, []);
-
- 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
- className="d-flex justify-content-center p-4"
- style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
- >
- Pools
- </h1>
- <a
- className="btn btn-large btn-success"
- href="/create_pool"
- style={{ fontFamily: 'Courier New' }}
- >
- Create Pool
- </a>
- <div className="container" style={{ fontFamily: 'Courier New' }}>
- <br></br>
- {pools.map((pool, index) => {
- let background;
- if (index % 2 === 0) {
- background = '#F1EAE8';
- } else {
- background = '#FFFFFF';
- }
- return (
- <Card className={classes.root + 'd-inline-flex'}>
- <CardActionArea>
- <CardContent>
- <Typography gutterBottom variant="h5" component="h2">
- {pool.pool_title}
- </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>
- </div>
- );
-};
-
-export default MyPools;
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index f2993f1..595a4e6 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -24,7 +24,6 @@ const navLinks = [
{ title: `Profile`, path: `/profile` },
{ title: `Groups`, path: `/groups` },
{ title: `MyGroups`, path: `/mygroups` },
- { title: `MyPools`, path: `/mypools` },
];
const Nav = () => {
const classes = useStyles();
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 3e7935c..5beca9e 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -22,46 +22,58 @@ const Profile = () => {
user: {
username: 'HyperionLegion',
},
- pools: [
- {
- title: 'TJ Carpool',
- description: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- id: 1,
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- {
- title: 'TJ Carpool',
- description: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- id: 2,
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- {
- title: 'TJ Carpool',
- description: 'Carpool from TJ track to homes',
- start_time: '4/10/2021 3:00 PM',
- id: 3,
- end_time: '4/10/2021 4:00 PM',
- capacity: 2,
- participants: [],
- comments: [
- 'What is the covid vaccination status of all the participants?',
- ],
- },
- ],
groups: [],
});
+ const [pools, setPools] = useState([
+ {
+ id: 1,
+ pool_title: 'TJ Carpool',
+ pool_text: 'Carpool from TJ track to homes',
+ start_time: '4/10/2021 3:00 PM',
+ end_time: '4/10/2021 4:00 PM',
+ capacity: 2,
+ participants: [],
+ comments: [
+ 'What is the covid vaccination status of all the participants?',
+ ],
+ },
+ {
+ id: 2,
+ pool_title: 'TJ Carpool',
+ pool_text: 'Carpool from TJ track to homes',
+ start_time: '4/10/2021 3:00 PM',
+ end_time: '4/10/2021 4:00 PM',
+ capacity: 2,
+ participants: [],
+ comments: [
+ 'What is the covid vaccination status of all the participants?',
+ ],
+ },
+ {
+ id: 3,
+ pool_title: 'TJ Carpool',
+ pool_text: 'Carpool from TJ track to homes',
+ start_time: '4/10/2021 3:00 PM',
+ end_time: '4/10/2021 4:00 PM',
+ capacity: 2,
+ participants: [],
+ comments: [
+ 'What is the covid vaccination status of all the participants?',
+ ],
+ },
+ {
+ id: 4,
+ pool_title: 'TJ Carpool',
+ pool_text: 'Carpool from TJ track to homes',
+ start_time: '4/10/2021 3:00 PM',
+ end_time: '4/10/2021 4:00 PM',
+ capacity: 2,
+ participants: [],
+ comments: [
+ 'What is the covid vaccination status of all the participants?',
+ ],
+ },
+ ]);
const classes = useStyles();
const callAPI = () => {
@@ -75,7 +87,14 @@ const Profile = () => {
};
useEffect(() => {
- callAPI();
+ console.log(process.env);
+ fetch(`${API_ENDPOINT}/my_pools`)
+ .then((response) => response.json())
+ .then((json) => {
+ if (json) {
+ setPools(json.data);
+ }
+ });
}, []);
return (
<div
@@ -93,20 +112,20 @@ const Profile = () => {
<u>{state.user.username}'s Pools</u>
</h2>
<div className="">
- {state.pools.map((pool) => {
+ {pools.map((pool) => {
return (
<Card className={classes.root + 'd-inline-flex'}>
<CardActionArea href={'/pool/' + pool.id}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
- {pool.title}
+ {pool.pool_title}
</Typography>
<Typography
variant="body2"
color="textSecondary"
component="p"
>
- {pool.description}
+ {pool.pool_text}
</Typography>
</CardContent>
</CardActionArea>