Allow local storage settings to be overridden (#1129)

Required for classroom language switching via query param.

src/common/use-storage.ts

@@ -14,7 +14,8 @@ export function useStorage<T>(
   storageType: storageType,
   key: string,
   defaultValue: T,
-  validate?: (x: unknown) => x is T
+  validate?: (x: unknown) => x is T,
+  overrides?: Partial<T>
 ): [T, (value: T) => void] {
   const [state, setState] = useState<T>(() => {
     const storage =
@@ -29,6 +30,7 @@ export function useStorage<T>(
         parsed = {
           ...defaultValue,
           ...parsed,
+          ...overrides,
         };
         // Remove any top-level keys that aren't present in defaults.
         const unknownKeys = new Set(Object.keys(parsed));

src/settings/settings.tsx

@@ -7,6 +7,7 @@ import { createContext, ReactNode, useContext } from "react";
 import { useStorage } from "../common/use-storage";
 import { defaultCodeFontSizePt } from "../deployment/misc";
 import { stage } from "../environment";
+import { flags } from "../flags";
 
 export interface Language {
   id: string;
@@ -168,14 +169,15 @@ export const useSettings = (): SettingsContextValue => {
 };
 
 const SettingsProvider = ({ children }: { children: ReactNode }) => {
-  const settings = useStorage<Settings>(
+  const [settings, setSettings] = useStorage<Settings>(
     "local",
     "settings",
     defaultSettings,
-    isValidSettingsObject
+    isValidSettingsObject,
+    flags.noLang ? { languageId: getLanguageFromQuery() } : {}
   );
   return (
-    <SettingsContext.Provider value={settings}>
+    <SettingsContext.Provider value={[settings, setSettings]}>
       {children}
     </SettingsContext.Provider>
   );