diff --git a/app/src/contexts/ScheduleContainer.tsx b/app/src/contexts/ScheduleContainer.tsx index bb9c9f8..4b8d622 100644 --- 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 ; } diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx index 0426dca..d4dfdfa 100644 --- 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 ( - - - A tool for scheduling recurring weekly events - - -
- - setName(e.target.value)} - inputProps={{ - 'data-lpignore': true, - style: { - borderColor: theme.palette.primary.main, - }, - }} - autoComplete="off" - InputLabelProps={{ - style: { - color: theme.palette.primary.main, - }, - }} - /> - - -
-
+ + + + A tool for scheduling recurring weekly events + + +
+ + setName(e.target.value)} + inputProps={{ + 'data-lpignore': true, + style: { + borderColor: theme.palette.primary.main, + }, + }} + autoComplete="off" + InputLabelProps={{ + style: { + color: theme.palette.primary.main, + }, + }} + /> + + +
+
+
+ {recentScheduleData.length > 0 && ( + + + + Recent Schedules + + + + {recentScheduleData.map( + ([recentScheduleInviteCode, recentScheduleName]) => ( + + + + + + ), + )} + +
+
+
+ )}
diff --git a/package.json b/package.json index 7e4599a..998a36a 100644 --- 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 index ca66f17..5a34bd9 100644 --- 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"