@wger-project/react-components 25.10.16

package/src/components/WorkoutRoutines/widgets/forms/SessionForm.tsx

@@ -0,0 +1,263 @@
+import { SentimentNeutral, SentimentSatisfiedAlt, SentimentVeryDissatisfied } from "@mui/icons-material";
+import { Button, ButtonGroup, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { DatePicker, LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { WgerTextField } from "components/Common/forms/WgerTextField";
+import {
+    IMPRESSION_BAD,
+    IMPRESSION_GOOD,
+    IMPRESSION_NEUTRAL,
+    NOTES_MAX_LENGTH,
+    WorkoutSession
+} from "components/WorkoutRoutines/models/WorkoutSession";
+import { useAddSessionQuery, useEditSessionQuery, useFindSessionQuery } from "components/WorkoutRoutines/queries";
+import { Form, Formik, FormikProps } from "formik";
+import { DateTime } from "luxon";
+import React, { useEffect } from 'react';
+import { useTranslation } from "react-i18next";
+import { dateTimeToHHMM, dateToYYYYMMDD } from "utils/date";
+import * as yup from 'yup';
+
+interface SessionFormProps {
+    initialSession?: WorkoutSession;
+    dayId: number,
+    routineId: number,
+    selectedDate: DateTime,
+    setSelectedDate: React.Dispatch<React.SetStateAction<DateTime>>
+}
+
+export const SessionForm = ({ initialSession, dayId, routineId, selectedDate, setSelectedDate }: SessionFormProps) => {
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let formik: FormikProps<any> | null;
+
+    const [t, i18n] = useTranslation();
+    const [session, setSession] = React.useState<WorkoutSession | undefined>(initialSession);
+
+    const addSessionQuery = useAddSessionQuery();
+    const editSessionQuery = useEditSessionQuery(session?.id || 0);
+    const findSessionQuery = useFindSessionQuery(
+        routineId,
+        {
+            routine: routineId,
+            date: dateToYYYYMMDD(selectedDate.toJSDate()),
+            day: dayId
+        }
+    );
+
+    const isLoading = addSessionQuery.isPending || editSessionQuery.isPending || findSessionQuery.isLoading;
+
+    const validationSchema = yup.object({
+        notes: yup
+            .string()
+            .max(NOTES_MAX_LENGTH, t('forms.maxLength', { chars: NOTES_MAX_LENGTH })),
+        date: yup
+            .date()
+            .required(),
+        start: yup
+            .date()
+            .nullable(),
+        end: yup
+            .date()
+            .nullable()
+            .min(
+                yup.ref('start'),
+                t('forms.endBeforeStart')
+            ),
+        fitInWeek: yup.boolean()
+    });
+
+
+    useEffect(() => {
+        if (findSessionQuery.data) {
+            formik!.setValues({
+                notes: findSessionQuery.data.notes || '',
+                impression: findSessionQuery.data.impression || IMPRESSION_NEUTRAL,
+                date: findSessionQuery.data.date,
+                start: findSessionQuery.data.timeStart ? DateTime.fromJSDate(findSessionQuery.data.timeStart) : null,
+                end: findSessionQuery.data.timeEnd ? DateTime.fromJSDate(findSessionQuery.data.timeEnd) : null,
+            });
+            setSession(findSessionQuery.data);
+        } else if (findSessionQuery.isSuccess && !findSessionQuery.data) {
+            formik!.setValues({
+                notes: '',
+                impression: IMPRESSION_NEUTRAL,
+                date: initialSession?.date || DateTime.now().toJSDate(), //JS Date, not DateTime
+                start: initialSession?.timeStart ? DateTime.fromJSDate(initialSession.timeStart) : null,
+                end: initialSession?.timeEnd ? DateTime.fromJSDate(initialSession.timeEnd) : null,
+            });
+            setSession(undefined);
+        }
+
+    }, [findSessionQuery.data, findSessionQuery.isSuccess, initialSession, selectedDate]);
+
+
+    return (
+        <Formik
+            enableReinitialize
+            initialValues={{
+                notes: session !== undefined ? session.notes : '',
+                date: session !== undefined ? session.date : new Date(),
+                start: session !== undefined && session.timeStart !== null ? DateTime.fromJSDate(session.timeStart!) : null,
+                end: session !== undefined && session.timeEnd !== null ? DateTime.fromJSDate(session.timeEnd!) : null,
+                impression: session !== undefined ? session.impression : IMPRESSION_NEUTRAL,
+            }}
+            innerRef={ref => formik = ref}
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+                const data = {
+                    day: dayId,
+                    routine: routineId,
+                    date: dateToYYYYMMDD(selectedDate.toJSDate()),
+                    notes: values.notes!,
+                    impression: values.impression,
+                    // eslint-disable-next-line camelcase
+                    time_start: values.start ? dateTimeToHHMM(values.start.toJSDate()) : null,
+                    // eslint-disable-next-line camelcase
+                    time_end: values.end ? dateTimeToHHMM(values.end.toJSDate()) : null
+                };
+
+                if (session !== undefined) {
+                    // @ts-ignore String vs string
+                    await editSessionQuery.mutateAsync({
+                        ...data,
+                        id: session.id
+                    });
+                } else {
+                    // @ts-ignore String vs string
+                    await addSessionQuery.mutateAsync(data);
+                    // navigate(makeLink(WgerLink.ROUTINE_EDIT, i18n.language, { id: routineId }));
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Grid container spacing={2}>
+                        <Grid size={{ xs: 12, sm: 6 }}>
+                            <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <DatePicker
+                                    value={selectedDate}
+                                    defaultValue={DateTime.now()}
+                                    label={t('date')}
+                                    onChange={(newValue) => {
+                                        if (!newValue) {
+                                            return;
+                                        }
+                                        formik.setFieldValue('date', newValue);
+                                        setSelectedDate(newValue);
+                                    }}
+                                    disableFuture={true}
+                                    slotProps={{
+                                        textField: {
+                                            variant: "standard",
+                                            fullWidth: true,
+                                            error: formik.touched.date && Boolean(formik.errors.date),
+                                            // helperText: formik.touched.date && formik.errors.date
+                                        }
+                                    }}
+                                />
+                            </LocalizationProvider>
+                        </Grid>
+                        <Grid size={{ xs: 6, sm: 3 }}>
+                            <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <TimePicker
+                                    label={t('start')}
+                                    {...formik.getFieldProps('start')}
+                                    onChange={(newValue) => {
+                                        if (newValue) {
+                                            formik.setFieldValue('start', newValue);
+                                        }
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            variant: "standard",
+                                            fullWidth: true,
+                                            error: formik.touched.start && Boolean(formik.errors.start),
+                                            helperText: formik.touched.start && formik.errors.start
+                                        }
+                                    }}
+                                />
+                            </LocalizationProvider>
+                        </Grid>
+                        <Grid size={{ xs: 6, sm: 3 }}>
+                            <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <TimePicker
+                                    label={t('end')}
+                                    {...formik.getFieldProps('end')}
+                                    onChange={(newValue) => {
+                                        if (newValue) {
+                                            formik.setFieldValue('end', newValue);
+                                        }
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            variant: "standard",
+                                            fullWidth: true,
+                                            error: formik.touched.end && Boolean(formik.errors.end),
+                                            helperText: formik.touched.end && formik.errors.end
+                                        }
+                                    }}
+                                />
+                            </LocalizationProvider>
+                        </Grid>
+                        <Grid size={12}>
+                            <WgerTextField
+                                fieldName="notes"
+                                title={t('notes')}
+                                fieldProps={{ multiline: true, rows: 4 }}
+                            />
+                        </Grid>
+
+                        <Grid size={12}>
+                            <Typography variant="caption">{t('routines.impression')}</Typography>
+                            <ButtonGroup
+                                fullWidth
+                                color="primary"
+                            >
+                                <Button
+                                    size="small"
+                                    color="info"
+                                    variant={formik.values.impression === IMPRESSION_BAD ? 'contained' : 'outlined'}
+                                    onClick={() => formik.setFieldValue('impression', IMPRESSION_BAD)}
+                                >
+                                    <SentimentVeryDissatisfied />
+                                    {t('routines.impressionBad')}
+                                </Button>
+                                <Button
+                                    size="small"
+                                    color="info"
+                                    variant={formik.values.impression === IMPRESSION_NEUTRAL ? 'contained' : 'outlined'}
+                                    onClick={() => formik.setFieldValue('impression', IMPRESSION_NEUTRAL)}
+                                >
+                                    <SentimentNeutral />
+                                    {t('routines.impressionNeutral')}
+                                </Button>
+                                <Button
+                                    size="small"
+                                    color="info"
+                                    variant={formik.values.impression === IMPRESSION_GOOD ? 'contained' : 'outlined'}
+                                    onClick={() => formik.setFieldValue('impression', IMPRESSION_GOOD)}
+                                >
+                                    <SentimentSatisfiedAlt />
+                                    {t('routines.impressionGood')}
+                                </Button>
+
+                            </ButtonGroup>
+                        </Grid>
+                        <Grid size={12} display={"flex"} justifyContent={"end"}>
+                            <Button
+                                disabled={isLoading}
+                                color="primary"
+                                variant="contained"
+                                type="submit"
+                                sx={{ mt: 2 }}>
+                                {t('submit')}
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Form>
+            )}
+        </Formik>
+    );
+};

package/src/components/WorkoutRoutines/widgets/forms/SessionLogsForm.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { useLanguageQuery } from "components/Exercises/queries";
+import { useAddRoutineLogsQuery, useRoutineDetailQuery } from "components/WorkoutRoutines/queries";
+import { SessionLogsForm } from 'components/WorkoutRoutines/widgets/forms/SessionLogsForm';
+import { DateTime } from "luxon";
+import { testLanguages } from "tests/exerciseTestdata";
+import { testRoutine1 } from "tests/workoutRoutinesTestData";
+
+
+jest.mock("components/Exercises/queries");
+jest.mock("components/WorkoutRoutines/queries");
+
+describe('SessionLogsForm', () => {
+
+    const mockUseLanguageQuery = useLanguageQuery as jest.Mock;
+    const mockAddLogsQuery = useAddRoutineLogsQuery as jest.Mock;
+    const mockRoutineDetailQuery = useRoutineDetailQuery as jest.Mock;
+    const mockMutateAsync = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockRoutineDetailQuery.mockReturnValue({
+            isLoading: false,
+            data: testRoutine1,
+        });
+        mockAddLogsQuery.mockReturnValue({
+            isPending: false,
+            data: {},
+            mutateAsync: mockMutateAsync,
+        });
+        mockUseLanguageQuery.mockReturnValue({
+            isLoading: false,
+            data: testLanguages,
+        });
+    });
+
+
+    test('renders correct exercises from routine', async () => {
+        render(<SessionLogsForm
+            dayId={5}
+            routineId={1}
+            selectedDate={DateTime.now()}
+        />);
+
+        expect(screen.getByText('Squats')).toBeInTheDocument();
+    });
+
+    test('submits with correct parameters', async () => {
+        // Arrange
+        const user = userEvent.setup();
+        const originalData = {
+            routine: 1,
+            day: 5,
+            exercise: 345,
+            repetitions: 5,
+            rir: 2,
+            weight: 20,
+
+        };
+        const updatedData = {
+            ...originalData,
+            repetitions: "17",
+            weight: "42",
+        };
+
+        // Act
+        render(<SessionLogsForm
+            dayId={5}
+            routineId={1}
+            selectedDate={DateTime.fromISO('2024-05-05T12:00:00.000Z')}
+        />);
+
+        const weightElements = screen.getAllByRole('textbox').filter(input => (input as HTMLInputElement).value === '20');
+        await user.click(weightElements[0]);
+        await user.clear(weightElements[0]);
+        await user.type(weightElements[0], "42");
+
+        const repsElements = screen.getAllByRole('textbox').filter(input => (input as HTMLInputElement).value === '5');
+        await user.click(repsElements[0]);
+        await user.clear(repsElements[0]);
+        await user.type(repsElements[0], "17");
+        await user.click(screen.getByRole('button', { name: /submit/i }));
+
+
+        // Assert
+        expect(mockMutateAsync.mock.calls[0][0].length).toEqual(4);
+        expect(mockMutateAsync.mock.calls[0][0][0]).toMatchObject(updatedData);
+        expect(mockMutateAsync.mock.calls[0][0][1]).toMatchObject(originalData);
+        expect(mockMutateAsync.mock.calls[0][0][2]).toMatchObject(originalData);
+        expect(mockMutateAsync.mock.calls[0][0][3]).toMatchObject(originalData);
+    });
+
+    test('add log action buttons works', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(<SessionLogsForm
+            dayId={5}
+            routineId={1}
+            selectedDate={DateTime.fromISO('2024-05-05T12:00:00.000Z')}
+        />);
+        await user.click(screen.getByTestId('AddIcon'));
+        await user.click(screen.getByRole('button', { name: /submit/i }));
+
+        // Assert - one more than before
+        expect(mockMutateAsync.mock.calls[0][0].length).toEqual(5);
+    });
+
+    test('delete exercise action buttons works', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(<SessionLogsForm
+            dayId={5}
+            routineId={1}
+            selectedDate={DateTime.now()}
+        />);
+        await user.click(screen.getAllByTestId('DeleteOutlinedIcon')[0]);
+
+        // Assert
+        expect(screen.queryByText('Squats')).not.toBeInTheDocument();
+    });
+});