feat(website): Sync state changes across tabs

[TheMythologist]

Context

Previously, changes to a redux state were not reflected in other tabs. This causes 2 main issues:

1. Major issue: Scenario where 2 tabs are opened to different modules. Clicking "Add to Semester ..." button in 1 tab, followed by the "Add to Semester ..." button in the other tab, will only cause the 2nd module to be added. (The change in the second tab overrode the change in the first tab).
2. Minor issue: Scenario where 2 tabs are opened, 1 to the timetable and another tab to a module. After clicking "Add to Semester..." button in the module tab, you have to manually refresh the timetable tab for this module to appear.

Implementation

Uses redux-state-sync to sync redux states across tabs, which uses a polyfilled BroadcastChannel under the hood.

Other Information

Another option I looked at was redux-persist-crosstab, which is unmaintained and incompatible with the current version of redux-persist.

Additionally, I had to forcefully resolve broadcast-channel to version 5.3.0.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nusmods-export	Ready	Preview	Comment	Sep 3, 2025 2:43am
nusmods-website	Ready	Preview	Comment	Sep 3, 2025 2:43am

[vercel]

@TheMythologist is attempting to deploy a commit to the modsbot's projects Team on Vercel.

A member of the Team first needs to authorize it.

[zwliew]

Thanks for looking into this! The change looks good to me with a minor nit.

Do let one of the other active maintainers @ravern, @jloh02, or @leslieyip02 review it too before merging.

[codecov]

Codecov Report

❌ Patch coverage is 30.00000% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 52.89%. Comparing base (988c6fd) to head (61dc829).
⚠️ Report is 141 commits behind head on master.

Files with missing lines	Patch %	Lines
website/src/middlewares/state-sync-middleware.ts	22.22%	7 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4174      +/-   ##
==========================================
- Coverage   54.52%   52.89%   -1.64%     
==========================================
  Files         274      290      +16     
  Lines        6076     6693     +617     
  Branches     1455     1633     +178     
==========================================
+ Hits         3313     3540     +227     
- Misses       2763     3153     +390     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TheMythologist]

Hi @zwliew I finally got to working on this again, could you help me take a look at the changes and review this PR once more? Thanks!

[jloh02]

hi i noticed a bug. steps to reproduce

1. Open 2 tabs on https://nusmods-website-mmnouxt0t-modsbots-projects.vercel.app/timetable/sem-1
2. Add a course on one tab
3. Other tab has the screenshot as below

[zwliew]

hook.js:608 TypeError: Cannot read properties of undefined (reading 'find')
    at u (modules.ts:30:30)
    at d (modules.ts:35:16)
    at timetables.ts:168:21
    at mapValues.js:38:34
    at _createBaseFor.js:17:11
    at e.exports (_baseForOwn.js:13:20)
    at e.exports (mapValues.js:37:3)
    at ue (timetables.ts:167:10)
    at timetables.ts:127:14

The problem is that in getModuleSemesterData() of modules.ts, the semesterData field of module is undefined for a module that was synced over from another tab.

Perhaps a fix for this is to whitelist the FETCH_MODULE_REQUEST and FETCH_MODULE_SUCCESS actions, which are there to add module info (like semesterData) for newly added modules.

As an aside, I would be more comfortable with switching over to an action whitelist rather than a blacklist.