What I am trying to do is to update the reset the countdown after changing the status.

There are three status that i am fetching from API .. future, live and expired

If API is returning future with a timestamp, this timestamp is the start_time of the auction, but if the status is live then the timestamp is the end_time of the auction.

So in the following code I am calling api in useEffect to fetch initial data pass to the Countdown and it works, but on 1st complete in handleRenderer i am checking its status and updating the auctionStatus while useEffect is checking the updates to recall API for new timestamp .. so far its working and 2nd timestamp showed up but it is stopped ... means not counting down time for 2nd time.

import React, { useEffect } from 'react';
import { atom, useAtom } from 'jotai';
import { startTimeAtom, auctionStatusAtom } from '../../atoms';
import { toLocalDateTime } from '../../utility';
import Countdown from 'react-countdown';
import { getCurrentAuctionStatus } from '../../services/api';

async function getAuctionStatus() {
    let response = await getCurrentAuctionStatus(WpaReactUi.auction_id);
    return await response.payload();
}

const Counter = () => {
    // component states
    const [startTime, setStartTime] = useAtom(startTimeAtom);
    const [auctionStatus, setAuctionStatus] = useAtom(auctionStatusAtom);

    useEffect(() => {
        getAuctionStatus().then((response) => {
            setAuctionStatus(response.status);
            setStartTime(toLocalDateTime(response.end_time, WpaReactUi.time_zone));
        });
    }, [auctionStatus]);

    //
    const handleRenderer = ({ completed, formatted }) => {
        if (completed) {
            console.log("auction status now is:", auctionStatus);
            setTimeout(() => {
                if (auctionStatus === 'future') {
                    getAuctionStatus().then((response) => {
                        setAuctionStatus(response.status);
                    });
                }
            }, 2000)
        }

        return Object.keys(formatted).map((key) => {
            return (
                <div key={`${key}`} className={`countDown bordered ${key}-box`}>
                    <span className={`num item ${key}`}>{formatted[key]}</span>
                    <span>{key}</span>
                </div>
            );
        });
    };

    console.log('starttime now:', startTime);

    return (
        startTime && (
            <div className="bidAuctionCounterContainer">
                <div className="bidAuctionCounterInner">
                    <Countdown
                        key={auctionStatus}
                        autoStart={true}
                        id="bidAuctioncounter"
                        date={startTime}
                        intervalDelay={0}
                        precision={3}
                        renderer={handleRenderer}
                    />
                </div>
            </div>
        )
    );
};

export default Counter;

CodePudding user response：

You use auctionStatus as a dependency for useEffect. And when response.status is the same, the auctionStatus doesn't change, so your useEffect won't be called again.

CodePudding user response：

Have a look at the following useCountdown hook:

https://codepen.io/AdamMorsi/pen/eYMpxOQ