Revert "Temporary locked picking a team" (#562)

Reverts #557
LetsGetTechnical · Sep 24, 2024 · 2632711 · 2632711
1 parent 78d6060
commit 2632711
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 11 deletions.
diff --git 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
@@ -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<string[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
   const [selectedLeague, setSelectedLeague] = useState<ILeague | undefined>();
@@ -48,6 +52,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.
@@ -131,8 +136,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<void>}
+   */
+  const getPickHistory = async (): Promise<void> => {
+    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);
     }
@@ -181,13 +215,9 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
     };
 
     try {
-      toast.custom(
-        <Alert
-          variant={AlertVariants.Error}
-          message={`Team selection has been locked for the week!`}
-        />,
-      );
-      console.error(params);
+      await onWeeklyPickChange(params);
+      setUserPick(teamSelect);
+      router.push(`/league/${league}/entry/all`);
     } catch (error) {
       console.error('Submission error:', error);
     }
@@ -206,6 +236,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       getCurrentGameWeek();
       getUserSelectedTeams();
       getUserWeeklyPick();
+      getPickHistory();
     }
   }, [isSignedIn]);
 
@@ -234,11 +265,62 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
               {selectedLeague?.leagueName as string}
             </LinkCustom>
           </nav>
-          <section className="w-full pt-8" data-testid="weekly-picks">
+          <section
+            className="flex flex-col items-center w-full pt-8"
+            data-testid="weekly-picks"
+          >
             <h1 className="pb-8 text-center text-[2rem] font-bold text-foreground">
               Week {week} pick
             </h1>
 
+            {pickHistory.length > 0 && (
+              <section
+                className="flex flex-wrap w-[90%] gap-4 overflow-x-scroll justify-center pb-10 items-center"
+                data-testid="user-pick-history"
+              >
+                {pickHistory?.map((logoURL, index) => {
+                  const isCurrentWeek = index === pickHistory.length - 1;
+                  const hasCurrentWeekPick =
+                    pickHistory.length === Number(week);
+
+                  return (
+                    <div
+                      key={`${logoURL ? logoURL : 'no-pick'}-${index + 1}`}
+                      className={cn(
+                        'flex flex-col items-center justify-center border p-2 rounded-lg gap-1',
+                        isCurrentWeek && hasCurrentWeekPick
+                          ? 'border-primary'
+                          : 'border-border opacity-80',
+                      )}
+                    >
+                      <span className="text-sm">
+                        {isCurrentWeek && hasCurrentWeekPick
+                          ? 'CURRENT'
+                          : `WEEK ${index + 1}`}
+                      </span>
+                      {logoURL ? (
+                        <Image
+                          className="league-entry-logo"
+                          width={64}
+                          height={64}
+                          data-testid="league-history-logo"
+                          src={logoURL}
+                          alt="teamLogo"
+                        />
+                      ) : (
+                        <span
+                          className="text-xs h-16 w-16 text-primary pt-6 text-center"
+                          data-testid="no-pick"
+                        >
+                          No Pick
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </section>
+            )}
+
             <FormProvider {...form}>
               <form className="mx-auto flex w-[90%] max-w-3xl flex-col items-center">
                 <FormField