Stopwatch with Lifecycle

Preview Code

Stopped

elapsed0.0s

import { defineStates, createMachine, assignEventApi } from "matchina";

export const createStopwatch = () => {
  // Define states using defineStates
  const states = defineStates({
    Stopped: {},
    Ticking: {},
    Suspended: {},
  });

  // Create the base machine with states, transitions, and initial state
  const baseMachine = createMachine(
    states,
    {
      Stopped: {
        start: "Ticking",
      },
      Ticking: {
        stop: "Stopped",
        suspend: "Suspended",
        clear: "Ticking",
      },
      Suspended: {
        stop: "Stopped",
        resume: "Ticking",
        clear: "Suspended",
      },
    },
    "Stopped"
  );

  //Use assignEventApi to enhance the machine with utility methods
  return assignEventApi(baseMachine);
};

import { onLifecycle, when } from "matchina";
import { useMachine } from "matchina/react";
import { useState, useMemo, useEffect } from "react";
import { tickEffect } from "../lib/tick-effect";
import { createStopwatch } from "./machine";

export function useStopwatch() {
  const [startTime, setStartTime] = useState<number | undefined>(undefined);
  const [elapsed, setElapsed] = useState(0);
  // Define the state machine
  const stopwatch = useMemo(
    () =>
      Object.assign(createStopwatch(), {
        startTime,
        elapsed,
      }),
    []
  );
  useEffect(
    () =>
      onLifecycle(stopwatch, {
        "*": {
          enter: when(
            (ev) => ev.to.is("Ticking"),
            () =>
              tickEffect(() => {
                setElapsed(Date.now() - (stopwatch.startTime ?? 0));
              })
          ),
          on: {
            start: {
              effect: () => {
                setStartTime(Date.now());
              },
            },
            clear: { effect: () => setElapsed(0) },
            stop: { effect: () => setElapsed(0) },
            resume: {
              effect: () => setStartTime(Date.now() - (stopwatch.elapsed ?? 0)),
            },
          },
        },
        Ticking: {
          on: {
            clear: {
              effect() {
                setStartTime(Date.now());
              },
            },
          },
        },
        Suspended: {
          on: {
            clear: {
              effect() {
                setStartTime(undefined);
              },
            },
          },
        },
      }),
    [stopwatch]
  );
  useMachine(stopwatch);
  stopwatch.startTime = startTime;
  stopwatch.elapsed = elapsed;
  return stopwatch;
}

export { StopwatchView } from "../stopwatch-common/StopwatchView";

import { StopwatchView } from "./StopwatchView";
import { useStopwatch } from "./useStopwatch";

export function Stopwatch() {
  const stopwatch = useStopwatch();
  return <StopwatchView machine={stopwatch as any} />;
}