.since().diff returning inaccurate minutes/seconds when diff minutes go from 0->59

[ndimatteo]

Hey there @spencermountain 👋

I'm using spacetime in a react site to build out a countdown ticker. I'm using .since().diff to compare the current time with a date in the future, and updating the countdown with the values returned.

Unfortunately, I noticed that when the "minutes" are at zero, and the seconds hit zero, the values for the minute after that result in what you see above. With the minutes staying at zero, and the seconds being a really odd display amount.

Here's the code I'm using to get the diff every second:

const launch = spacetime('December 8, 2020 10:00:00', 'Canada/Pacific')
const now = spacetime.now()
const time = launch.since(now).diff
const days = now.diff(launch, 'day') * 1

const [date, setDate] = useState({
  days: days,
  hours: time.hours,
  minutes: time.minutes,
  seconds: time.seconds,
})

useEffect(() => {
  const tick = () => {
    const launch = spacetime('December 8, 2020 10:00:00', 'Canada/Pacific')
    const now = spacetime.now()
    const time = launch.since(now).diff
    const days = now.diff(launch, 'day') * 1

    setDate({
      days: days,
      hours: time.hours,
      minutes: time.minutes,
      seconds: time.seconds,
    })
  }

  let isTicking = true
  const timer = setInterval(() => {
    if (isTicking) {
      tick()
    }
  }, 1000)

  return () => {
    isTicking = false
    clearInterval(timer)
  }
}, [])

Any idea why this is? Hoping to get a solve for this as I love spacetime and use it in all my projects. This one is due to go live early next week so I'm hoping not to have to refactor this with another time lib!

[ndimatteo]

I also logged the .diff at this crucial moment:

You can see the minutes get nuked to 0 and the seconds are a wildly high 4 digit number.

[ndimatteo]

Looked into this a bit more, and was able to confirm that it seems to only happen when I use a timezone for the launch compare date and it doesn't match the user's local timezone.

It works fine if I remove the timezone all together, or if I specify the same timezone as my local time.

How can I properly compare the current time for the user against my launch time at a specified timezone?

[spencermountain]

aahhh! yikes. what a great issue, and what an embarrassing bug. thank you. Yeah, I haven't been able to reproduce this. I'm not much of a react person, but I believe this is certainly a spacetime bug.

have you figured out a way to produce this, something like this?

let start = spacetime(null, 'Canada/Pacific').add(58, 'minutes').add(59, 'seconds')
let end = spacetime(null, 'Canada/Eastern')
console.log(start.since(end).diff)

it should definetly be able to compare two times in different timezones properly! if launch is 4pm pacific, since() should report 0s at 3pm mountain.

thanks for finding this, happy to fix it.

[spencermountain]

Just got a theory about this. The seconds may forget about timezones while minutes dont. Will check it out in the morning, cheers.

[spencermountain]

yeah, something is amiss.

let start = spacetime('jan 1st 2020 2:00pm', 'Canada/Pacific').add(5, 'seconds')
let end = spacetime('jan 1st 2020 2:00pm', 'Canada/Eastern')
console.log(start.since(end).diff)
//{ years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 10805 }

yikes. gonna spend some time on this this morning

[spencermountain]

fixed in v6.7.0 cheers

[ndimatteo]

Hey @spencermountain sorry for the delay! Thanks for taking a look at this, and no worries at all. It definitely felt like a more obscure issue for sure!