Fix student quotes mismatch quote urls

[DukeManh]

Fixes #2646.

The bug happens because we generate a random quote at

telescope/src/web/src/components/Banner.tsx

Line 108 in 323abdf

const studentQuote = quotes[Math.floor(Math.random() * quotes.length)];

.

Because NextJS tries to pre-render stuff, first, a random quote is generated once at build time, and once when the page loads. Now the new quote is updated to the visual elements of the page but not the href of the <a> tag which is still the pre-rendered one. I am not sure why the href is not updated.

In this fix, I put the random quote to a state, and generate it once the banner component is loaded. I could also generate it in the useState initializer but the initializer might be invoked twice because of React development strict mode.

Issue This PR Addresses

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[DukeManh]

cc @chrispinkney, I couldn't request a review, I think Chris was kicked out of Telescope :).

[humphd]

cc @chrispinkney, I couldn't request a review, I think Chris was kicked out of Telescope :).

Fixed

[DukeManh]

uh oh, looks like the problem still persists on staging.

[manekenpix]

@DukeManh Weird, the fix worked with the vercel preview