feat: view switcher component

Avoid deep property drilling by using the view switching context.
The context displays one of the previously configured screens.

Author: aradzie

packages/keybr-widget/lib/components/index.ts

@@ -21,4 +21,5 @@ export * from "./textfield/index.ts";
 export * from "./toast/index.ts";
 export * from "./tour/index.ts";
 export * from "./types.ts";
+export * from "./view/index.ts";
 export * from "./zoomer/index.ts";

packages/keybr-widget/lib/components/view/ViewSwitch.test.tsx

@@ -0,0 +1,84 @@
+import { test } from "node:test";
+import { render } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { assert } from "chai";
+import { useView, ViewSwitch } from "./ViewSwitch.tsx";
+
+const views = {
+  one: One,
+  two: Two,
+  invalid: Invalid,
+} as const;
+
+test("switch", async () => {
+  const r = render(<ViewSwitch views={views} />);
+
+  assert.isNotNull(r.queryByText("One"));
+  assert.isNull(r.queryByText("Two"));
+
+  await userEvent.click(r.getByText("Switch"));
+
+  assert.isNotNull(r.queryByText("Two"));
+  assert.isNotNull(r.queryByText("Due"));
+  assert.isNull(r.queryByText("One"));
+  assert.isNull(r.queryByText("Uno"));
+
+  await userEvent.click(r.getByText("Switch"));
+
+  assert.isNotNull(r.queryByText("One"));
+  assert.isNotNull(r.queryByText("Uno"));
+  assert.isNull(r.queryByText("Two"));
+  assert.isNull(r.queryByText("Due"));
+
+  r.unmount();
+});
+
+function One({ name }: { name?: string } = {}) {
+  const { setView } = useView(views);
+  return (
+    <div>
+      <p>One</p>
+      <p>{name}</p>
+      <button
+        onClick={() => {
+          setView("two", { name: "Due" });
+        }}
+      >
+        Switch
+      </button>
+    </div>
+  );
+}
+
+function Two({ name }: { name?: string } = {}) {
+  const { setView } = useView(views);
+  return (
+    <div>
+      <p>Two</p>
+      <p>{name}</p>
+      <button
+        onClick={() => {
+          setView("one", { name: "Uno" });
+        }}
+      >
+        Switch
+      </button>
+    </div>
+  );
+}
+
+function Invalid() {
+  const { setView } = useView(views);
+  return (
+    <div>
+      <button
+        onClick={() => {
+          // @ts-expect-error Invalid view name.
+          setView("omg");
+        }}
+      >
+        Switch
+      </button>
+    </div>
+  );
+}

packages/keybr-widget/lib/components/view/ViewSwitch.tsx

@@ -0,0 +1,51 @@
+import {
+  createContext,
+  type FunctionComponent,
+  useContext,
+  useState,
+} from "react";
+
+export type ViewName = string;
+export type ViewProps = Record<string, any>;
+export type ViewMap = { readonly [name: ViewName]: FunctionComponent<any> };
+
+export const ViewContext = createContext<{
+  readonly setView: (name: ViewName, props?: ViewProps) => void;
+}>({
+  setView: (name) => {
+    if (process.env.NODE_ENV !== "production") {
+      console.log(`Switch view to [${name}]`);
+    }
+  },
+});
+
+export function useView<T extends ViewMap>(views: T) {
+  return useContext(ViewContext) as {
+    readonly setView: (name: keyof T, props?: ViewProps) => void;
+  };
+}
+
+export function ViewSwitch({ views }: { readonly views: ViewMap }) {
+  const [[name, props], setView] = useState(
+    () => [Object.keys(views)[0], {}] as [ViewName, ViewProps],
+  );
+  const View = views[name];
+  if (View == null) {
+    throw new Error(
+      process.env.NODE_ENV !== "production"
+        ? `Unknown view [${name}]`
+        : undefined,
+    );
+  }
+  return (
+    <ViewContext.Provider
+      value={{
+        setView: (name, props = {}) => {
+          setView([name, props]);
+        },
+      }}
+    >
+      <View {...props} />
+    </ViewContext.Provider>
+  );
+}

packages/keybr-widget/lib/components/view/index.ts

@@ -0,0 +1 @@
+export * from "./ViewSwitch.tsx";

packages/page-practice/lib/PracticePage.tsx

@@ -1,12 +1,11 @@
 import { KeyboardOptions, Layout } from "@keybr/keyboard";
-import { Settings, useSettings } from "@keybr/settings";
-import { type ReactNode, useState } from "react";
-import { PracticeScreen } from "./practice/PracticeScreen.tsx";
-import { SettingsScreen } from "./settings/SettingsScreen.tsx";
+import { Settings } from "@keybr/settings";
+import { ViewSwitch } from "@keybr/widget";
+import { views } from "./views.tsx";
 
 setDefaultLayout(window.navigator.language);
 
-function setDefaultLayout(localeId: string): void {
+function setDefaultLayout(localeId: string) {
   const layout = Layout.findLayout(localeId);
   if (layout != null) {
     Settings.addDefaults(
@@ -18,25 +17,6 @@ function setDefaultLayout(localeId: string): void {
   }
 }
 
-export function PracticePage(): ReactNode {
-  const { updateSettings } = useSettings();
-  const [configure, setConfigure] = useState(false);
-  if (configure) {
-    return (
-      <SettingsScreen
-        onSubmit={(newSettings) => {
-          updateSettings(newSettings);
-          setConfigure(false);
-        }}
-      />
-    );
-  } else {
-    return (
-      <PracticeScreen
-        onConfigure={() => {
-          setConfigure(true);
-        }}
-      />
-    );
-  }
+export function PracticePage() {
+  return <ViewSwitch views={views} />;
 }

packages/page-practice/lib/practice/Controller.tsx

@@ -28,11 +28,9 @@ import {
 export const Controller = memo(function Controller({
   progress,
   onResult,
-  onConfigure,
 }: {
   readonly progress: Progress;
   readonly onResult: (result: Result) => void;
-  readonly onConfigure: () => void;
 }): ReactNode {
   const {
     state,
@@ -60,7 +58,6 @@ export const Controller = memo(function Controller({
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
       onInput={handleInput}
-      onConfigure={onConfigure}
     />
   );
 });

packages/page-practice/lib/practice/Controls.tsx

@@ -1,6 +1,6 @@
 import { Dir } from "@keybr/intl";
 import { names } from "@keybr/lesson-ui";
-import { Button, Icon, IconButton } from "@keybr/widget";
+import { Button, Icon, IconButton, useView } from "@keybr/widget";
 import {
   mdiAspectRatio,
   mdiCog,
@@ -10,22 +10,22 @@ import {
 } from "@mdi/js";
 import { memo, type ReactNode } from "react";
 import { useIntl } from "react-intl";
+import { views } from "../views.tsx";
 import * as styles from "./Controls.module.less";
 
 export const Controls = memo(function Controls({
   onChangeView,
   onResetLesson,
   onSkipLesson,
   onHelp,
-  onConfigure,
 }: {
   readonly onChangeView: () => void;
   readonly onResetLesson: () => void;
   readonly onSkipLesson: () => void;
   readonly onHelp: () => void;
-  readonly onConfigure: () => void;
 }): ReactNode {
   const { formatMessage } = useIntl();
+  const { setView } = useView(views);
   return (
     <div id={names.controls} className={styles.controls}>
       <IconButton
@@ -73,7 +73,9 @@ export const Controls = memo(function Controls({
           defaultMessage:
             "Change lesson settings, configure language, keyboard layout, etc.",
         })}
-        onClick={onConfigure}
+        onClick={() => {
+          setView("settings");
+        }}
       />
     </div>
   );

packages/page-practice/lib/practice/PracticeScreen.test.tsx

@@ -22,7 +22,7 @@ test("render", async () => {
           .set(lessonProps.customText.content, "abcdefghij")}
       >
         <FakeResultContext initialResults={faker.nextResultList(100)}>
-          <PracticeScreen onConfigure={() => {}} />
+          <PracticeScreen />
         </FakeResultContext>
       </FakeSettingsContext>
     </FakeIntlProvider>,

packages/page-practice/lib/practice/PracticeScreen.tsx

@@ -6,33 +6,21 @@ import { LessonLoader } from "@keybr/lesson-loader";
 import { LoadingProgress } from "@keybr/pages-shared";
 import { type Result, useResults } from "@keybr/result";
 import { useSettings } from "@keybr/settings";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller } from "./Controller.tsx";
 import { displayEvent, Progress } from "./state/index.ts";
 
-export function PracticeScreen({
-  onConfigure,
-}: {
-  readonly onConfigure: () => void;
-}): ReactNode {
+export function PracticeScreen() {
   return (
     <KeyboardProvider>
       <LessonLoader>
-        {(lesson) => (
-          <ProgressUpdater lesson={lesson} onConfigure={onConfigure} />
-        )}
+        {(lesson) => <ProgressUpdater lesson={lesson} />}
       </LessonLoader>
     </KeyboardProvider>
   );
 }
 
-function ProgressUpdater({
-  lesson,
-  onConfigure,
-}: {
-  readonly lesson: Lesson;
-  readonly onConfigure: () => void;
-}): ReactNode {
+function ProgressUpdater({ lesson }: { readonly lesson: Lesson }) {
   const { results, appendResults } = useResults();
   const [progress, { total, current }] = useProgress(lesson, results);
   if (progress == null) {
@@ -47,7 +35,6 @@ function ProgressUpdater({
             appendResults([result]);
           }
         }}
-        onConfigure={onConfigure}
       />
     );
   }

packages/page-practice/lib/practice/Presenter.tsx

@@ -27,7 +27,6 @@ type Props = {
   readonly onKeyDown: (ev: IKeyboardEvent) => void;
   readonly onKeyUp: (ev: IKeyboardEvent) => void;
   readonly onInput: (ev: IInputEvent) => void;
-  readonly onConfigure: () => void;
 };
 
 type State = {
@@ -75,7 +74,7 @@ export class Presenter extends PureComponent<Props, State> {
 
   override render(): ReactNode {
     const {
-      props: { state, lines, depressedKeys, onConfigure },
+      props: { state, lines, depressedKeys },
       state: { view, tour, focus },
       handleResetLesson,
       handleSkipLesson,
@@ -102,7 +101,6 @@ export class Presenter extends PureComponent<Props, State> {
                 onResetLesson={handleResetLesson}
                 onSkipLesson={handleSkipLesson}
                 onHelp={handleHelp}
-                onConfigure={onConfigure}
               />
             }
             textInput={
@@ -136,7 +134,6 @@ export class Presenter extends PureComponent<Props, State> {
                 onResetLesson={handleResetLesson}
                 onSkipLesson={handleSkipLesson}
                 onHelp={handleHelp}
-                onConfigure={onConfigure}
               />
             }
             textInput={
@@ -169,7 +166,6 @@ export class Presenter extends PureComponent<Props, State> {
                 onResetLesson={handleResetLesson}
                 onSkipLesson={handleSkipLesson}
                 onHelp={handleHelp}
-                onConfigure={onConfigure}
               />
             }
             textInput={

packages/page-practice/lib/settings/SettingsScreen.test.tsx

@@ -17,7 +17,7 @@ test("render", async () => {
     <FakeIntlProvider>
       <FakeSettingsContext>
         <FakeResultContext initialResults={faker.nextResultList(100)}>
-          <SettingsScreen onSubmit={() => {}} />
+          <SettingsScreen />
         </FakeResultContext>
       </FakeSettingsContext>
     </FakeIntlProvider>,