Countdown not ticking after dynamically loaded in the loop

[jsbimra]

Tried several way to find the cause, but not able to figure out what this is causing.

Game.js
`
export default function Game({ gameType, title, user, activeGame, isActive = false }) {
if (!gameType) return null;

// console.log({ activeGame, isActive });

const preSelectedPlayers = finalBroadcastDataVar()?.games[gameType] ? [...finalBroadcastDataVar()?.games[gameType]?.playerVrs] : [];
// console.log({ preSelectedPlayers });
const updatePlayerVrs = new Set(preSelectedPlayers);

const [game, setGame] = useState(null);

const [isReadyToStart, setIsReadyToStart] = useState(false);
const [isUserCancelling, setIsUserCancelling] = useState(false);
const [countdownFinish, setCountdownFinish] = useState(false);
const [newTimeForCountdown, setNewTimeForCountdown] = useState(0);
const [isActiveOOT, setIsActiveOOT] = useState(false);
const [activePlayTimeLeft, setActivePlayTimeLeft] = useState(0);


// const hasDoneInitialDrawRef = useRef(false);
const initContdownRef = useRef();

const [addGame] = useMutation(km.addGame, {
    fetchPolicy: "no-cache",
    onError: (error) => {
        console.error(new Error(error));
    }
});

const [saveGame] = useMutation(km.saveGame, {
    fetchPolicy: "no-cache",
    onError: (error) => {
        console.error(new Error(error));
    }
});

const handleSwitchPlayers = (players) => {
    const reversedPlayers = Array.from(players).reverse();
    updateGameState({ playerVrs: [...reversedPlayers] });
}

const handleCountDownFinish = () => {
    setCountdownFinish(true);
};

const onRecieveNewStartTime = (newTime) => {
    if (!isNaN(newTime) && newTime !== '') {
        setNewTimeForCountdown(newTime);
    }
}

const handleStartNew = (gameType) => {
    if (gameType && gameType !== "") {
        setGame(GameInitals);
        setCountdownFinish(false);
        setIsUserCancelling(false);
        setIsReadyToStart(false);
        resetGameBroadcastData(gameType);
    }
};

const handleUpdateGameStatus = (gameStatus) => {
    setGame({
        ...game,
        gameStatus
    });
}

const handlePlayActions = (params) => {
    console.log('handle play action fired  ', params);
    if (params.length === 0) {
        console.error("accept arrays of object as value param", "pased params is: ", params);
    };

    let updateGameState = {};

    params?.forEach((item) => {
        updateGameState[item['name']] = item['value'];
        let gameStatus = null;
        if (item['name'].includes('isGame') && item['name'] !== "isGameBufferTimeAddon") {
            gameStatus = item['name'].replace('isGame', "").toLowerCase();
            handleUpdateGameStatus(gameStatus);
        }

        console.log({ conditonto: item['name'] });

        if (item['name'] === 'isGameStarted') {
            onStartHit(item?.value);
            toast.dismiss();
            toast(`${ucf(gameType)} Game Started!`);
            const payload = {
                ...game,
                gameStatus,
                active: true,
            };
            const isStarted = handleAddGame(addGame, payload);
            console.log({ isStarted, });
        }
        if (item['name'] === 'isGamePaused') {
            toast.dismiss();
            toast(`${ucf(gameType)} Game Paused!`);
            onPauseHit(item?.value);
        }
        if (item['name'] === 'isGameResumed') {
            toast.dismiss();
            toast(`${ucf(gameType)} Game Resumed!`);
            onResumeHit(item?.value);
        }
        if (item['name'] === 'isGameBufferTimeAddOn') {
            onBufferTimeAdd(item?.value);
        }
        if (item['name'] === 'isGameCancelled') {
            onPauseHit();
            if (onGameCancel(gameType)) {
                //show user cancel form to proceed with cancellation
                setIsUserCancelling(true);
            } else {
                setIsUserCancelling(false);
                onResumeHit(item?.value);
            }
        }
        if (item['name'] === 'resetGame') {
            // Hit BE API TO UPDATE GAME
            handleStartNew(gameType);

        }

    });

    if (params?.length !== 1 || params[0]['name'] !== 'isGameCancelled') {
        setTimeout(() => {
            setGame({
                ...game,
                ...updateGameState
            });
        }, 0);
    }

};

const onFieldSelected = (fieldName, item) => {
    // console.log('item recieved', { fieldName, item, updatePlayerVrs, size: updatePlayerVrs.size });

    if ((updatePlayerVrs.size == 2 || updatePlayerVrs.size > 2)) {
        updatePlayerVrs.clear();
        // console.log('clear playerVrs ', { updatePlayerVrs });
    }

    if (updatePlayerVrs.size < 2) {
        // console.log(' playerVrs add ', { updatePlayerVrs });
        updatePlayerVrs.add(item);

    }

    const updateGameStateValues = {
        [fieldName]: item,
        gameType,
        playerVrs: [...updatePlayerVrs]
    };

    // console.log({ updatePlayerVrs });

    updateGameState(updateGameStateValues);
}

const updateGameState = (payload) => {
    if (!payload || !Object.keys(payload).length) return;
    gameType !== '' && updateFinalGameBroadcastData(gameType, payload);
    setGame({
        ...game,
        ...payload
    });
}

const handleInputChange = (e) => {
    const { name, value } = e.target;
    // console.log({ name, value });

    const currentValue = value?.toLowerCase();
    const updateGameStateValues = {
        price: currentValue !== "" ? currentValue === 'single' ? 60 : 80 : null, //update price value with dynamic value
        [name]: currentValue !== "" ? currentValue : null,
    };

    if (name === 'gameAddOnTime') {
        updateGameStateValues['gameAddOnTime'] = (currentValue !== "" || currentValue !== null) ? +currentValue : null
    }

    gameType !== '' && updateFinalGameBroadcastData(gameType, updateGameStateValues);

    setGame({
        ...game,
        ...updateGameStateValues
    });

    const { game: gameVar } = finalBroadcastDataVar();
    if (gameVar && gameVar[gameType] && 'isReadyToStart' in gameVar[gameType]) {
        setIsReadyToStart(gameVar[gameType]['isReadyToStart']);
    }

    console.log({ finalGame: finalBroadcastDataVar()?.games });
};

const getActivePlayTimeLeft = (activeGame) => {

    if (!activeGame && typeof activeGame !== "object") { return; }

    const timeleftObj = calculatePlayTimeLeft({
        datetime: activeGame?.started_at,
        minsDuration: getGameDuration(activeGame?.game_type)
    });
    // console.log(timeleftObj);
    if (timeleftObj?.isInPlayTime) {
        return timeleftObj?.timeLeft
    }

    return 0;
}
useEffect(() => {
    console.log('component loaded 1!');
    const defaultGame = isActive ? mapActiveGameToGameInitials(activeGame) : GameInitals;
    setGame({
        ...defaultGame,
        gameType,
        user_id: user?.id || null
    });
}, [gameType, isActive]);

useEffect(() => {

    if (isActive) {
        console.clear();
        console.log('component loaded 2!', { activeGame });
        const isOOT = checkIsOutOfTime({ datetime: mapActiveGameToGameInitials(activeGame)?.startTime });
        setIsActiveOOT(isOOT || false);

        const playTimeLeft = getActivePlayTimeLeft(activeGame);
        playTimeLeft && setActivePlayTimeLeft(playTimeLeft);
        playTimeLeft && onStartHit(true);

        console.log({ isOOT, playTimeLeft, gd: getGameDuration(activeGame?.game_type, initContdownRef) });
    }
}, []);


return (
    <>
        <div className={`game__zone--${gameType} mb-5`}>
            {title && <h2 className="display-4 d-flex align-items-center justify-content-between w-100">{title}
            ....

                {game?.playerVrs && game?.playerVrs?.length === 2 && <>
                    <div className="mb-4">
                        <label htmlFor="playerVrs" className="form-label fs-6  w-100">
                            <span className="text-uppercase">Players</span>
                            {!isActive && <div className="float-end">
                                <a href="#"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        handleSwitchPlayers(game?.playerVrs);
                                    }}
                                    className="btn btn-link btn-sm border-0 p-0 text-small text-decoration-none">
                                    Switch {" "}
                                    <FontIcon icon={faPeopleArrows} size="sm" />
                                </a>
                            </div>}
                        </label>

                        ....

                    ....

                    {((!countdownFinish && game?.isGameStarted) || (isActive && !isActiveOOT)) && (<>
                        {/* {!game?.isGamePaused && !game?.isGameResumed && <h5> Hurray, Game Started!</h5>}
                        {game?.isGameResumed && <h5>Reback, Game Resumed!</h5>}
                        {game?.isGamePaused && (<>
                            <h5>Furr, Game Paused!</h5>
                        </>)} */}


                        {!countdownFinish && game?.playerMode !== null && !isUserCancelling && <>

                            <div className="mb-4 fs-6 fw-normal d-flex align-items-start justify-content-between flex-column">

                                {/* Game Start Time */}
                                <div className="mt-1 d-flex  justify-content-between w-100 w-md-50">
                                    <label>Game Started At{" "}</label>
                                    <span className={`badge rounded-pill bg-info fs-6`}>{getFormattedTime()}
                                    </span>
                                </div>

                                {/* {isActive && <button type="button" onClick={(e) => {
                                    const timeleftObj = calculatePlayTimeLeft({
                                        datetime: mapActiveGameToGameInitials(activeGame)?.startTime,
                                        minsDuration: getGameDuration(activeGame?.game_type)
                                    });
                                    console.log(timeleftObj);
                                }}>
                                    CalPlayTimeLeft{" "}
                                    Start Time:
                                    {JSON.stringify(mapActiveGameToGameInitials(activeGame)?.startTime)}</button>} */}

                                {/* Game Countdown timer */}
                                <div className="mt-1 d-flex align-content-end justify-content-between w-100 w-md-50">
                                    <label>Play Time Left</label>
                                    {'activePlayTimeLeft ' + activePlayTimeLeft}
                                    {/* <Countdown
                                        key={`game-id-${game?.id || idx + 1}`}
                                        ref={initContdownRef}
                                        date={isActive ? activePlayTimeLeft !== 0 ? activePlayTimeLeft * 60000 : 0 : +game?.totalPlayTime * 60000}
                                        renderer={({ hours, minutes, seconds, completed }) => {
                                            // console.log('countdown renderer : ', { hours, minutes, seconds, completed });
                                            if (completed) {
                                                // Render a complete state
                                                return ("Finised!");
                                            } else {
                                                // Render a countdown
                                                return (
                                                    <span className={`badge rounded-pill ${badgeColor} ${badgeSizeStyleClass}`}>
                                                        {zeroPad(hours) + ':' + zeroPad(minutes) + ':' + zeroPad(seconds)}
                                                    </span>
                                                );
                                            }
                                        }}
                                        autoStart={true}
                                        // zeroPadTime={2}
                                        controlled={false}
                                    /> */}


                                    {(!game?.isGameBufferTimeAddOn || isActive) && <CountDown
                                        key={`game-id-${game?.id || idx + 1}`}
                                        ckey={`game-id-${game?.id || idx + 1}`}
                                        ref={initContdownRef}
                                        milliseconds={isActive ? activePlayTimeLeft !== 0 ? activePlayTimeLeft * 60000 : 0 : +game?.totalPlayTime * 60000}
                                        badgeColor="bg-primary"
                                        completionMsg={``}
                                        onCountDownFinish={handleCountDownFinish}
                                        gameAddOnTime={game?.gameAddOnTime && game?.gameAddOnTime * 60000}
                                        isActiveGame={isActive}
                                        actions={{
                                            onStartHit,
                                            onPauseHit,
                                            onBufferTimeAdd,
                                            onRecieveNewStartTime,
                                        }}

                                    />
                                    }
                                    {(game?.isGameBufferTimeAddOn) && <CountDown
                                        key={`game-id-${game?.id || idx + 1}`}
                                        ckey={`game-id-${game?.id || idx + 1}`}
                                        ref={initContdownRef}
                                        milliseconds={newTimeForCountdown}
                                        badgeColor="bg-primary"
                                        completionMsg={``}
                                        onCountDownFinish={handleCountDownFinish}
                                        gameAddOnTime={game?.gameAddOnTime && game?.gameAddOnTime * 60000}
                                        isActiveGame={isActive}
                                        actions={{
                                            onStartHit,
                                            onPauseHit,
                                            onBufferTimeAdd,
                                            onRecieveNewStartTime,
                                        }} />
                                    }
                                </div>

                                {/* Game Addon time */}
                                <div className="mt-1 d-flex justify-content-between w-100">
                                    <label>Addon Time{" "}</label>
                                    <div className="d-flex w-50 align-content-end align-items-center justify-content-between gap-1">
                                        <input type="number"
                                            name="gameAddOnTime"
                                            className="form-control form-control-sm d-inline-block m-0 p-0 text-center"
                                            style={{ width: '100%' }}
                                            min="1"
                                            max="60"
                                            onChange={handleInputChange}
                                            readOnly={game?.isGameBufferTimeAddOn}
                                        />{" "}
                                        <small className="text-muted">(mins)</small>
                                        {" "}
                                        {!game?.isGameBufferTimeAddOn && <button
                                            type="button" className="btn btn-sm btn-secondary m-0 
                                            btn-small px-0"
                                            onClick={(e) => {
                                                e.preventDefault();
                                                handlePlayActions([
                                                    { name: 'isGameBufferTimeAddOn', value: true }
                                                ]);
                                            }}
                                            style={{
                                                width: '70%',
                                                lineHeight: 'normal',
                                                height: '30px',
                                            }}>Add</button>}
                                    </div>
                                </div>
                                {game?.isGameBufferTimeAddOn && (game?.gameAddOnTime !== 0 || game?.gameAddOnTime !== '') && (<>
                                    <p className="alert alert-info alert-sm p-1 px-3 my-2 mx-auto">Addon time of {game?.gameAddOnTime} {game?.gameAddOnTime && 'mins'} added to the play!</p>
                                </>)}

                            </div>
                        </>}
                    </>)}

                    {/* Game User Cancelling */}
                 ...
                 ....
            </form>
        </div >

    </>
);

}`

Custom -> Countdown.js

`import React, { useCallback, useEffect, useState, useRef, forwardRef } from "react";
import Countdown, { zeroPad, total, calcTimeDelta, formatTimeDelta } from "react-countdown";

function CountDown(props, ref) {
const { ckey, isActiveGame, completionMsg = '', milliseconds = 0, gameAddOnTime, actions, onCountDownFinish, badgeColor = 'bg-info', badgeSizeStyleClass = 'fs-6' } = props;

const countDownRef = ref;

console.log({ milliseconds, gameAddOnTime, countDownRef, ckey });

// const cddate = new Date(milliseconds);
const [customDateTime, setCustomDateTime] = useState(milliseconds);
// Random component
const Completionist = () => completionMsg && <span>{completionMsg}</span>;
// const onCompleted
// Renderer callback with condition
const renderer = ({ hours, minutes, seconds, completed }) => {
    // console.log('countdown renderer : ', { hours, minutes, seconds, completed });
    if (completed) {
        // Render a complete state
        return <Completionist />;
    } else {
        // Render a countdown
        return (
            <span className={`badge rounded-pill ${badgeColor} ${badgeSizeStyleClass}`}>
                {zeroPad(hours) + ':' + zeroPad(minutes) + ':' + zeroPad(seconds)}
            </span>
        );
    }
};

const handleOnMount = (timeDelta) => {
    console.log("countdown on mount triggered!", { timeDelta, countDownRef });
    if (countDownRef && countDownRef?.current) countDownRef.current.api.start();
}

const handleOnStart = (timeDelta) => {
    console.log('onstart triggered  Hurray!', { timeDelta, countDownRef });

}

const handleOnPause = (timeDelta) => {
    console.log('on paused triggered !', { timeDelta, countDownRef });
}

useEffect(() => {

    console.log({ customDateTime })
    if (customDateTime) {
        countDownRef && countDownRef?.current && countDownRef?.current.api.start();
    }
    return () => {
        setCustomDateTime(null);
    }
}, [customDateTime])

return (<>
    {'customDateTime ' + customDateTime}
    <Countdown
        key={`countdown-key-${ckey}`}
        ref={countDownRef}
        date={customDateTime}
        renderer={renderer}
        autoStart={true}
        // zeroPadTime={2}
        controlled={true}
        onMount={handleOnMount}
        onPause={handleOnPause}
        onStart={handleOnStart}
        onComplete={onCountDownFinish}
    />

    {/* onPause={handleOnPause}
        onStart={handleOnStart} */}
</>
);


// causing trouble in active game case need to look for fix!

}

export default forwardRef(CountDown);`

[jsbimra]

on screen countdown displays just static, total 4 games are loaded in loop 2 in active so one is finished and one is remaining in countdown, ticking not works.
sorry my Game file code is huge.... if confuses... will edit and remove the unwanted code display here.

[jsbimra]

Issue was here long story short: date={customDateTime} in setting countdown date:
it should be Date.now() + milliseconds value;
making that way working.