diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 386b2fba..893e629f 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -119,7 +119,7 @@ const updatedWeeklyPicks = { }, }; -xdescribe('League Week Picks', () => { +describe('League Week Picks', () => { const setUserPick = jest.fn(); const updateWeeklyPicks = jest.fn(); const mockGetNFLTeamLogo = getNFLTeamLogo as jest.Mock; diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx index ffdcc5af..cfbbf965 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -24,13 +24,16 @@ import { import { ILeague } from '@/api/apiFunctions.interface'; import WeekTeams from './WeekTeams'; import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner'; +import { onWeeklyPickChange } from './WeekHelper'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { NFLTeams } from '@/api/apiFunctions.enum'; import { useAuthContext } from '@/context/AuthContextProvider'; +import { cn, getNFLTeamLogo } from '@/utils/utils'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; import LinkCustom from '@/components/LinkCustom/LinkCustom'; import { ChevronLeft } from 'lucide-react'; -import toast from 'react-hot-toast'; /** * Renders the weekly picks page. @@ -39,6 +42,7 @@ import toast from 'react-hot-toast'; */ // eslint-disable-next-line no-unused-vars const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { + const [pickHistory, setPickHistory] = useState([]); const [error, setError] = useState(null); const [schedule, setSchedule] = useState([]); const [selectedLeague, setSelectedLeague] = useState(); @@ -49,6 +53,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { const { user, updateCurrentWeek, updateWeeklyPicks, weeklyPicks } = useDataStore((state) => state); const { isSignedIn } = useAuthContext(); + const router = useRouter(); /** * Fetches the current game week. @@ -132,8 +137,37 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { setSchedule(scheduleData.events); } } catch (error) { - console.error('Could not load week data:', error); setError('Could not load week data.'); + throw error; + } + }; + + /** + * Fetches all entries for the current user. + * @returns {Promise} + */ + const getPickHistory = async (): Promise => { + const entryId: string = entry; + + try { + const entries = await getCurrentUserEntries(user.id, league); + const currentEntry = entries.find((entry) => entry.$id === entryId); + + if (!currentEntry) { + throw new Error('Entry not found'); + } + + let entryHistory = currentEntry?.selectedTeams || []; + + if (currentEntry?.selectedTeams.length > 0) { + entryHistory = entryHistory.map((teamName) => + getNFLTeamLogo(NFLTeams, teamName), + ); + } + + setPickHistory(entryHistory); + } catch (error) { + throw new Error("Error fetching user's pick history"); } finally { setLoadingData(false); } @@ -183,13 +217,9 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { }; try { - toast.custom( - , - ); - console.error(params); + await onWeeklyPickChange(params); + setUserPick(teamSelect); + router.push(`/league/${league}/entry/all`); } catch (error) { console.error('Submission error:', error); } @@ -208,6 +238,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { getCurrentGameWeek(); getUserSelectedTeams(); getUserWeeklyPick(); + getPickHistory(); } }, [isSignedIn]); @@ -236,11 +267,62 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { {selectedLeague?.leagueName as string} -
+

Week {week} pick

+ {pickHistory.length > 0 && ( +
+ {pickHistory?.map((logoURL, index) => { + const isCurrentWeek = index === pickHistory.length - 1; + const hasCurrentWeekPick = + pickHistory.length === Number(week); + + return ( +
+ + {isCurrentWeek && hasCurrentWeekPick + ? 'CURRENT' + : `WEEK ${index + 1}`} + + {logoURL ? ( + teamLogo + ) : ( + + No Pick + + )} +
+ ); + })} +
+ )} +