Include colors and theme when sharing timetable #3467

leslieyip02 · 2023-07-27T13:57:32Z

Context

Resolves #3423 by allowing module colors and theme to be shared via URL.

Implementation

Module colorMapping and themeId are passed into the query parameters.

e.g.

modules = {
   CS2104: { Lecture: '1', Tutorial: '2' },
   CS2107: { Lecture: '1', Tutorial: '8' },
}

colors = {
   CS2104: 3,
   CS2107: 4,
}

themeId = 'monokai'

=> CS2104=LEC:1,TUT:2,COL:3&CS2107=LEC:1,TUT:8,COL:4&THEME=monokai

demo.mp4

vercel · 2023-07-27T13:57:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nusmods-export	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 3:48pm
nusmods-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 3:48pm

vercel · 2023-07-27T13:57:38Z

@leslieyip02 is attempting to deploy a commit to a Personal Account owned by @nusmodifications on Vercel.

@nusmodifications first needs to authorize it.

codecov · 2023-07-27T14:01:53Z

Codecov Report

Patch coverage: 63.15% and project coverage change: +0.04% 🎉

Comparison is base (b7c679e) 53.29% compared to head (484b1bc) 53.34%.
Report is 37 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3467      +/-   ##
==========================================
+ Coverage   53.29%   53.34%   +0.04%     
==========================================
  Files         271      271              
  Lines        5850     5892      +42     
  Branches     1395     1406      +11     
==========================================
+ Hits         3118     3143      +25     
- Misses       2732     2749      +17

Files Changed	Coverage Δ
website/src/actions/export.ts	`11.11% <0.00%> (ø)`
website/src/bootstrapping/matomo.ts	`24.24% <0.00%> (ø)`
website/src/entry/export/TimetableOnly.tsx	`0.00% <0.00%> (ø)`
website/src/reducers/timetables.ts	`85.39% <ø> (ø)`
website/src/serverless/handler.ts	`0.00% <0.00%> (ø)`
website/src/types/views.ts	`100.00% <ø> (ø)`
website/src/utils/error.ts	`15.38% <0.00%> (ø)`
website/src/utils/ical.ts	`98.55% <ø> (ø)`
...ebsite/src/views/components/SearchkitSearchBox.tsx	`0.00% <0.00%> (ø)`
...c/views/components/filters/DropdownListFilters.tsx	`41.37% <0.00%> (ø)`
... and 45 more

... and 1 file with indirect coverage changes

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

website/src/utils/timetables.ts

ZhangYiJiang · 2023-07-31T03:04:52Z

website/src/utils/timetables.ts

 }

+// Extracts module configs from query string
 export function deserializeTimetable(serialized: string): SemTimetableConfig {


It's best to rewrite this so that it parses from query string, then delegate to objects to extract individual parts instead of having each functions re-parse the query string.

website/src/views/timetable/ShareTimetable.tsx

ZhangYiJiang · 2023-07-31T03:07:43Z

website/src/views/timetable/TimetableContainer.tsx

+    if (semester && importedColors) {
+      Object.entries(importedColors).forEach((colorMapping: [string, ColorIndex]) => {
+        const [moduleCode, colorIndex] = colorMapping;
+        dispatch(selectModuleColor(semester, moduleCode, colorIndex));
+      });
+    }
+    const importedThemeId = deserializeTimetableThemeId(location.search);
+    if (semester && importedThemeId) {
+      dispatch(selectTheme(importedThemeId));
+    }


Note that imported timetable is temporary - the user has to confirm before the existing timetable is overwritten. This makes the imported module colour and theme take effect immediately when opening the URL, which is inconsistent with timetable behavior

demo-v2.mp4

Is this better?

website/src/utils/timetables.ts

ZhangYiJiang

Sorry the previous review submitted early. The serialization and deserialization looks good, but the changes cannot be applied immediately when the import URL is opened if we want to match existing import behavior

website/src/utils/timetables.test.ts

ZhangYiJiang · 2023-07-31T03:13:41Z

website/src/utils/timetables.ts

+        serializedModule.split(QUERY_PARAM_SEP).forEach((param) => {
+          const [paramName, paramValue] = param.split(QUERY_PARAM_VALUE_SEP);
+          if (paramName === QUERY_PARAM_ABBREV[COLOR_PARAM]) {
+            colorMapping[moduleCode] = parseInt(paramValue, 10);


Since colours are bound to a sub-param inside each module code, this is better extracted as part of deserializeTimetable instead

website/src/utils/timetables.test.ts

leslieyip02 · 2023-07-31T11:48:47Z

I wanted to implement undoing colors and theme imports, but it seems that the "UNDO" button in the notifications isn't working. I have opened a new issue for that: #3475.

leslieyip02 · 2023-08-08T15:56:41Z

I wanted to implement undoing colors and theme imports, but it seems that the "UNDO" button in the notifications isn't working. I have opened a new issue for that: #3475.

The issue has been resolved. Imported colors can be undone, but the theme does not become undone. I'm not sure why the theme is not stored in the history. I'm guessing it has something to do with this:

nusmods/website/src/views/timetable/TimetableContainer.tsx

Line 50 in 8ebbf2f

history.push(timetablePage(semester)); // TODO: Check that this works

leslieyip02 added 3 commits July 27, 2023 01:02

Include color mapping and theme in sharing url

e02bea0

Add tests

18cabe7

Fix linting

70a3744

vercel bot deployed to Preview – nusmods-export July 27, 2023 13:58 View deployment

leslieyip02 changed the title ~~Share timetable export theme~~ Include colors and theme when sharing timetable Jul 27, 2023

ZhangYiJiang reviewed Jul 31, 2023

View reviewed changes

ZhangYiJiang requested changes Jul 31, 2023

View reviewed changes

vercel bot deployed to Preview – nusmods-website July 31, 2023 03:45 View deployment

Merge branch 'nusmodifications:master' into share-timetable-export-theme

97e2b14

vercel bot deployed to Preview – nusmods-export July 31, 2023 10:27 View deployment

Refactor deserialization

24cc09c

vercel bot deployed to Preview – nusmods-export July 31, 2023 10:33 View deployment

leslieyip02 added 2 commits August 8, 2023 22:06

Merge branch 'master' into share-timetable-export-theme

d4e0adf

Fix linting

484b1bc

vercel bot deployed to Preview – nusmods-export August 8, 2023 15:48 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Include colors and theme when sharing timetable #3467

Include colors and theme when sharing timetable #3467

leslieyip02 commented Jul 27, 2023 •

edited

vercel bot commented Jul 27, 2023 •

edited

vercel bot commented Jul 27, 2023

codecov bot commented Jul 27, 2023 •

edited

ZhangYiJiang Jul 31, 2023 •

edited

ZhangYiJiang Jul 31, 2023 •

edited

leslieyip02 Jul 31, 2023

ZhangYiJiang left a comment

ZhangYiJiang Jul 31, 2023

leslieyip02 commented Jul 31, 2023 •

edited

leslieyip02 commented Aug 8, 2023

Include colors and theme when sharing timetable #3467

Are you sure you want to change the base?

Include colors and theme when sharing timetable #3467

Conversation

leslieyip02 commented Jul 27, 2023 • edited

Context

Implementation

vercel bot commented Jul 27, 2023 • edited

vercel bot commented Jul 27, 2023

codecov bot commented Jul 27, 2023 • edited

Codecov Report

ZhangYiJiang Jul 31, 2023 • edited

Choose a reason for hiding this comment

ZhangYiJiang Jul 31, 2023 • edited

Choose a reason for hiding this comment

leslieyip02 Jul 31, 2023

Choose a reason for hiding this comment

ZhangYiJiang left a comment

Choose a reason for hiding this comment

ZhangYiJiang Jul 31, 2023

Choose a reason for hiding this comment

leslieyip02 commented Jul 31, 2023 • edited

leslieyip02 commented Aug 8, 2023

leslieyip02 commented Jul 27, 2023 •

edited

vercel bot commented Jul 27, 2023 •

edited

codecov bot commented Jul 27, 2023 •

edited

ZhangYiJiang Jul 31, 2023 •

edited

ZhangYiJiang Jul 31, 2023 •

edited

leslieyip02 commented Jul 31, 2023 •

edited