Fix: Created custom hook for lockout to be usable across the applicat…

…ion.

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

@@ -25,6 +25,7 @@ import Image from 'next/image';
 import { ISchedule } from './WeekTeams.interface';
 import { IWeekProps } from './Week.interface';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
+import useLockout from '@/hooks/useLockout/useLockout';
 import { NFLTeams } from '@/api/apiFunctions.enum';
 import { onWeeklyPickChange } from './WeekHelper';
 import React, { JSX, useEffect, useState } from 'react';
@@ -54,36 +55,8 @@ 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);
-  }, []);
+  const lockedOut = useLockout();
 
   /**
    * Fetches the current game week.

components/LeagueEntries/LeagueEntries.tsx

@@ -4,9 +4,10 @@
 import { cn } from '@/utils/utils';
 import { EntryStatus } from '../EntryStatus/EntryStatus';
 import { ILeagueEntriesProps } from './LeagueEntries.interface';
-import React, { JSX, useEffect, useState } from 'react';
-import LinkCustom from '../LinkCustom/LinkCustom';
 import Image from 'next/image';
+import LinkCustom from '../LinkCustom/LinkCustom';
+import React, { JSX } from 'react';
+import useLockout from '@/hooks/useLockout/useLockout';
 
 /**
  * A card that contains information on the user's entry for this league. Contains the entry number, their entry status (alive or eliminated), team logo once a pick is set, and a button to make a pick or change their pick
@@ -34,35 +35,7 @@ const LeagueEntries = ({
   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);
-  }, []);
+  const lockedOut = useLockout();
 
   return (
     <div
@@ -144,15 +117,15 @@ const LeagueEntries = ({
         >
           {!isEliminated && (
             <LinkCustom
-              aria-disabled={isLockedOut === true ? 'true' : 'false'}
+              aria-disabled={lockedOut === true ? 'true' : 'false'}
               className={cn(
                 'league-entry-pick-link',
-                isLockedOut === true ? 'opacity-50 cursor-not-allowed' : '',
+                lockedOut === true ? 'opacity-50 cursor-not-allowed' : '',
               )}
               dataTestidProp="league-entry-pick-link"
               href={linkUrl}
               onClick={(e: { preventDefault: () => unknown }) =>
-                isLockedOut === true && e.preventDefault()
+                lockedOut === true && e.preventDefault()
               }
               size={'defaultButton'}
               variant={isPickSet ? 'secondaryButton' : 'primaryButton'}

hooks/useLockout/useLockout.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Function to constantly check the current time every hour and set the lockout accordingly.
+ * @returns - The value of lockedOut.
+ */
+const useLockout = (): boolean => {
+  const [lockedOut, 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 lockedOut;
+};
+
+export default useLockout;