Make pageContextSlice default to null

Author: jacbn

src/IsaacAppTypes.tsx

@@ -756,4 +756,4 @@ export type SiteTheme = Subject | "neutral";
 export type PageContextState = {
     stage: ApiTypes.Stage; // "all" is the default
     subject: Subject | undefined;
-};
+} | null;

src/app/services/pageContext.ts

@@ -55,7 +55,7 @@ export const getThemeFromContextAndTags = (element: React.RefObject<HTMLElement>
  * @returns The page context for this page.
  */
 export const getUpdatedPageContext = (previousContext: PageContextState | undefined, userContexts: readonly UserContext[] | undefined, doc: ContentBaseDTO | undefined): PageContextState => {
-    const newContext = {stage: "all", subject: undefined} as PageContextState;
+    const newContext = {stage: "all", subject: undefined} as NonNullable<PageContextState>;
 
     // if we haven't changed stage (GCSE => GCSE), use the stage from the old context
     if (previousContext?.stage && doc?.audience?.some(a => a.stage?.includes(previousContext.stage))) {

src/app/state/selectors.tsx

@@ -73,7 +73,7 @@ export const selectors = {
     },
 
     pageContext: {
-        context: (state: AppState) => state?.pageContext,
+        context: (state: AppState) => state?.pageContext ?? undefined, // transform null => undefined
         stage: (state: AppState) => state?.pageContext?.stage,
         subject: (state: AppState) => state?.pageContext?.subject,
     }

src/app/state/slices/context.ts

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { PageContextState, Subject } from "../../../IsaacAppTypes";
+import { PageContextState } from "../../../IsaacAppTypes";
 import { Stage } from "../../../IsaacApiTypes";
 
 interface actionType {
@@ -9,12 +9,12 @@ interface actionType {
 
 export const pageContextSlice = createSlice({
     name: 'pageContextSlice',
-    initialState: ({stage: "all" as Stage, subject: undefined as Subject | undefined}),
+    initialState: null as PageContextState,
     reducers: {
         updatePageContext: (state, action: actionType) => {
             if (state) {
-                state.stage = action.payload.stage;
-                state.subject = action.payload.subject;
+                state.stage = action.payload?.stage || "all" as Stage;
+                state.subject = action.payload?.subject || undefined;
             }
         }
     },