search

Mitsunee / fgo-timers

Fansite for the global version of Fate/Grand Order with Event Timers, info on future Upgrades, Interludes, Rank Ups, Login Exchange Tickets and Calculators
https://fgo.mitsunee.com
7 stars 1 forks source link

Broken Eventlist on HomePage after Events end #54

Closed Mitsunee closed 2 years ago

Mitsunee commented 2 years ago

Example Deployments with issue:

The event list desyncs after events (in this case Enma-Tei and Amazones Pre-Campaign) end. In this example it causes the New Years Campaign to appear with the banner image and href of Amazones Pre-Campaign, while still having the title of "New Years 2022". Next's Link component still links to the correct place (href prop of Link is updated) despite the href of the inner <a> element being wrong.

A temporary workaround is to redeploy as this refreshes the dataset generated by getStaticProps. This was not possible here due to an unrelated oversight.

Expected Result:

Screenshot_20220123_223746

Actual Result:

Screenshot_20220123_223734

Steps to reproduce:

See branch reproduce-homepage-bug (specifically files ./pages/index.jsx and ./src/components/EventCard/EventCard.jsx) for a simulated case of this bug. The branch replaces all static generation related to events with the static data from the 2nd example deployment and uses typeof window === "undefined" to inject mock timestamps for static generation to cause the event "Amazones Pre-Campaign" to be present during static generation, despite having ended.

Mitsunee commented 2 years ago

Just spent 5h attempting to set up a vite app recreating the issue and it just doesn't want to happen.

Edit: given that the vite app did not have Link from "next/link" it could be possible that its use of React.cloneElement is causing React to not rerender correctly after discovering the static html page.

Edit2: React.cloneElement is not causing the issue. At least not by itself.

Mitsunee commented 2 years ago

Deployment https://fgo-timers-ooqou9b4s-mitsunee.vercel.app/ has the issue again.

Edit: Removed the conflicting Event to temporarily work around the issue. Will have to investigate solutions for this.

Mitsunee commented 2 years ago

I have tried to make a Mock version of next/link that merely uses React.cloneElement to pass the href, which did not result in the bug. Then I also tried to literally copy next/link (modifying it to not use next/router) entirely and still could not locally reproduce this bug.