diff --git a/src/app/Components/ArtworkGrids/ArtworkAuctionTimer.tsx b/src/app/Components/ArtworkGrids/ArtworkAuctionTimer.tsx index 0f80ff98ae0..3ce52408316 100644 --- a/src/app/Components/ArtworkGrids/ArtworkAuctionTimer.tsx +++ b/src/app/Components/ArtworkGrids/ArtworkAuctionTimer.tsx @@ -3,6 +3,7 @@ import { ArtworkAuctionTimer_collectorSignals$key } from "__generated__/ArtworkA import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft" import { getTimer } from "app/utils/getTimer" import { DateTime } from "luxon" +import { useEffect, useRef, useState } from "react" import { graphql, useFragment } from "react-relay" interface ArtworkAuctionTimerProps { @@ -11,6 +12,8 @@ interface ArtworkAuctionTimerProps { inRailCard?: boolean } +const INTERVAL = 1000 + export const ArtworkAuctionTimer: React.FC = ({ collectorSignals, hideRegisterBySignal, @@ -18,12 +21,23 @@ export const ArtworkAuctionTimer: React.FC = ({ }) => { const lineHeight = inRailCard ? "20px" : "18px" const data = useFragment(fragment, collectorSignals) + const { lotClosesAt, onlineBiddingExtended, registrationEndsAt } = data.auction ?? {} - if (!data.auction) { - return null - } + const lotEndAt = DateTime.fromISO(lotClosesAt ?? "") + const intervalId = useRef | null>(null) + const [time, setTime] = useState(getTimer(lotClosesAt ?? "")["time"]) + + useEffect(() => { + intervalId.current = setInterval(() => { + const { time: timerTime } = getTimer(lotClosesAt ?? "") - const { lotClosesAt, onlineBiddingExtended, registrationEndsAt } = data.auction + setTime(timerTime) + }, INTERVAL) + + return () => { + if (intervalId.current) clearInterval(intervalId.current) + } + }, []) if ( registrationEndsAt && @@ -39,14 +53,11 @@ export const ArtworkAuctionTimer: React.FC = ({ ) } - const lotEndAt = DateTime.fromISO(lotClosesAt ?? "") - if (!lotClosesAt || lotEndAt.diffNow().as("days") > 5 || lotEndAt.diffNow().as("seconds") <= 0) { return null } const timerColor = lotEndAt.diffNow().as("hours") <= 1 ? "red100" : "blue100" - const { time } = getTimer(lotClosesAt) const { timerCopy } = formattedTimeLeft(time) if (onlineBiddingExtended) {