From 986872438fef5ae3124f487e071d45278dac753e Mon Sep 17 00:00:00 2001
From: nkanchinadam <53796958+nkanchinadam@users.noreply.github.com>
Date: Sat, 10 Apr 2021 19:42:21 -0400
Subject: [PATCH] Add files via upload
---
src/components/Pools.tsx | 2 +-
src/components/Profile.tsx | 211 ++++++++++++++-----------------------
2 files changed, 83 insertions(+), 130 deletions(-)
diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx
index b5c1457..f7a5d1a 100644
--- a/src/components/Pools.tsx
+++ b/src/components/Pools.tsx
@@ -105,7 +105,7 @@ const Pools = () => {
</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">
+ <p className="" style={{color: '#9E6105'}}>
{maybePluralize(pool.comments.length, 'comment')}
</p>
</div>
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 973c036..9178377 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,154 +1,107 @@
-import Button from '@material-ui/core/Button';
-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 { useContext, useEffect, useState } from 'react';
-import { API_ENDPOINT } from '../api/api';
-import AuthenticationContext from './AuthenticationContext';
+import { CenterFocusStrong } from '@material-ui/icons';
+import React, { useState, useEffect } from 'react';
-const useStyles = makeStyles({
- root: {
- maxWidth: 345,
- },
- media: {
- height: 140,
- },
-});
+const maybePluralize = (count: number, noun: string, suffix = 's') =>
+ `${count} ${noun}${count !== 1 ? suffix : ''}`;
const Profile = () => {
- const { user, isLoggedIn } = useContext(AuthenticationContext);
- const [groups, setGroups] = useState<Carpool.Group[]>([]);
- 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?',
- ],
+ const [state, setState] = useState({
+ user: {
+ username: 'HyperionLegion',
},
- {
- 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();
+ 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,
+ participant_ids: [],
+ 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,
+ participant_ids: [],
+ 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,
+ participant_ids: [],
+ comments: [
+ 'What is the covid vaccination status of all the participants?',
+ ],
+ },
+ ],
+ groups: [],
+ });
- useEffect(() => {
- console.log(process.env);
- fetch(`${API_ENDPOINT}/my_pools`)
+ const callAPI = () => {
+ fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
.then((response) => response.json())
- .then((json) => {
- if (json) {
- setPools(json.data);
+ .then((data) => {
+ if (data !== undefined) {
+ setState(data);
}
});
+ };
+
+ useEffect(() => {
+ callAPI();
}, []);
-
- if (!user) {
- return <h1>Please Sign In</h1>;
- }
-
return (
- <div
- className=""
- style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
- >
+ <div className="bg-dark" style={{ minHeight: '100vh' }}>
<h1
className="d-flex justify-content-center p-4"
- style={{ backgroundColor: '#F1EAE8' }}
+ style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
>
Profile
</h1>
- <div className="container">
- <h2>
- <u>{user.username}'s Pools</u>
- </h2>
+ <div className="container" style={{ fontFamily: 'Courier New', alignSelf: 'center' }}>
+ <h2 style={{color: '#FFFFFF'}}><u>{state.user.username}'s Pools</u></h2>
<div className="">
- {pools.map((pool) => {
+ {state.pools.map((pool, index) => {
+ let background;
+ if (index % 2 === 0) {
+ background = '#F1EAE8';
+ } else {
+ background = '#FFFFFF';
+ }
return (
- <Card
- className={classes.root + 'd-inline-flex'}
- style={{ margin: '0.5rem' }}
+ <div
+ className="card card-body text-left"
+ style={{ backgroundColor: background }}
>
- <CardActionArea href={'/pool/' + pool.id}>
- <CardContent>
- <Typography gutterBottom variant="h5" component="h2">
- {pool.pool_title}
- </Typography>
- <Typography
- variant="body2"
- color="textSecondary"
- component="p"
- >
- {pool.pool_text}
- </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>
+ <a href={'/Pool/' + pool.id} className="card-title">
+ {pool.title}
+ </a>
+ <p className="text-left">
+ Capacity: {pool.participant_ids.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="" style={{color: '#9E6105'}}>
+ {maybePluralize(pool.comments.length, 'comment')}
+ </p>
+ </div>
);
})}
</div>
</div>
- <script></script>
</div>
);
};