Alex/bug bash: add alert when pick is updated

app/league/[leagueId]/entry/[entryId]/week/Week.test.tsx

@@ -0,0 +1,137 @@
+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';
+import { createWeeklyPicks } from '../../../../../../api/apiFunctions';
+import { parseUserPick } from '../../../../../../utils/utils';
+
+jest.mock('../../../../../../api/apiFunctions', () => ({
+  createWeeklyPicks: jest.fn(),
+}));
+
+jest.mock('react-hot-toast', () => ({
+  toast: {
+    custom: jest.fn(),
+  },
+}));
+
+describe('Week', () => {
+  const data = {
+    target: { value: 'Browns' },
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+  } as any;
+  const NFLTeams = [{ teamName: 'Browns', teamId: 'mockId' }];
+  const user = { id: 'mockUserId', email: '[email protected]', 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',
+    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 () => {
+    (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,
+      user,
+      entry,
+      weeklyPicks,
+      league,
+      week,
+      updateWeeklyPicks,
+      setUserPick,
+    });
+
+    expect(createWeeklyPicks).toHaveBeenCalledWith({
+      leagueId: league,
+      gameWeekId: week,
+      userResults: updatedWeeklyPicks,
+    });
+
+    expect(mockParseUserPick).toHaveBeenCalledWith(
+      user.id,
+      entry,
+      teamID || '',
+    );
+
+    expect(toast.custom).toHaveBeenCalledWith(
+      <Alert
+        variant={AlertVariants.Success}
+        message={`You have successfully pick the ${
+          currentUserPick[user.id][entry].teamName
+        } for your team!`}
+      />,
+    );
+  });
+
+  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(
+      <Alert
+        variant={AlertVariants.Error}
+        message="There was an error processing your request."
+      />,
+    );
+  });
+});

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,6 +20,7 @@ import { ChevronLeft } from 'lucide-react';
 import { getCurrentLeague } from '@/api/apiFunctions';
 import { ILeague } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
+import { onWeeklyPickChange } from './WeekHelper';
 
 /**
  * Renders the weekly picks page.
@@ -82,52 +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<HTMLInputElement>,
   ): Promise<void> => {
-    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);
-    } catch (error) {
-      console.error('Submission error:', error);
-    }
+    const params = {
+      data,
+      NFLTeams,
+      user,
+      entry,
+      weeklyPicks,
+      league,
+      week,
+      updateWeeklyPicks,
+      setUserPick,
+    };
+    await onWeeklyPickChange(params);
   };
 
   useEffect(() => {
@@ -173,7 +145,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
                       schedule={schedule}
                       field={field}
                       userPick={userPick}
-                      onWeeklyPickChange={onWeeklyPickChange}
+                      onWeeklyPickChange={handleWeeklyPickChange}
                     />
                   </FormControl>
                   <FormMessage />

app/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx

@@ -0,0 +1,103 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import React, { ChangeEvent } from 'react';
+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 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}
+ */
+export const onWeeklyPickChange = async ({
+  data,
+  NFLTeams,
+  user,
+  entry,
+  weeklyPicks,
+  league,
+  week,
+  updateWeeklyPicks,
+  setUserPick,
+}: {
+  data: ChangeEvent<HTMLInputElement>;
+  NFLTeams: INFLTeam[];
+  user: IUser;
+  entry: string;
+  weeklyPicks: IWeeklyPicks;
+  league: string;
+  week: string;
+  updateWeeklyPicks: ({}: IWeeklyPicks) => void;
+  setUserPick: React.Dispatch<React.SetStateAction<string>>;
+}): Promise<void> => {
+  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(
+      <Alert
+        variant={AlertVariants.Success}
+        message={`You have successfully pick the ${
+          currentUserPick[user.id][entry].teamName
+        } for your team!`}
+      />,
+    );
+  } catch (error) {
+    console.error('Submission error:', error);
+    toast.custom(
+      <Alert
+        variant={AlertVariants.Error}
+        message="There was an error processing your request."
+      />,
+    );
+  }
+};