Fix the replay of a server-rendered timestamp label

Review the AI's codeEasy10 min

Your task

A Next.js page shows an "Updated at" label, and it flickers on load. The server renders the time from its own clock. The browser renders it again from its own clock during hydration, when React takes over the server's HTML and expects the same output. The fix passes one server timestamp down so both sides format the same number. The team wants a replay of both renders to show it.

An assistant wrote render_last_seen(server_epoch, client_epoch, pin_to_server). It is in the editor. It has a bug. Find it and fix it.

Input and output:

  • server_epoch: the server's clock, as whole seconds since 1970-01-01 00:00:00 UTC. It can be negative (a time before 1970) or above 1 billion.
  • client_epoch: the browser's clock, in the same form.
  • pin_to_server: true when the fix is in place and the server's timestamp is passed down.
  • Return a list of exactly two strings: the server render, then the client render.

Rules the tests check:

  • Each string is "Updated at " followed by a time in the form HH:MM:SS.
  • The time is the UTC time of day on a 24 hour clock. Take the seconds since the most recent UTC midnight, from 0 to 86399, and split them into hours, minutes and seconds.
  • A negative epoch counts back from midnight, so -1 is 23:59:59.
  • Hours, minutes and seconds each have exactly two digits, with a leading zero below 10.
  • The server render uses server_epoch.
  • The client render uses server_epoch when pin_to_server is true, and client_epoch when it is false.

Examples

render_last_seen(server_epoch: int, client_epoch: int, pin_to_server: bool) -> list[str]
Example 1
Inputrender_last_seen(3661, 3665, False)
Output["Updated at 01:01:01", "Updated at 01:01:05"]
Example 2
Inputrender_last_seen(3661, 3665, True)
Output["Updated at 01:01:01", "Updated at 01:01:01"]
Example 3
Inputrender_last_seen(0, 0, False)
Output["Updated at 00:00:00", "Updated at 00:00:00"]