Save configured exercises to the routine draft

apps/api/src/features/routines/routine.routes.test.ts

@@ -86,8 +86,9 @@ describe('POST /routines', () => {
       exercises: [
         {
           ...createRoutineInput.exercises[0],
-          restBetweenSetsSeconds: 0,
+          restBetweenSetsSeconds: 60,
           restAfterExerciseSeconds: 0,
+          notes: null,
         },
       ],
       schedules: [],

apps/api/src/features/routines/routine.service.test.ts

@@ -64,6 +64,7 @@ describe('createRoutineForUser', () => {
           weightUnit: 'lb',
           restBetweenSetsSeconds: 60,
           restAfterExerciseSeconds: 90,
+          notes: null,
         },
       ],
       schedules: [{ dayOfWeek: 3, localTime: '18:30:00' }],
@@ -128,6 +129,7 @@ describe('createRoutineForUser', () => {
             weightUnit: 'lb',
             restBetweenSetsSeconds: 0,
             restAfterExerciseSeconds: 0,
+            notes: null,
           },
         ],
         schedules: [],

apps/web/src/components/ui/number-stepper.tsx

@@ -8,27 +8,34 @@ import { Button } from './button';
 type NumberStepperProps = {
   defaultValue: number;
   id: string;
+  onValueChange: (value: number) => void;
   min?: number;
 };
 
 export function NumberStepper({
   defaultValue,
   id,
   min = 1,
+  onValueChange,
 }: NumberStepperProps) {
   const [value, setValue] = useState<number | string>(defaultValue);
 
   const decreaseValue = () => {
-    setValue((currentValue) => Math.max(min, Number(currentValue || min) - 1));
+    const nextValue = Math.max(min, Number(value || min) - 1);
+    setValue(nextValue);
+    onValueChange(nextValue);
   };
 
   const increaseValue = () => {
-    setValue((currentValue) => Number(currentValue || min) + 1);
+    const nextValue = Number(value || min) + 1;
+    setValue(nextValue);
+    onValueChange(nextValue);
   };
 
   const finishEditing = () => {
     if (value === '' || Number(value) < min) {
       setValue(min);
+      onValueChange(min);
     }
   };
 
@@ -62,6 +69,10 @@ export function NumberStepper({
 
           if (nextValue === '' || /^\d+$/.test(nextValue)) {
             setValue(nextValue);
+
+            if (nextValue !== '') {
+              onValueChange(Number(nextValue));
+            }
           }
         }}
         type="number"

apps/web/src/components/ui/positive-integer-input.tsx

@@ -3,21 +3,24 @@ import { useState } from 'react';
 import { Input } from './input';
 
 type PositiveIntegerInputProps = {
-  className?: string;
   defaultValue: number;
   id: string;
+  onValueChange: (value: number) => void;
+  className?: string;
 };
 
 export function PositiveIntegerInput({
   defaultValue,
   id,
   className,
+  onValueChange,
 }: PositiveIntegerInputProps) {
   const [value, setValue] = useState<number | string>(defaultValue);
 
   const finishEditing = () => {
     if (value === '' || Number(value) < 1) {
       setValue(1);
+      onValueChange(1);
     }
   };
 
@@ -33,6 +36,10 @@ export function PositiveIntegerInput({
 
         if (nextValue === '' || /^\d+$/.test(nextValue)) {
           setValue(nextValue);
+
+          if (nextValue !== '') {
+            onValueChange(Number(nextValue));
+          }
         }
       }}
       type="number"

apps/web/src/features/routines/exercise-configuration.test.tsx

@@ -3,38 +3,71 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   createMemoryHistory,
   createRootRoute,
+  createRoute,
   createRouter,
+  Outlet,
   RouterProvider,
 } from '@tanstack/react-router';
 import { cleanup, render, screen } from '@testing-library/react';
-import type { PropsWithChildren } from 'react';
+import userEvent from '@testing-library/user-event';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { afterEach, expect, it, vi } from 'vitest';
 
+import {
+  RoutineDraftFormProvider,
+  type RoutineDraftFormValues,
+} from './routine-draft-form';
 import { ExerciseConfiguration } from './exercise-configuration';
 
 afterEach(() => {
   cleanup();
   vi.unstubAllGlobals();
 });
 
-function Wrapper({ children }: PropsWithChildren) {
+function renderConfiguration(exerciseId: string) {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
-  const rootRoute = createRootRoute({ component: () => children });
+  const rootRoute = createRootRoute({ component: TestLayout });
+  const configurationRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/configure',
+    component: () => <ExerciseConfiguration exerciseId={exerciseId} />,
+  });
+  const editorRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/routines/new',
+    component: DraftExerciseCount,
+  });
   const router = createRouter({
-    history: createMemoryHistory({ initialEntries: ['/'] }),
-    routeTree: rootRoute,
+    history: createMemoryHistory({ initialEntries: ['/configure'] }),
+    routeTree: rootRoute.addChildren([configurationRoute, editorRoute]),
   });
 
-  return (
+  render(
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
-    </QueryClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+function TestLayout() {
+  return (
+    <RoutineDraftFormProvider>
+      <Outlet />
+    </RoutineDraftFormProvider>
   );
 }
 
+function DraftExerciseCount() {
+  const { control } = useFormContext<RoutineDraftFormValues>();
+  const exercises = useWatch({ control, name: 'exercises' });
+
+  return <p>Saved exercises: {exercises.length}</p>;
+}
+
 it('shows the selected exercise and initial configuration fields', async () => {
+  const user = userEvent.setup();
   const exerciseId = '26d34dc0-8e4c-4bd0-9e3b-7b839b44e486';
   vi.stubGlobal(
     'fetch',
@@ -52,12 +85,14 @@ it('shows the selected exercise and initial configuration fields', async () => {
     ),
   );
 
-  render(<ExerciseConfiguration exerciseId={exerciseId} />, {
-    wrapper: Wrapper,
-  });
+  renderConfiguration(exerciseId);
 
   expect(await screen.findByText('Bicep Curl')).toBeVisible();
   expect(screen.getByLabelText('Sets')).toHaveValue(3);
   expect(screen.getByLabelText('Reps')).toHaveValue(8);
-  expect(screen.getByRole('button', { name: 'Done' })).toBeDisabled();
+  expect(screen.getByRole('button', { name: 'Done' })).toBeEnabled();
+
+  await user.click(screen.getByRole('button', { name: 'Done' }));
+
+  expect(await screen.findByText('Saved exercises: 1')).toBeVisible();
 });