Alex+Ryan/Add Lockout Period

app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx

@@ -33,6 +33,8 @@ import Image from 'next/image';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import { ChevronLeft } from 'lucide-react';
 import toast from 'react-hot-toast';
+import { onWeeklyPickChange } from './WeekHelper';
+import { useRouter } from 'next/navigation';
 
 /**
  * Renders the weekly picks page.
@@ -52,6 +54,36 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
   const { user, updateCurrentWeek, updateWeeklyPicks, weeklyPicks } =
     useDataStore((state) => state);
   const { isSignedIn } = useAuthContext();
+  const [lockedOut, setLockedOut] = useState<boolean>(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    /**
+     * Checks if the user is locked out from making a pick.
+     */
+    const checkLockout = (): void => {
+      const currentDateAndTime = new Date();
+      const day = currentDateAndTime.getUTCDay();
+      const hours = currentDateAndTime.getUTCHours();
+      if (
+        (day === 5 && hours >= 0) || // Friday at 12am UTC (Thurs 8pm CT)
+        day > 5 || // Friday and Saturday
+        day === 0 || // Sunday
+        day === 1 || // Monday
+        (day === 2 && hours < 12) // Tuesday at 12pm UTC (8am CT)
+      ) {
+        setLockedOut(true);
+      } else {
+        setLockedOut(false);
+      }
+    };
+
+    checkLockout();
+
+    const intervalId = setInterval(checkLockout, 60 * 60 * 1000);
+
+    return (): void => clearInterval(intervalId);
+  }, []);
 
   /**
    * Fetches the current game week.
@@ -195,6 +227,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
 
   /**
    * Handles the weekly pick team change
+   * @param lockedOut - the lockout logic.
    * @param teamSelect - the selected team name.
    * @returns {void}
    */
@@ -215,12 +248,18 @@ 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!`}
-        />,
-      );
+      if (lockedOut) {
+        toast.custom(
+          <Alert
+            variant={AlertVariants.Error}
+            message={`Team selection has been locked for the week!`}
+          />,
+        );
+      } else {
+        await onWeeklyPickChange(params);
+        setUserPick(teamSelect);
+        router.push(`/league/${league}/entry/all`);
+      }
       console.error(params);
     } catch (error) {
       console.error('Submission error:', error);

app/(main)/league/[leagueId]/entry/all/page.test.tsx

@@ -302,7 +302,7 @@ describe('League entries page (Entry Component)', () => {
       screen.queryByTestId('add-new-entry-button'),
     ).not.toBeInTheDocument();
   });
-  it('should display "Make Pick" button when no pick is set', async () => {
+  it('should display "Make Pick" link when no pick is set', async () => {
     mockGetCurrentUserEntries.mockResolvedValueOnce([
       {
         $id: '123',
@@ -315,13 +315,13 @@ describe('League entries page (Entry Component)', () => {
     render(<Entry params={{ leagueId: '123' }} />);
 
     await waitFor(() => {
-      expect(screen.getByTestId('league-entry-pick-button')).toHaveTextContent(
+      expect(screen.getByTestId('league-entry-pick-link')).toHaveTextContent(
         'Make Pick',
       );
     });
   });
 
-  it('should render team logo and change button to "Change Pick" when a pick is made', async () => {
+  it('should render team logo and change link to "Change Pick" when a pick is made', async () => {
     mockUseDataStore.mockReturnValue({
       ...mockUseDataStore(),
       currentWeek: 1,
@@ -343,7 +343,7 @@ describe('League entries page (Entry Component)', () => {
         '/_next/image?url=%2Fpackers-logo.png&w=96&q=75',
       );
 
-      expect(screen.getByTestId('league-entry-pick-button')).toHaveTextContent(
+      expect(screen.getByTestId('league-entry-pick-link')).toHaveTextContent(
         'Change Pick',
       );
     });

app/(main)/league/[leagueId]/entry/all/page.tsx

@@ -217,10 +217,10 @@ const Entry = ({
                 return (
                   <section key={entry.$id}>
                     <LeagueEntries
-                      key={entry.$id}
                       entryName={entry.name}
                       isEliminated={entry.eliminated}
                       isPickSet={isPickSet}
+                      key={entry.$id}
                       linkUrl={linkUrl}
                       userPickHistory={userPickHistory}
                       selectedTeamLogo={selectedTeamLogo}

components/LeagueEntries/LeagueEntries.test.tsx

@@ -5,30 +5,31 @@ import React from 'react';
 describe('LeagueEntries', () => {
   it(`renders 'default' state without a pick made`, () => {
     render(
-      <LeagueEntries entryName="Entry 1" linkUrl="" userPickHistory={[]} />,
+      <LeagueEntries entryName="Entry 1" isLockedOutProp={false} linkUrl="" userPickHistory={[]} />,
     );
 
     const leagueEntryContainerCard = screen.getByTestId(
       'league-entry-container-card',
     );
     const leagueEntryNumber = screen.getByTestId('league-entry-number');
     const entryStatus = screen.getByTestId('entry-status');
-    const leagueEntryPickButton = screen.getByTestId(
-      'league-entry-pick-button',
+    const leagueEntryPickLink = screen.getByTestId(
+      'league-entry-pick-link',
     );
     const userHistoryPicks = screen.queryByTestId('user-pick-history');
 
     expect(entryStatus).toHaveTextContent('alive');
     expect(leagueEntryContainerCard).toBeInTheDocument();
     expect(leagueEntryNumber).toHaveTextContent('Entry 1');
-    expect(leagueEntryPickButton).toHaveTextContent('Make Pick');
+    expect(leagueEntryPickLink).toHaveTextContent('Make Pick');
     expect(userHistoryPicks).not.toBeInTheDocument();
   });
 
   it('renders as if the user made a pick', () => {
     render(
       <LeagueEntries
         entryName="Entry 2"
+        isLockedOutProp={false}
         linkUrl=""
         isPickSet={true}
         userPickHistory={['/team-a-logo.png']}
@@ -40,14 +41,14 @@ describe('LeagueEntries', () => {
     );
     const leagueEntryNumber = screen.getByTestId('league-entry-number');
     const entryStatus = screen.getByTestId('entry-status');
-    const leagueEntryPickButton = screen.getByTestId(
-      'league-entry-pick-button',
+    const leagueEntryPickLink = screen.getByTestId(
+      'league-entry-pick-link',
     );
 
     expect(entryStatus).toHaveTextContent('alive');
     expect(leagueEntryContainerCard).toBeInTheDocument();
     expect(leagueEntryNumber).toHaveTextContent('Entry 2');
-    expect(leagueEntryPickButton).toHaveTextContent('Change Pick');
+    expect(leagueEntryPickLink).toHaveTextContent('Change Pick');
     expect(screen.queryByTestId('user-pick-history')).toBeInTheDocument();
   });
 
@@ -56,6 +57,7 @@ describe('LeagueEntries', () => {
       <LeagueEntries
         entryName="Entry 3"
         isEliminated
+        isLockedOutProp={false}
         isPickSet={false}
         linkUrl=""
         userPickHistory={['/team-a-logo.png']}
@@ -80,6 +82,7 @@ describe('LeagueEntries', () => {
     render(
       <LeagueEntries
         entryName="Entry 2"
+        isLockedOutProp={false}
         isPickSet={true}
         linkUrl={linkUrl}
         selectedTeamLogo={teamLogoUrl}
@@ -92,16 +95,16 @@ describe('LeagueEntries', () => {
     );
     const leagueEntryNumber = screen.getByTestId('league-entry-number');
     const entryStatus = screen.getByTestId('entry-status');
-    const leagueEntryPickButton = screen.getByTestId(
-      'league-entry-pick-button',
+    const leagueEntryPickLink = screen.getByTestId(
+      'league-entry-pick-link',
     );
-    const leagueLink = screen.getByTestId('league-entry-pick-button-link');
+    const leagueLink = screen.getByTestId('league-entry-pick-link');
     const leagueEntryLogo = screen.getByTestId('league-entry-logo');
 
     expect(leagueEntryContainerCard).toBeInTheDocument();
     expect(entryStatus).toHaveTextContent('alive');
     expect(leagueEntryNumber).toHaveTextContent('Entry 2');
-    expect(leagueEntryPickButton).toHaveTextContent('Change Pick');
+    expect(leagueEntryPickLink).toHaveTextContent('Change Pick');
     expect(leagueLink).toHaveAttribute('href', linkUrl);
     expect(leagueEntryLogo).toBeInTheDocument();
     expect(leagueEntryLogo).toHaveAttribute(
@@ -120,6 +123,7 @@ describe('LeagueEntries', () => {
     render(
       <LeagueEntries
         entryName="Entry 2"
+        isLockedOutProp={false}
         isPickSet={true}
         linkUrl={linkUrl}
         selectedTeamLogo={teamLogoUrl}

components/LeagueEntries/LeagueEntries.tsx

@@ -1,12 +1,11 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { Button } from '../Button/Button';
 import { cn } from '@/utils/utils';
 import { EntryStatus } from '../EntryStatus/EntryStatus';
 import { ILeagueEntriesProps } from './LeagueEntries.interface';
-import React, { JSX } from 'react';
-import Link from 'next/link';
+import React, { JSX, useEffect, useState } from 'react';
+import LinkCustom from '../LinkCustom/LinkCustom';
 import Image from 'next/image';
 
 /**
@@ -18,16 +17,53 @@ import Image from 'next/image';
  * @param props.isPickSet - if true, the team logo of the picked team shows up on the LeagueEntries card and the button changes from "make a pick" to "chagne pick"
  * @param props.userPickHistory - the user's pick history for this entry
  * @param props.selectedTeamLogo - the team logo
+ * @param props.lockout - if true, the user is locked out from making a pick
  * @returns {React.JSX.Element} - A div element that contains the user's entry information
  */
+
+/**
+ * Display all entries for a league.
+ * @param {string} leagueId - The league id.
+ * @returns {JSX.Element} The rendered entries component.
+ */
 const LeagueEntries = ({
   entryName,
-  linkUrl,
   isEliminated = false,
   isPickSet = false,
+  linkUrl,
   userPickHistory,
   selectedTeamLogo = '',
 }: ILeagueEntriesProps): JSX.Element => {
+  const [isLockedOut, setLockedOut] = useState<boolean>(false);
+
+  useEffect(() => {
+    /**
+     * Checks if the user is locked out from making a pick.
+     */
+    const checkLockout = (): void => {
+      const currentDateAndTime = new Date();
+      const day = currentDateAndTime.getUTCDay();
+      const hours = currentDateAndTime.getUTCHours();
+      if (
+        (day === 5 && hours >= 0) || // Friday at 12am UTC (Thurs 8pm CT)
+        day > 5 || // Friday and Saturday
+        day === 0 || // Sunday
+        day === 1 || // Monday
+        (day === 2 && hours < 12) // Tuesday at 12pm UTC (8am CT)
+      ) {
+        setLockedOut(true);
+      } else {
+        setLockedOut(false);
+      }
+    };
+
+    checkLockout();
+
+    const intervalId = setInterval(checkLockout, 60 * 60 * 1000);
+
+    return (): void => clearInterval(intervalId);
+  }, []);
+
   return (
     <div
       data-testid="league-entry-container-card"
@@ -107,14 +143,22 @@ const LeagueEntries = ({
           data-testid="league-entry-pick-button-container"
         >
           {!isEliminated && (
-            <Link href={linkUrl} data-testid="league-entry-pick-button-link">
-              <Button
-                className="league-entry-pick-button"
-                data-testid="league-entry-pick-button"
-                label={isPickSet ? 'Change Pick' : 'Make Pick'}
-                variant={isPickSet ? 'secondary' : 'default'}
-              />
-            </Link>
+            <LinkCustom
+              aria-disabled={isLockedOut === true ? 'true' : 'false'}
+              className={cn(
+                'league-entry-pick-link',
+                isLockedOut === true ? 'opacity-50 cursor-not-allowed' : '',
+              )}
+              dataTestidProp="league-entry-pick-link"
+              href={linkUrl}
+              onClick={(e: { preventDefault: () => unknown }) =>
+                isLockedOut === true && e.preventDefault()
+              }
+              size={'defaultButton'}
+              variant={isPickSet ? 'secondaryButton' : 'primaryButton'}
+            >
+              {isPickSet ? 'Change Pick' : 'Make Pick'}
+            </LinkCustom>
           )}
         </div>
       </section>

components/LinkCustom/LinkCustom.test.tsx

@@ -5,7 +5,7 @@ import LinkCustom from './LinkCustom';
 describe('LinkCustom Component', () => {
   it('renders with default props', () => {
     render(
-      <LinkCustom children="Test link" href="https://example.com"></LinkCustom>,
+      <LinkCustom children="Test link" dataTestidProp="linkCustom" href="https://example.com"></LinkCustom>,
     );
     const link = screen.getByTestId('linkCustom');
     expect(link).toBeInTheDocument();