SSR based date value calculation

[noor-codes]

SSR based date value calculation

This is kind of similar to https://github.com/ndresx/react-countdown/issues/42 issue but I couldn't make it work via now prop.

@ndresx I want to pass down the current time from the server instead of Date.now() that can be anything based on the user settings. When I add the same timestamp to the now prop, the countdown stops.

The date prop calculates the countdown time based on the Date.new(), is there away I can pass down the current date from the server instead of Date.now()

If I do this, even if the user has an invalid date on their browser, I would still be able to show the right time on the countdown.

any idea?

// Todo: Calculate current time based on the server. Client side can't be valid all the times.

<Countdown
  key="countdown"
  date={targetTime} // or an option here would make it even easier
  now={() => ServerSideCurrentTImeInTimeStamp} // SSR current date
  renderer={renderer}
/>

[ndresx]

Hi, you would have to calculate the difference between Date.now() and ServerSideCurrentTImeInTimeStamp, and then basically say that now equals Date.now() + this difference. now is called every second, so the value it returns needs to be a dynamic value, not a static one.

[noor-codes]

The problem is, when I refresh, the countdown starts from a specific time, the same time on each refresh

[ndresx]

You could also remount the countdown when its parent component mounts with a new date and key.

[noor-codes]

Do you have any example in a Sandbox that would do this? It would be a great help @ndresx

[ndresx]

I don't have an example, but in componentDidMount, or useEffect, in your component that mounts the Countdown component, update a state which holds the key you pass to the countdown (can be as simple as the date). Then you can pass this state down to the countdown as key and date and the countdown would completely reset and start from new.

[noor-codes]

Thank You, I'll give it a shot.

[Geczy]

@noor-codes did you find an answer? i have the exact same problem. refreshing would cause the timestamp to not be correct. and the user may have a delayed time on their system from the start.

[noor-codes]

Haven't tried it, it was wasting my time on the project so I moved on.

I'll come to this later and will post here if I found the answer.

[Geczy]

my solution was to not use this library. i'm instead using https://github.com/vydimitrov/react-countdown-circle-timer/ and just passing in the duration as seconds to countdown, eg 600 seconds, from the server. if the user refreshes, the server will send new seconds to countdown, like 438, etc.