improve groups UI

src/components/Group.tsx

@@ -1,13 +1,10 @@
 import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { makeAPIGetCall } from '../api/utils';
 import CreatePool from './CreatePool';
-
-const maybePluralize = (count: number, noun: string, suffix = 's') =>
-	`${count} ${noun}${count !== 1 ? suffix : ''}`;
+import Pool from './Pool';
 
 const SAMPLE_POOLS: Carpool.Pool[] = [
 	{
@@ -41,9 +38,17 @@ export default function Group() {
 	const { id } = useParams<{ id: string }>();
 	const [error, setError] = useState(false);
 	const [group, setGroup] = useState<Carpool.Group>();
-	const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
+	const [pools, setPools] = useState<Carpool.Pool[]>([]);
 	const [createPoolVisible, setCreatePoolVisible] = useState(false);
 
+	const fetchPools = useCallback(() => {
+		makeAPIGetCall(`/groups/${id}/pools`).then((res) => {
+			setPools(res.data.data);
+		});
+	}, [id]);
+
+	useEffect(() => fetchPools(), [fetchPools]);
+
 	useEffect(() => {
 		makeAPIGetCall(`/groups/${id}`).then((res) => {
 			if ('error' in res.data) {
@@ -52,10 +57,6 @@ export default function Group() {
 				setGroup(res.data.data);
 			}
 		});
-
-		makeAPIGetCall(`/groups/${id}/pools`).then((res) => {
-			setPools(res.data.data);
-		});
 	}, [id]);
 
 	if (error) {
@@ -93,19 +94,7 @@ export default function Group() {
 					{createPoolVisible && <CreatePool groupID={group._id} />}
 				</div>
 				{pools.map((pool, index) => (
-					<Card style={{ margin: '0.5rem', padding: '0.5rem' }} key={index}>
-						<a href={'/pools/' + 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="text-warning">
-							{maybePluralize(pool.comments.length, 'comment')}
-						</p>
-					</Card>
+					<Pool pool={pool} triggerUpdate={fetchPools} key={index} />
 				))}
 			</div>
 		</div>

src/components/Nav.tsx

@@ -19,6 +19,11 @@ const useStyles = makeStyles({
 		textTransform: `uppercase`,
 		color: `white`,
 	},
+	'linkText:hover': {
+		textDecoration: `none`,
+		textTransform: `uppercase`,
+		color: `white`,
+	},
 });
 const navLinks = [
 	{ title: `Profile`, path: `/profile` },
@@ -28,7 +33,7 @@ const navLinks = [
 const Nav = () => {
 	const classes = useStyles();
 	return (
-		<AppBar position="static" style={{ background: '#40E0D0' }}>
+		<AppBar position="static" style={{ background: '#4287f5' }}>
 			<Toolbar>
 				<Container maxWidth="xl" className={classes.navbarDisplayFlex}>
 					<IconButton href="/" edge="start" color="inherit" aria-label="home">

src/components/Pool.tsx

@@ -1,11 +1,10 @@
-import { useState, useEffect, useCallback, useRef, useContext } from 'react';
-import { useParams } from 'react-router';
+import { useState, useCallback, useRef, useContext } from 'react';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import Textarea from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import Comment from './Comment';
-import { makeAPIGetCall, makeAPIPostCall } from '../api/utils';
+import { makeAPIPostCall } from '../api/utils';
 import AuthenticationContext from './AuthenticationContext';
 import PoolMap from './PoolMap';
 
@@ -35,9 +34,13 @@ const SAMPLE_POOL = {
 	type: 'offer',
 };
 
-export default function Pool() {
-	const id = useParams<{ id: string }>().id;
-	const [pool, setPool] = useState<Carpool.Pool>();
+export default function Pool({
+	pool,
+	triggerUpdate,
+}: {
+	pool: Carpool.Pool;
+	triggerUpdate: Function;
+}) {
 	const { user } = useContext(AuthenticationContext);
 
 	const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
@@ -76,41 +79,12 @@ export default function Pool() {
 	);
 
 	const onRegister = useCallback(() => {
-		if (user) {
-			let userID = user._id;
-			makeAPIPostCall(`/pools/${id}/join`).then(() => {
-				if (pool) {
-					setPool({
-						...pool,
-						participant_ids: [...pool.participant_ids, userID],
-					});
-				}
-			});
-		}
-	}, [user, id, pool]);
+		makeAPIPostCall(`/pools/${pool._id}/join`).then(() => triggerUpdate());
+	}, [pool._id, triggerUpdate]);
 
 	const onUnregister = useCallback(() => {
-		if (user) {
-			makeAPIPostCall(`/pools/${id}/leave`).then(() => {
-				if (pool) {
-					let participants: string[] = [];
-					pool.participant_ids.forEach((e) => participants.push(e));
-					setPool({
-						...pool,
-						participant_ids: [...participants],
-					});
-				}
-			});
-		}
-	}, [user, id, pool]);
-
-	useEffect(() => {
-		makeAPIGetCall(`/pools/${id}`).then((response) => {
-			if (response.data.data) {
-				setPool(response.data.data);
-			}
-		});
-	}, [id, pool]);
+		makeAPIPostCall(`/pools/${pool._id}/leave`).then(() => triggerUpdate());
+	}, [pool._id, triggerUpdate]);
 
 	return (
 		<Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}>

src/components/PoolPage.tsx

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { makeAPIGetCall } from '../api/utils';
+import Pool from './Pool';
+
+export default function PoolPage() {
+	const id = useParams<{ id: string }>().id;
+	const [pool, setPool] = useState<Carpool.Pool>();
+
+	const fetchData = useCallback(() => {
+		makeAPIGetCall(`/pools/${id}`).then((response) => {
+			if (response.data.data) {
+				setPool(response.data.data);
+			}
+		});
+	}, [id]);
+
+	useEffect(() => fetchData(), [fetchData]);
+
+	return pool ? <Pool pool={pool} triggerUpdate={fetchData} /> : null;
+}