diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx index 72ae120b..2f8cc4ef 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/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(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. diff --git a/components/LeagueEntries/LeagueEntries.tsx b/components/LeagueEntries/LeagueEntries.tsx index 8fef57d7..6fd85e18 100644 --- a/components/LeagueEntries/LeagueEntries.tsx +++ b/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(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 (
{!isEliminated && ( unknown }) => - isLockedOut === true && e.preventDefault() + lockedOut === true && e.preventDefault() } size={'defaultButton'} variant={isPickSet ? 'secondaryButton' : 'primaryButton'} diff --git a/hooks/useLockout/useLockout.tsx b/hooks/useLockout/useLockout.tsx new file mode 100644 index 00000000..ea4d86fc --- /dev/null +++ b/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(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;