From 5f705d6f54b7449ef84f4bd6eea0809cbe9fff55 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 10:22:15 -0500 Subject: [PATCH 01/16] getting started --- .../[leagueId]/entry/[entryId]/week/Week.tsx | 16 ++++ .../entry/[entryId]/week/WeekHelper.tsx | 74 +++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100644 app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx index 31ce5771..917da5bb 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -22,6 +22,9 @@ import { ChevronLeft } from 'lucide-react'; import { getCurrentLeague } from '@/api/apiFunctions'; import { ILeague } from '@/api/apiFunctions.interface'; import WeekTeams from './WeekTeams'; +import Alert from '@/components/AlertNotification/AlertNotification'; +import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; +import { toast } from 'react-hot-toast'; /** * Renders the weekly picks page. @@ -125,8 +128,21 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { }); setUserPick(currentUserPick[user.id][entry].teamName); + + toast.custom( + , + ); } catch (error) { console.error('Submission error:', error); + toast.custom( + , + ); } }; diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx new file mode 100644 index 00000000..e724ed41 --- /dev/null +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -0,0 +1,74 @@ +// Copyright (c) Gridiron Survivor. +// Licensed under the MIT License. + +import React, { ChangeEvent } from 'react'; +import { IWeekProps } from './Week.interface'; +import { createWeeklyPicks } from '@/api/apiFunctions'; +import { parseUserPick } from '@/utils/utils'; +import Alert from '@/components/AlertNotification/AlertNotification'; +import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; +import { toast } from 'react-hot-toast'; + +/** + * Handles the form submission. + * @param data - The form data. + * @returns {void} + */ +const onWeeklyPickChange = async ({ + data, +}: { + data: ChangeEvent; +}): Promise => { + try { + const teamSelect = data.target.value; + const teamID = NFLTeams.find( + (team) => team.teamName === teamSelect, + )?.teamName; + + const currentUserPick = parseUserPick(user.id, entry, teamID || ''); + + // combines current picks and the user pick into one object. + // if the user pick exists then it overrides the pick of the user. + const updatedWeeklyPicks = { + ...weeklyPicks.userResults, + [user.id]: { + ...weeklyPicks.userResults[user.id], + [entry]: { + ...weeklyPicks.userResults[user.id]?.[entry], + ...currentUserPick[user.id][entry], + }, + }, + }; + + // update weekly picks in the database + await createWeeklyPicks({ + leagueId: league, + gameWeekId: week, + userResults: updatedWeeklyPicks, + }); + + // update weekly picks in the data store + updateWeeklyPicks({ + leagueId: league, + gameWeekId: week, + userResults: updatedWeeklyPicks, + }); + + setUserPick(currentUserPick[user.id][entry].teamName); + + toast.custom( + , + ); + } catch (error) { + console.error('Submission error:', error); + toast.custom( + , + ); + } +}; From 1c5c9052b5d5917c43c3ee2d751b6c6555d1e2b1 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 12:35:26 -0500 Subject: [PATCH 02/16] decoupled onWeeklyPickChange and writing test now --- .../entry/[entryId]/week/Week.test.tsx | 73 +++++++++++++++++++ .../entry/[entryId]/week/WeekHelper.tsx | 37 +++++++++- 2 files changed, 107 insertions(+), 3 deletions(-) create mode 100644 app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx new file mode 100644 index 00000000..9e43bf09 --- /dev/null +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import Alert from '@/components/AlertNotification/AlertNotification'; +import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; +import { toast } from 'react-hot-toast'; +import { onWeeklyPickChange } from './WeekHelper'; + +const mockCreateWeeklyPicks = jest.fn(); +const mockParseUserPick = jest.fn(); + +jest.mock('@/api/apiFunctions', () => ({ + createWeeklyPicks: mockCreateWeeklyPicks, +})); + +jest.mock('react-hot-toast', () => ({ + toast: { + custom: jest.fn(), + }, +})); + +jest.mock('@/utils/utils', () => ({ + parseUserPick: mockParseUserPick, +})); + +describe('Week', () => { + const data = { + target: { value: 'mockTeam' }, + preventDefault: jest.fn(), + stopPropagation: jest.fn(), + }; + const NFLTeams = [{ teamName: 'mockTeam', teamId: 'mockId' }]; + const user = { id: 'mockUserId', email: 'email@example.com', leagues: [] }; + const entry = 'mockEntry'; + const weeklyPicks = { + leagueId: 'mockId', + gameWeekId: 'mockGameId', + userResults: {}, + }; + const league = 'mockLeague'; + const week = 'mockWeek'; + const updateWeeklyPicks = jest.fn(); + const setUserPick = jest.fn(); + beforeEach(() => { + jest.clearAllMocks(); + }); + + test('should show success notification after changing your team pick', async () => { + mockCreateWeeklyPicks.mockResolvedValue({}); + + await onWeeklyPickChange({ + data, + NFLTeams, + user, + entry, + weeklyPicks, + league, + week, + updateWeeklyPicks, + setUserPick, + }); + + expect(mockCreateWeeklyPicks).toHaveBeenCalledWith({ + leagueId: league, + gameWeekId: week, + userResults: updatedWeeklyPicks, + }); + + expect(mockParseUserPick).toHaveBeenCalledWith( + user.id, + entry, + teamID || '', + ); + }); +}); diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index e724ed41..81ab2cef 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -2,22 +2,53 @@ // Licensed under the MIT License. import React, { ChangeEvent } from 'react'; -import { IWeekProps } from './Week.interface'; import { createWeeklyPicks } from '@/api/apiFunctions'; import { parseUserPick } from '@/utils/utils'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; +import { INFLTeam } from '@/api/apiFunctions.interface'; +import { IUser } from '@/api/apiFunctions.interface'; +import { IWeeklyPicks } from '@/api/apiFunctions.interface'; /** * Handles the form submission. - * @param data - The form data. + * @param props - data, NFLTeams, user, entry, weeklyPicks, league, week, updateWeeklyPicks, setUserPick + * @param props.data - The form data. + * @param props.NFLTeams - Props for NFL teams + * @param props.user - Props for user + * @param props.entry - Prop for the entry string + * @param props.weeklyPicks - Props for the weeklyPicks + * @param props.league - Prop value for the leagueId in createWeeklyPicks + * @param props.week - Prop value for gameWeekId in updateWeeklyPicks + * @param props.updateWeeklyPicks - Prop for the updateWeeklyPicks function + * @param props.setUserPick - Prop for the setUserPick function * @returns {void} */ -const onWeeklyPickChange = async ({ +export const onWeeklyPickChange = async ({ data, + NFLTeams, + user, + entry, + weeklyPicks, + league, + week, + updateWeeklyPicks, + setUserPick, }: { data: ChangeEvent; + NFLTeams: INFLTeam[]; + user: IUser; + entry: string; + weeklyPicks: IWeeklyPicks; + league: string; + week: string; + updateWeeklyPicks: ({ + leagueId, + gameWeekId, + userResults, + }: IWeeklyPicks) => void; + setUserPick: (value: React.SetStateAction) => void; }): Promise => { try { const teamSelect = data.target.value; From d78d63fe63b9e91f351f7ee8c5427389d12d74ba Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 12:41:26 -0500 Subject: [PATCH 03/16] added toast to test --- app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 9e43bf09..c6cb64f2 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -69,5 +69,12 @@ describe('Week', () => { entry, teamID || '', ); + + expect(toast.custom).toHaveBeenCalledWith( + , + ); }); }); From 2066acf2adabb1e6c6494ed7e97f46e9bda452ff Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 13:06:00 -0500 Subject: [PATCH 04/16] updated tests --- .../entry/[entryId]/week/Week.test.tsx | 34 ++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index c6cb64f2..15dd8bee 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -30,11 +30,6 @@ describe('Week', () => { const NFLTeams = [{ teamName: 'mockTeam', teamId: 'mockId' }]; const user = { id: 'mockUserId', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; - const weeklyPicks = { - leagueId: 'mockId', - gameWeekId: 'mockGameId', - userResults: {}, - }; const league = 'mockLeague'; const week = 'mockWeek'; const updateWeeklyPicks = jest.fn(); @@ -46,6 +41,35 @@ describe('Week', () => { test('should show success notification after changing your team pick', async () => { mockCreateWeeklyPicks.mockResolvedValue({}); + interface IUserResults { + [key: string]: any; // Adjust the 'any' to match the structure of your user results + } + + interface IWeeklyPicks { + leagueId: string; + gameWeekId: string; + userResults: IUserResults; + } + + const weeklyPicks: IWeeklyPicks = { + leagueId: 'mockId', + gameWeekId: 'mockGameId', + userResults: {}, + }; + + const teamID = NFLTeams[0].teamName; + + const updatedWeeklyPicks = { + ...weeklyPicks.userResults, + [user.id]: { + ...weeklyPicks.userResults[user.id], + [entry]: { + ...weeklyPicks.userResults[user.id]?.[entry], + ...mockParseUserPick(user.id, entry, teamID || '')[user.id][entry], + }, + }, + }; + await onWeeklyPickChange({ data, NFLTeams, From b59489c7ce67c3135e6de32d123426f7e8a2d69e Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 15:11:44 -0500 Subject: [PATCH 05/16] updated functions --- .../entry/[entryId]/week/Week.test.tsx | 109 +++++++++++------- .../[leagueId]/entry/[entryId]/week/Week.tsx | 78 +++---------- .../[entryId]/week/WeekTeams.interface.ts | 4 +- .../entry/[entryId]/week/WeekTeams.tsx | 8 +- 4 files changed, 90 insertions(+), 109 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 15dd8bee..9cee10b6 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -3,12 +3,11 @@ import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; import { onWeeklyPickChange } from './WeekHelper'; +import { createWeeklyPicks } from '../../../../../../api/apiFunctions'; +import { parseUserPick } from '../../../../../../utils/utils'; -const mockCreateWeeklyPicks = jest.fn(); -const mockParseUserPick = jest.fn(); - -jest.mock('@/api/apiFunctions', () => ({ - createWeeklyPicks: mockCreateWeeklyPicks, +jest.mock('../../../../../../api/apiFunctions', () => ({ + createWeeklyPicks: jest.fn(), })); jest.mock('react-hot-toast', () => ({ @@ -17,8 +16,12 @@ jest.mock('react-hot-toast', () => ({ }, })); -jest.mock('@/utils/utils', () => ({ - parseUserPick: mockParseUserPick, +jest.mock('../../../../../../utils/utils', () => ({ + parseUserPick: jest.fn().mockReturnValue({ + mockUserId: { + mockEntry: {}, + }, + }), })); describe('Week', () => { @@ -26,7 +29,7 @@ describe('Week', () => { target: { value: 'mockTeam' }, preventDefault: jest.fn(), stopPropagation: jest.fn(), - }; + } as any; const NFLTeams = [{ teamName: 'mockTeam', teamId: 'mockId' }]; const user = { id: 'mockUserId', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; @@ -34,41 +37,40 @@ describe('Week', () => { const week = 'mockWeek'; const updateWeeklyPicks = jest.fn(); const setUserPick = jest.fn(); + interface IUserResults { + [key: string]: any; // Adjust the 'any' to match the structure of your user results + } + + interface IWeeklyPicks { + leagueId: string; + gameWeekId: string; + userResults: IUserResults; + } + + const weeklyPicks: IWeeklyPicks = { + leagueId: 'mockId', + gameWeekId: 'mockGameId', + userResults: {}, + }; + + const teamID = NFLTeams[0].teamName; + + const updatedWeeklyPicks = { + ...weeklyPicks.userResults, + [user.id]: { + ...weeklyPicks.userResults[user.id], + [entry]: { + ...weeklyPicks.userResults[user.id]?.[entry], + ...parseUserPick(user.id, entry, teamID || '')[user.id][entry], + }, + }, + }; beforeEach(() => { jest.clearAllMocks(); }); test('should show success notification after changing your team pick', async () => { - mockCreateWeeklyPicks.mockResolvedValue({}); - - interface IUserResults { - [key: string]: any; // Adjust the 'any' to match the structure of your user results - } - - interface IWeeklyPicks { - leagueId: string; - gameWeekId: string; - userResults: IUserResults; - } - - const weeklyPicks: IWeeklyPicks = { - leagueId: 'mockId', - gameWeekId: 'mockGameId', - userResults: {}, - }; - - const teamID = NFLTeams[0].teamName; - - const updatedWeeklyPicks = { - ...weeklyPicks.userResults, - [user.id]: { - ...weeklyPicks.userResults[user.id], - [entry]: { - ...weeklyPicks.userResults[user.id]?.[entry], - ...mockParseUserPick(user.id, entry, teamID || '')[user.id][entry], - }, - }, - }; + (createWeeklyPicks as jest.Mock).mockResolvedValue({}); await onWeeklyPickChange({ data, @@ -82,17 +84,13 @@ describe('Week', () => { setUserPick, }); - expect(mockCreateWeeklyPicks).toHaveBeenCalledWith({ + expect(createWeeklyPicks).toHaveBeenCalledWith({ leagueId: league, gameWeekId: week, userResults: updatedWeeklyPicks, }); - expect(mockParseUserPick).toHaveBeenCalledWith( - user.id, - entry, - teamID || '', - ); + expect(parseUserPick).toHaveBeenCalledWith(user.id, entry, teamID || ''); expect(toast.custom).toHaveBeenCalledWith( { />, ); }); + + test('should show error notification when changing your team fails', async () => { + (createWeeklyPicks as jest.Mock).mockRejectedValue(new Error('error')); + + await onWeeklyPickChange({ + data, + NFLTeams, + user, + entry, + weeklyPicks, + league, + week, + updateWeeklyPicks, + setUserPick, + }); + + expect(toast.custom).toHaveBeenCalledWith( + , + ); + }); }); diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx index 917da5bb..fa0a473e 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -12,8 +12,6 @@ import { import { FormProvider, Control, useForm } from 'react-hook-form'; import { z } from 'zod'; import { IWeekProps } from './Week.interface'; -import { createWeeklyPicks } from '@/api/apiFunctions'; -import { parseUserPick } from '@/utils/utils'; import { zodResolver } from '@hookform/resolvers/zod'; import { useDataStore } from '@/store/dataStore'; import { ISchedule } from './WeekTeams.interface'; @@ -22,9 +20,7 @@ import { ChevronLeft } from 'lucide-react'; import { getCurrentLeague } from '@/api/apiFunctions'; import { ILeague } from '@/api/apiFunctions.interface'; import WeekTeams from './WeekTeams'; -import Alert from '@/components/AlertNotification/AlertNotification'; -import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; -import { toast } from 'react-hot-toast'; +import { onWeeklyPickChange } from './WeekHelper'; /** * Renders the weekly picks page. @@ -85,65 +81,25 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { }); /** - * Handles the form submission. - * @param data - The form data. + * Handles the weekly picks + * @param data - data of the pick * @returns {void} */ - const onWeeklyPickChange = async ( + const handleWeeklyPickChange = async ( data: ChangeEvent, ): Promise => { - try { - const teamSelect = data.target.value; - const teamID = NFLTeams.find( - (team) => team.teamName === teamSelect, - )?.teamName; - - const currentUserPick = parseUserPick(user.id, entry, teamID || ''); - - // combines current picks and the user pick into one object. - // if the user pick exists then it overrides the pick of the user. - const updatedWeeklyPicks = { - ...weeklyPicks.userResults, - [user.id]: { - ...weeklyPicks.userResults[user.id], - [entry]: { - ...weeklyPicks.userResults[user.id]?.[entry], - ...currentUserPick[user.id][entry], - }, - }, - }; - - // update weekly picks in the database - await createWeeklyPicks({ - leagueId: league, - gameWeekId: week, - userResults: updatedWeeklyPicks, - }); - - // update weekly picks in the data store - updateWeeklyPicks({ - leagueId: league, - gameWeekId: week, - userResults: updatedWeeklyPicks, - }); - - setUserPick(currentUserPick[user.id][entry].teamName); - - toast.custom( - , - ); - } catch (error) { - console.error('Submission error:', error); - toast.custom( - , - ); - } + const params = { + data, + NFLTeams, + user, + entry, + weeklyPicks, + league, + week, + updateWeeklyPicks, + setUserPick, + }; + await onWeeklyPickChange(params); }; useEffect(() => { @@ -189,7 +145,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { schedule={schedule} field={field} userPick={userPick} - onWeeklyPickChange={onWeeklyPickChange} + handleWeeklyPickChange={handleWeeklyPickChange} /> diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts index f9c5e528..9fae237c 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts @@ -29,7 +29,9 @@ export interface IWeekTeamsProps { schedule: ISchedule[]; userPick: string; // eslint-disable-next-line no-unused-vars - onWeeklyPickChange: (data: ChangeEvent) => Promise; + handleWeeklyPickChange: ( + data: ChangeEvent, + ) => Promise; } interface ICompetition { diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx index d618ee5a..cca20c45 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx @@ -38,14 +38,14 @@ const formatDateTime = (dateString: string): string => { * @param props.field The form field. * @param props.schedule The schedule for the week. * @param props.userPick The user's pick. - * @param props.onWeeklyPickChange The function to call when the user's pick changes. + * @param props.handleWeeklyPickChange The function to call when the user's pick changes. * @returns The rendered weekly picks page. */ const WeekTeams = ({ field, schedule, userPick, - onWeeklyPickChange, + handleWeeklyPickChange, }: IWeekTeamsProps): JSX.Element => ( <> {schedule.map((scheduledGame) => ( @@ -55,7 +55,9 @@ const WeekTeams = ({ key={scheduledGame.id} className="grid w-full grid-cols-2 gap-4 pb-8" onChange={(event) => - onWeeklyPickChange(event as unknown as ChangeEvent) + handleWeeklyPickChange( + event as unknown as ChangeEvent, + ) } >
From de6cad1c3c00b118744a52225415bc448990404d Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 15 Jul 2024 17:07:55 -0500 Subject: [PATCH 06/16] updated code/tests to show team name when a team is picked --- .../entry/[entryId]/week/Week.test.tsx | 36 ++++++++++++------- .../entry/[entryId]/week/WeekHelper.tsx | 4 ++- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 9cee10b6..0ca45704 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -16,21 +16,13 @@ jest.mock('react-hot-toast', () => ({ }, })); -jest.mock('../../../../../../utils/utils', () => ({ - parseUserPick: jest.fn().mockReturnValue({ - mockUserId: { - mockEntry: {}, - }, - }), -})); - describe('Week', () => { const data = { - target: { value: 'mockTeam' }, + target: { value: 'Browns' }, preventDefault: jest.fn(), stopPropagation: jest.fn(), } as any; - const NFLTeams = [{ teamName: 'mockTeam', teamId: 'mockId' }]; + const NFLTeams = [{ teamName: 'Browns', teamId: 'mockId' }]; const user = { id: 'mockUserId', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; const league = 'mockLeague'; @@ -72,6 +64,20 @@ describe('Week', () => { test('should show success notification after changing your team pick', async () => { (createWeeklyPicks as jest.Mock).mockResolvedValue({}); + const mockParseUserPick = jest.fn().mockReturnValue({ + [user.id]: { + [entry]: { + teamName: 'Browns', + }, + }, + }); + + jest.mock('../../../../../../utils/utils', () => ({ + parseUserPick: mockParseUserPick, + })); + + const currentUserPick = mockParseUserPick(user.id, entry, teamID || ''); + await onWeeklyPickChange({ data, NFLTeams, @@ -90,12 +96,18 @@ describe('Week', () => { userResults: updatedWeeklyPicks, }); - expect(parseUserPick).toHaveBeenCalledWith(user.id, entry, teamID || ''); + expect(mockParseUserPick).toHaveBeenCalledWith( + user.id, + entry, + teamID || '', + ); expect(toast.custom).toHaveBeenCalledWith( , ); }); diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index 81ab2cef..acf8fd4c 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -90,7 +90,9 @@ export const onWeeklyPickChange = async ({ toast.custom( , ); } catch (error) { From a264ede1297dfa019853c55804929462e23bd8ce Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Tue, 16 Jul 2024 10:45:49 -0500 Subject: [PATCH 07/16] deleted unused code --- app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index acf8fd4c..194b339f 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -43,11 +43,7 @@ export const onWeeklyPickChange = async ({ weeklyPicks: IWeeklyPicks; league: string; week: string; - updateWeeklyPicks: ({ - leagueId, - gameWeekId, - userResults, - }: IWeeklyPicks) => void; + updateWeeklyPicks: ({}: IWeeklyPicks) => void; setUserPick: (value: React.SetStateAction) => void; }): Promise => { try { From 29ee3ce4f64f9bed9e2ba034ce9f114558e2194b Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Tue, 16 Jul 2024 11:46:13 -0500 Subject: [PATCH 08/16] updated type for setUserPick --- app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index 194b339f..10a8d56e 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -44,7 +44,7 @@ export const onWeeklyPickChange = async ({ league: string; week: string; updateWeeklyPicks: ({}: IWeeklyPicks) => void; - setUserPick: (value: React.SetStateAction) => void; + setUserPick: React.Dispatch>; }): Promise => { try { const teamSelect = data.target.value; From 9e0f3c650d34507856c83b503340435b258af4e0 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Tue, 16 Jul 2024 13:27:30 -0500 Subject: [PATCH 09/16] did some voodoo --- app/league/[leagueId]/entry/[entryId]/week/Week.tsx | 2 +- .../entry/[entryId]/week/WeekTeams.interface.ts | 4 +--- app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx | 8 +++----- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx index fa0a473e..09bab44d 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -145,7 +145,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { schedule={schedule} field={field} userPick={userPick} - handleWeeklyPickChange={handleWeeklyPickChange} + onWeeklyPickChange={handleWeeklyPickChange} /> diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts index 9fae237c..f9c5e528 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts @@ -29,9 +29,7 @@ export interface IWeekTeamsProps { schedule: ISchedule[]; userPick: string; // eslint-disable-next-line no-unused-vars - handleWeeklyPickChange: ( - data: ChangeEvent, - ) => Promise; + onWeeklyPickChange: (data: ChangeEvent) => Promise; } interface ICompetition { diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx index cca20c45..d618ee5a 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx @@ -38,14 +38,14 @@ const formatDateTime = (dateString: string): string => { * @param props.field The form field. * @param props.schedule The schedule for the week. * @param props.userPick The user's pick. - * @param props.handleWeeklyPickChange The function to call when the user's pick changes. + * @param props.onWeeklyPickChange The function to call when the user's pick changes. * @returns The rendered weekly picks page. */ const WeekTeams = ({ field, schedule, userPick, - handleWeeklyPickChange, + onWeeklyPickChange, }: IWeekTeamsProps): JSX.Element => ( <> {schedule.map((scheduledGame) => ( @@ -55,9 +55,7 @@ const WeekTeams = ({ key={scheduledGame.id} className="grid w-full grid-cols-2 gap-4 pb-8" onChange={(event) => - handleWeeklyPickChange( - event as unknown as ChangeEvent, - ) + onWeeklyPickChange(event as unknown as ChangeEvent) } >
From 0b0e05d4939cd86c355da7d0d93182715db93462 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Wed, 17 Jul 2024 09:45:53 -0500 Subject: [PATCH 10/16] alphabetized params --- .../[leagueId]/entry/[entryId]/week/Week.tsx | 8 ++++---- .../entry/[entryId]/week/WeekHelper.tsx | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx index 09bab44d..8b503112 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -90,14 +90,14 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { ): Promise => { const params = { data, + entry, + league, NFLTeams, + setUserPick, + updateWeeklyPicks, user, - entry, weeklyPicks, - league, week, - updateWeeklyPicks, - setUserPick, }; await onWeeklyPickChange(params); }; diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index 10a8d56e..2026d955 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -27,24 +27,24 @@ import { IWeeklyPicks } from '@/api/apiFunctions.interface'; */ export const onWeeklyPickChange = async ({ data, + entry, + league, NFLTeams, + setUserPick, + updateWeeklyPicks, user, - entry, weeklyPicks, - league, week, - updateWeeklyPicks, - setUserPick, }: { data: ChangeEvent; + entry: string; + league: string; NFLTeams: INFLTeam[]; + setUserPick: React.Dispatch>; + updateWeeklyPicks: ({}: IWeeklyPicks) => void; user: IUser; - entry: string; weeklyPicks: IWeeklyPicks; - league: string; week: string; - updateWeeklyPicks: ({}: IWeeklyPicks) => void; - setUserPick: React.Dispatch>; }): Promise => { try { const teamSelect = data.target.value; From e4ee42d94693076b9c023817b2017fafd5325897 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Wed, 17 Jul 2024 10:10:28 -0500 Subject: [PATCH 11/16] made changes to handle PR comments --- .../entry/[entryId]/week/Week.test.tsx | 57 ++++++++----------- .../entry/[entryId]/week/WeekHelper.tsx | 10 +++- 2 files changed, 31 insertions(+), 36 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 0ca45704..1a1b973f 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -3,10 +3,11 @@ import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; import { onWeeklyPickChange } from './WeekHelper'; -import { createWeeklyPicks } from '../../../../../../api/apiFunctions'; -import { parseUserPick } from '../../../../../../utils/utils'; +import { createWeeklyPicks } from '@/api/apiFunctions'; +import { parseUserPick } from '@/utils/utils'; +import { IWeeklyPicks } from '@/api/apiFunctions.interface'; -jest.mock('../../../../../../api/apiFunctions', () => ({ +jest.mock('@/api/apiFunctions', () => ({ createWeeklyPicks: jest.fn(), })); @@ -22,26 +23,17 @@ describe('Week', () => { preventDefault: jest.fn(), stopPropagation: jest.fn(), } as any; - const NFLTeams = [{ teamName: 'Browns', teamId: 'mockId' }]; - const user = { id: 'mockUserId', email: 'email@example.com', leagues: [] }; + const NFLTeams = [{ teamName: 'Browns', teamId: '1234' }]; + const user = { id: '12345', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; const league = 'mockLeague'; const week = 'mockWeek'; const updateWeeklyPicks = jest.fn(); const setUserPick = jest.fn(); - interface IUserResults { - [key: string]: any; // Adjust the 'any' to match the structure of your user results - } - - interface IWeeklyPicks { - leagueId: string; - gameWeekId: string; - userResults: IUserResults; - } const weeklyPicks: IWeeklyPicks = { - leagueId: 'mockId', - gameWeekId: 'mockGameId', + leagueId: '123', + gameWeekId: '123456', userResults: {}, }; @@ -57,6 +49,19 @@ describe('Week', () => { }, }, }; + + const mockParseUserPick = jest.fn().mockReturnValue({ + [user.id]: { + [entry]: { + teamName: 'Browns', + }, + }, + }); + + jest.mock('@/utils/utils', () => ({ + parseUserPick: mockParseUserPick, + })); + beforeEach(() => { jest.clearAllMocks(); }); @@ -64,19 +69,7 @@ describe('Week', () => { test('should show success notification after changing your team pick', async () => { (createWeeklyPicks as jest.Mock).mockResolvedValue({}); - const mockParseUserPick = jest.fn().mockReturnValue({ - [user.id]: { - [entry]: { - teamName: 'Browns', - }, - }, - }); - - jest.mock('../../../../../../utils/utils', () => ({ - parseUserPick: mockParseUserPick, - })); - - const currentUserPick = mockParseUserPick(user.id, entry, teamID || ''); + const currentUserPick = mockParseUserPick(user.id, entry, teamID); await onWeeklyPickChange({ data, @@ -96,11 +89,7 @@ describe('Week', () => { userResults: updatedWeeklyPicks, }); - expect(mockParseUserPick).toHaveBeenCalledWith( - user.id, - entry, - teamID || '', - ); + expect(mockParseUserPick).toHaveBeenCalledWith(user.id, entry, teamID); expect(toast.custom).toHaveBeenCalledWith( ; + data: IData; entry: string; league: string; NFLTeams: INFLTeam[]; From 11d5a020931d5d52c6fdad5950155abd58e2f362 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Fri, 19 Jul 2024 11:14:06 -0500 Subject: [PATCH 12/16] Fix: Moved IData props into Week.interface.ts --- .../[leagueId]/entry/[entryId]/week/Week.interface.ts | 6 ++++++ .../[leagueId]/entry/[entryId]/week/WeekHelper.tsx | 11 ++--------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts index 2ac52c4c..2fdc7efa 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts @@ -3,6 +3,12 @@ import { INFLTeam, ILeague } from '@/api/apiFunctions.interface'; +export interface IData { + target: { + value: string; + }; +} + export interface IWeekParams { params: { entryId: string; diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index b21ef3d1..b63cf650 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -7,15 +7,8 @@ import { parseUserPick } from '@/utils/utils'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; -import { INFLTeam } from '@/api/apiFunctions.interface'; -import { IUser } from '@/api/apiFunctions.interface'; -import { IWeeklyPicks } from '@/api/apiFunctions.interface'; - -interface IData { - target: { - value: string; - }; -} +import { IWeeklyPicks, INFLTeam, IUser } from '@/api/apiFunctions.interface'; +import { IData } from './Week.interface'; /** * Handles the form submission. From 1236a947f94865ddaa2b34133e777bf88b653fa3 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Fri, 19 Jul 2024 11:26:55 -0500 Subject: [PATCH 13/16] Fix: Moved onWeeklyPickChange() type objects into Week.interface.ts --- .../entry/[entryId]/week/Week.interface.ts | 20 ++++++++++++++++++- .../entry/[entryId]/week/WeekHelper.tsx | 15 ++------------ 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts index 2fdc7efa..e2dddd54 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts +++ b/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts @@ -1,7 +1,13 @@ // Copyright (c) Gridiron Survivor. // Licensed under the MIT License. -import { INFLTeam, ILeague } from '@/api/apiFunctions.interface'; +import React from 'react'; +import { + INFLTeam, + ILeague, + IWeeklyPicks, + IUser, +} from '@/api/apiFunctions.interface'; export interface IData { target: { @@ -17,6 +23,18 @@ export interface IWeekParams { }; } +export interface IWeeklyPickChange { + data: IData; + entry: string; + league: string; + NFLTeams: INFLTeam[]; + setUserPick: React.Dispatch>; + updateWeeklyPicks: ({}: IWeeklyPicks) => void; + user: IUser; + weeklyPicks: IWeeklyPicks; + week: string; +} + export interface IWeekProps { entry: string; league: ILeague['leagueId']; diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index b63cf650..3d5827bd 100644 --- a/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -7,8 +7,7 @@ import { parseUserPick } from '@/utils/utils'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; -import { IWeeklyPicks, INFLTeam, IUser } from '@/api/apiFunctions.interface'; -import { IData } from './Week.interface'; +import { IWeeklyPickChange } from './Week.interface'; /** * Handles the form submission. @@ -34,17 +33,7 @@ export const onWeeklyPickChange = async ({ user, weeklyPicks, week, -}: { - data: IData; - entry: string; - league: string; - NFLTeams: INFLTeam[]; - setUserPick: React.Dispatch>; - updateWeeklyPicks: ({}: IWeeklyPicks) => void; - user: IUser; - weeklyPicks: IWeeklyPicks; - week: string; -}): Promise => { +}: IWeeklyPickChange): Promise => { try { const teamSelect = data.target.value; const teamID = NFLTeams.find( From 8bd9efb036965dbc327c4763d2e7ba8b299a19c2 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Mon, 22 Jul 2024 10:22:12 -0500 Subject: [PATCH 14/16] Fix: delete 'as any' type from 'data' inside week.test. Wasn't needed. --- app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1a1b973f..59cecc39 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -22,7 +22,7 @@ describe('Week', () => { target: { value: 'Browns' }, preventDefault: jest.fn(), stopPropagation: jest.fn(), - } as any; + }; const NFLTeams = [{ teamName: 'Browns', teamId: '1234' }]; const user = { id: '12345', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; From 4933a40c379bc30dd4fc64f64400d0d4b1804ff6 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Fri, 26 Jul 2024 08:45:59 -0500 Subject: [PATCH 15/16] Fix: Added trycatch() to handleWeeklyPickChange(), added a throw error inside onWeeklyPickChange(), and updated IData to IWeekData --- .../[leagueId]/entry/[entryId]/week/Week.interface.ts | 4 ++-- app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx | 6 +++++- .../league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts index e2dddd54..a5ce7f9c 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts @@ -9,7 +9,7 @@ import { IUser, } from '@/api/apiFunctions.interface'; -export interface IData { +export interface IWeekData { target: { value: string; }; @@ -24,7 +24,7 @@ export interface IWeekParams { } export interface IWeeklyPickChange { - data: IData; + data: IWeekData; entry: string; league: string; NFLTeams: INFLTeam[]; diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx index a7fda224..9b9b3f30 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -101,7 +101,11 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { weeklyPicks, week, }; - await onWeeklyPickChange(params); + try { + await onWeeklyPickChange(params); + } catch (error) { + console.error('Error while changing pick:', error); + } }; useEffect(() => { diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index 3d5827bd..ac4dba09 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -80,12 +80,12 @@ export const onWeeklyPickChange = async ({ />, ); } catch (error) { - console.error('Submission error:', error); toast.custom( , ); + throw new Error(`Error running onWeeklyPickChange: ${error}`); } }; From 1473a7af3e015d671ca868004cedef46e0f3c932 Mon Sep 17 00:00:00 2001 From: Alex Appleget Date: Fri, 26 Jul 2024 08:53:59 -0500 Subject: [PATCH 16/16] Fix: Changed errors to better understand where an issue will be. --- app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx | 2 +- .../league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx index 9b9b3f30..0e7c2e66 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -104,7 +104,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { try { await onWeeklyPickChange(params); } catch (error) { - console.error('Error while changing pick:', error); + console.error('Submission error:', error); } }; diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index ac4dba09..3fc3117b 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -80,12 +80,12 @@ export const onWeeklyPickChange = async ({ />, ); } catch (error) { + console.error('There was an error handling your request:', error); toast.custom( , ); - throw new Error(`Error running onWeeklyPickChange: ${error}`); } };