feat: format typing speed using the current setting

Author: aradzie

package-lock.json

@@ -3,12 +3,9 @@ import { type LearningRate } from "@keybr/lesson";
 import { SpeedUnit, uiProps } from "@keybr/result";
 import { useSettings } from "@keybr/settings";
 import { useMemo } from "react";
-import { type FormatNumberOptions, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { messages } from "./intl.ts";
 
-const f1 = { minimumFractionDigits: 1, maximumFractionDigits: 1 };
-const f2 = { minimumFractionDigits: 2, maximumFractionDigits: 2 };
-
 export type FormatterOptions = {
   readonly unit?: boolean;
 };
@@ -28,27 +25,27 @@ export const useFormatter = (): Formatter => {
   return useMemo(() => {
     const speedUnit = settings.get(uiProps.speedUnit);
     const speedUnitName = formatMessage(speedUnit.name);
-    let opts: FormatNumberOptions;
-    switch (speedUnit) {
-      case SpeedUnit.WPM:
-        opts = f1;
-        break;
-      case SpeedUnit.WPS:
-        opts = f2;
-        break;
-      case SpeedUnit.CPM:
-        opts = f1;
-        break;
-      case SpeedUnit.CPS:
-        opts = f2;
-        break;
-      default:
-        throw new Error();
-    }
+    const f1 = { minimumFractionDigits: 1, maximumFractionDigits: 1 };
+    const f2 = { minimumFractionDigits: 2, maximumFractionDigits: 2 };
     const formatSpeed = (
       value: number,
       { unit = true }: FormatterOptions = {},
     ): string => {
+      let opts;
+      switch (speedUnit) {
+        case SpeedUnit.WPM:
+          opts = f1;
+          break;
+        case SpeedUnit.WPS:
+          opts = f2;
+          break;
+        case SpeedUnit.CPM:
+          opts = f1;
+          break;
+        case SpeedUnit.CPS:
+          opts = f2;
+          break;
+      }
       const s = formatNumber(speedUnit.measure(value), opts);
       if (unit) {
         return s + speedUnit.id;

packages/keybr-lesson-ui/lib/format.ts

@@ -70,7 +70,7 @@ export function TargetSpeedProp(): ReactNode {
           </Dir>
         </Field>
         <Field>
-          <Value value={formatSpeed(targetSpeed, { unit: true })} />
+          <Value value={formatSpeed(targetSpeed)} />
         </Field>
       </FieldList>
       <Explainer>

packages/page-practice/lib/settings/lesson/TargetSpeedProp.tsx

@@ -5,6 +5,7 @@ import {
   SpeedHistogram,
 } from "@keybr/chart";
 import { useIntlNumbers } from "@keybr/intl";
+import { useFormatter } from "@keybr/lesson-ui";
 import { Screen } from "@keybr/pages-shared";
 import {
   Box,
@@ -38,6 +39,7 @@ export const Report = memo(function Report({
   readonly onNext: () => void;
 }) {
   const { formatNumber, formatPercents } = useIntlNumbers();
+  const { speedUnit, formatSpeed } = useFormatter();
 
   useHotkeys(["Enter", onNext]);
 
@@ -53,16 +55,19 @@ export const Report = memo(function Report({
       <Box alignItems="center" justifyContent="center">
         <Indicator
           name="Speed"
-          value={<Metric value={`${formatNumber(speed / 5, 2)}`} unit="WPM" />}
-          title="The typing speed in words per minute."
+          value={
+            <Metric
+              value={formatSpeed(speed, { unit: false })}
+              unit={speedUnit.id}
+            />
+          }
         />
         <Separator />
         <Indicator
           name="Accuracy"
           value={
             <Metric value={`${formatNumber(accuracy * 100, 2)}`} unit="%" />
           }
-          title="The percentage of characters typed without errors."
         />
       </Box>
 
@@ -146,7 +151,7 @@ function Indicator({
 }: {
   readonly name: ReactNode;
   readonly value: ReactNode;
-  readonly title: string;
+  readonly title?: string;
 }) {
   return (
     <div className={styles.indicator} title={title}>

packages/page-typing-test/lib/components/Report.tsx

@@ -19,6 +19,7 @@
     "@keybr/phonetic-model": "*",
     "@keybr/phonetic-model-loader": "*",
     "@keybr/rand": "*",
+    "@keybr/result": "*",
     "@keybr/settings": "*",
     "@keybr/textinput": "*",
     "@keybr/textinput-events": "*",