Add recent schedules list to homepage

sjkneisler · Aug 20, 2024 · 45d3cad · 45d3cad
1 parent 4dc84ff
commit 45d3cad
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 35 deletions.
diff --git a/app/src/contexts/ScheduleContainer.tsx b/app/src/contexts/ScheduleContainer.tsx
@@ -1,9 +1,7 @@
 import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { Outlet, useParams } from 'react-router-dom';
-import {
-  ScheduleWithIncludes,
-  UserWithIncludes,
-} from '../../../common/types/user';
+import useLocalStorageState from 'use-local-storage-state';
+import { ScheduleWithIncludes } from '../../../common/types/user';
 import { getScheduleByInviteCode } from '../api/client';
 
 export type ScheduleContextType = [
@@ -71,6 +69,26 @@ export const ScheduleContainer: React.FC = () => {
     ];
   }, [schedule]);
 
+  const [recentScheduleData, setRecentScheduleData] = useLocalStorageState<
+    [string, string][]
+  >('recentSchedules', { defaultValue: [] });
+
+  useEffect(() => {
+    if (
+      schedule !== null &&
+      !recentScheduleData.some(
+        ([recentScheduleInviteCode]) =>
+          recentScheduleInviteCode === schedule.inviteCode,
+      )
+    ) {
+      const newData: [string, string][] = [
+        [schedule.inviteCode, schedule.name],
+        ...recentScheduleData,
+      ];
+      setRecentScheduleData(newData);
+    }
+  }, [schedule, recentScheduleData, setRecentScheduleData]);
+
   if (!schedule) {
     return <Suspense />;
   }

diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx
@@ -2,15 +2,21 @@
 import {
   Box,
   Button,
+  Card,
   Container,
   FormControl,
   Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
   TextField,
   Typography,
 } from '@mui/material';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
+import useLocalStorageState from 'use-local-storage-state';
 import { createSchedule } from '../api/client';
 import { PageContainer } from '../components/PageContainer';
 
@@ -23,41 +29,82 @@ export const Home: React.FC = () => {
     navigate(`/schedule/${schedule.inviteCode}`);
   };
 
+  const [recentScheduleData] = useLocalStorageState<[string, string][]>(
+    'recentSchedules',
+    { defaultValue: [] },
+  );
+
   const theme = useTheme();
 
   return (
     <PageContainer>
       <Container maxWidth="sm">
-        <Stack spacing={3} marginTop={2}>
-          <Typography variant="subtitle1" align="center" fontStyle="italic">
-            A tool for scheduling recurring weekly events
-          </Typography>
-          <Box maxWidth="xs" alignSelf="center">
-            <form onSubmit={createCampaign}>
-              <FormControl>
-                <TextField
-                  label="Schedule Name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  inputProps={{
-                    'data-lpignore': true,
-                    style: {
-                      borderColor: theme.palette.primary.main,
-                    },
-                  }}
-                  autoComplete="off"
-                  InputLabelProps={{
-                    style: {
-                      color: theme.palette.primary.main,
-                    },
-                  }}
-                />
-                <Button variant="contained" type="submit" disabled={!name}>
-                  Create Schedule
-                </Button>
-              </FormControl>
-            </form>
-          </Box>
+        <Stack spacing={10}>
+          <Stack spacing={3} marginTop={2}>
+            <Typography variant="subtitle1" align="center" fontStyle="italic">
+              A tool for scheduling recurring weekly events
+            </Typography>
+            <Box maxWidth="xs" alignSelf="center">
+              <form onSubmit={createCampaign}>
+                <FormControl>
+                  <TextField
+                    label="Schedule Name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    inputProps={{
+                      'data-lpignore': true,
+                      style: {
+                        borderColor: theme.palette.primary.main,
+                      },
+                    }}
+                    autoComplete="off"
+                    InputLabelProps={{
+                      style: {
+                        color: theme.palette.primary.main,
+                      },
+                    }}
+                  />
+                  <Button variant="contained" type="submit" disabled={!name}>
+                    Create Schedule
+                  </Button>
+                </FormControl>
+              </form>
+            </Box>
+          </Stack>
+          {recentScheduleData.length > 0 && (
+            <Card sx={{ p: 2, maxWidth: 300, alignSelf: 'center' }}>
+              <Stack spacing={3}>
+                <Typography variant="h6" align="center">
+                  Recent Schedules
+                </Typography>
+                <Table>
+                  <TableBody>
+                    {recentScheduleData.map(
+                      ([recentScheduleInviteCode, recentScheduleName]) => (
+                        <TableRow>
+                          <TableCell sx={{ p: 0 }}>
+                            <Button
+                              component={Link}
+                              to={`/schedule/${recentScheduleInviteCode}`}
+                              sx={{ width: '100%', height: '100%' }}
+                              // style={{
+                              //   width: '100%',
+                              //   height: '100%',
+                              // }}
+                            >
+                              <Typography variant="body1">
+                                {recentScheduleName}
+                              </Typography>
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ),
+                    )}
+                  </TableBody>
+                </Table>
+              </Stack>
+            </Card>
+          )}
         </Stack>
       </Container>
     </PageContainer>

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "socket.io-client": "^4.7.4",
     "typescript": "*",
     "typescript-eslint": "^7.1.0",
+    "use-local-storage-state": "^19.4.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/yarn.lock b/yarn.lock
@@ -11886,6 +11886,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-local-storage-state@^19.4.0:
+  version "19.4.0"
+  resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-19.4.0.tgz#fdfb5a8d82202acf278940131e0cdf55f5ba6ae0"
+  integrity sha512-Ixs/kA2B6mbUv9B78MPNoZ8DGYJ7U407QPKBQrNZQbyYSvgPfBKPMscFTPy56Q+zmcmU9m0SGnF6qs1H2vXv6w==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"