@wger-project/react-components 25.10.16

package/src/components/Measurements/widgets/CategoryForm.test.tsx

@@ -0,0 +1,96 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import { useAddMeasurementCategoryQuery, useEditMeasurementCategoryQuery } from "components/Measurements/queries";
+import { CategoryForm } from "components/Measurements/widgets/CategoryForm";
+import React from 'react';
+import { TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_CATEGORY_2 } from "tests/measurementsTestData";
+
+jest.mock("services/weight");
+
+jest.mock("components/Measurements/queries");
+
+
+describe("Test the CategoryForm component", () => {
+    const queryClient = new QueryClient();
+    let mutate = jest.fn();
+
+    beforeEach(() => {
+        mutate = jest.fn();
+
+        (useEditMeasurementCategoryQuery as jest.Mock).mockImplementation(() => ({
+            mutate: mutate
+        }));
+        (useAddMeasurementCategoryQuery as jest.Mock).mockImplementation(() => ({
+            mutate: mutate
+        }));
+    });
+
+    test('Passing an existing entry renders its values in the form', () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <CategoryForm category={TEST_MEASUREMENT_CATEGORY_1} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByDisplayValue('Biceps')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('cm')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'submit' })).toBeInTheDocument();
+    });
+
+    test('Editing an existing category', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <CategoryForm category={TEST_MEASUREMENT_CATEGORY_2} />
+            </QueryClientProvider>
+        );
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+        const nameInput = await screen.findByLabelText('name');
+        const unitInput = await screen.findByLabelText('unit');
+
+        await user.clear(nameInput);
+        await user.type(nameInput, 'a better name');
+        await user.clear(unitInput);
+        await user.type(unitInput, 'K/m2');
+
+        // Assert
+        await user.click(submitButton);
+        expect(mutate).toHaveBeenCalledWith({
+            id: 2,
+            name: "a better name",
+            unit: 'K/m2',
+        });
+    });
+
+    test('Creating a new category', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <CategoryForm />
+            </QueryClientProvider>
+        );
+        const nameInput = await screen.findByLabelText('name');
+        const unitInput = await screen.findByLabelText('unit');
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+        await user.type(nameInput, 'calves');
+        await user.type(unitInput, 'cm');
+
+        // Assert
+        await user.click(submitButton);
+        expect(mutate).toHaveBeenCalledWith({
+            name: 'calves',
+            unit: 'cm'
+        });
+    });
+});

package/src/components/Measurements/widgets/CategoryForm.tsx

@@ -0,0 +1,88 @@
+import { Button, Stack, TextField } from "@mui/material";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import { useAddMeasurementCategoryQuery, useEditMeasurementCategoryQuery } from "components/Measurements/queries";
+import { Form, Formik } from "formik";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import * as yup from 'yup';
+
+interface CategoryFormProps {
+    category?: MeasurementCategory,
+    closeFn?: () => void,
+}
+
+export const CategoryForm = ({ category, closeFn }: CategoryFormProps) => {
+
+    const [t] = useTranslation();
+    const useAddCategoryQuery = useAddMeasurementCategoryQuery();
+    const useEditCategoryQuery = useEditMeasurementCategoryQuery(category?.id || 0);
+    const validationSchema = yup.object({
+        name: yup
+            .string()
+            .required(t('forms.fieldRequired'))
+            .max(20, t('forms.maxLength', { chars: '20' }))
+            .min(3, t('forms.minLength', { chars: '3' })),
+        unit: yup
+            .string()
+            .required(t('forms.fieldRequired'))
+            .max(5, t('forms.maxLength', { chars: '5' }))
+    });
+
+
+    return (
+        <Formik
+            initialValues={{
+                name: category ? category.name : "",
+                unit: category ? category.unit : "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+
+                // Edit existing weight entry
+                if (category) {
+                    useEditCategoryQuery.mutate({ ...values, id: category.id });
+                } else {
+                    useAddCategoryQuery.mutate(values);
+                }
+
+                // if closeFn is defined, close the modal (this form does not have to
+                // be displayed in a modal)
+                if (closeFn) {
+                    closeFn();
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Stack spacing={2}>
+                        <TextField
+                            fullWidth
+                            id="name"
+                            label={t('name')}
+                            error={formik.touched.name && Boolean(formik.touched.name)}
+                            helperText={formik.touched.name && formik.errors.name}
+                            {...formik.getFieldProps('name')}
+                        />
+                        <TextField
+                            fullWidth
+                            id="unit"
+                            label={t('unit')}
+                            error={formik.touched.unit && Boolean(formik.errors.unit)}
+                            helperText={
+                                formik.touched.unit && formik.errors.unit
+                                    ? formik.errors.unit
+                                    : t('measurements.unitFormHelpText')
+                            }
+                            {...formik.getFieldProps('unit')}
+                        />
+                        <Stack direction="row" justifyContent="end" sx={{ mt: 2 }}>
+                            <Button color="primary" variant="contained" type="submit" sx={{ mt: 2 }}>
+                                {t('submit')}
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Form>
+            )}
+        </Formik>
+    );
+};

package/src/components/Measurements/widgets/EntryForm.test.tsx

@@ -0,0 +1,120 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, within } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+import {
+    useAddMeasurementEntryQuery,
+    useEditMeasurementEntryQuery,
+    useMeasurementsQuery
+} from "components/Measurements/queries";
+import { EntryForm } from "components/Measurements/widgets/EntryForm";
+import { TEST_MEASUREMENT_CATEGORY_1, TEST_MEASUREMENT_ENTRIES_1 } from "tests/measurementsTestData";
+
+jest.mock("services/weight");
+
+jest.mock("components/Measurements/queries");
+
+
+describe("Test the EntryForm component", () => {
+    const queryClient = new QueryClient();
+    let mutate = jest.fn();
+
+    beforeEach(() => {
+        (useMeasurementsQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: TEST_MEASUREMENT_CATEGORY_1
+        }));
+
+        mutate = jest.fn();
+
+        (useEditMeasurementEntryQuery as jest.Mock).mockImplementation(() => ({
+            mutate: mutate
+        }));
+        (useAddMeasurementEntryQuery as jest.Mock).mockImplementation(() => ({
+            mutate: mutate
+        }));
+    });
+
+    test('Passing an existing entry renders its values in the form', () => {
+
+        // Arrange
+        const entry = TEST_MEASUREMENT_ENTRIES_1[0];
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <EntryForm entry={entry} categoryId={1} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByDisplayValue('2023-02-01')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('10')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('test note')).toBeInTheDocument();
+        expect(screen.getAllByLabelText('date').length).toBeGreaterThan(0);
+        expect(screen.getByLabelText('value')).toBeInTheDocument();
+        expect(screen.getByLabelText('notes')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'submit' })).toBeInTheDocument();
+    });
+
+    test('Editing an existing entry', async () => {
+
+        // Arrange
+        const entry = TEST_MEASUREMENT_ENTRIES_1[0];
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <EntryForm entry={entry} categoryId={1} />
+            </QueryClientProvider>
+        );
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+        await user.clear(screen.getByLabelText('value'));
+        await user.type(screen.getByLabelText('value'), '25');
+
+        // Assert
+        expect(submitButton).toBeInTheDocument();
+        await user.click(submitButton);
+        expect(mutate).toHaveBeenCalledWith({
+            date: expect.anything(), // timezones... new Date("2023-01-31T23:00:00.000Z"),
+            id: 1,
+            notes: "test note",
+            value: 25,
+        });
+    });
+
+    test('Creating a new entry', async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <EntryForm categoryId={11} />
+            </QueryClientProvider>
+        );
+        const group = screen.getByRole('group', { name: /date/i });
+        const dateInput = within(group).getByRole('textbox', { hidden: true });
+        const valueInput = await screen.findByLabelText('value');
+        const notesInput = await screen.findByLabelText('notes');
+        const submitButton = screen.getByRole('button', { name: 'submit' });
+
+        // Act
+        await user.type(dateInput, '2023-06-18');
+        await user.clear(valueInput);
+        await user.type(valueInput, '42.42');
+        await user.clear(notesInput);
+        await user.type(notesInput, 'The Shiba Inu is a breed of hunting dog from Japan.');
+
+        // Assert
+        expect(submitButton).toBeInTheDocument();
+        await user.click(submitButton);
+        expect(mutate).toHaveBeenCalledWith({
+            categoryId: 11,
+            date: expect.anything(), // timezones... new Date('2023-06-17T22:00:00.000Z')
+            notes: 'The Shiba Inu is a breed of hunting dog from Japan.',
+            value: 42.42,
+        });
+    });
+});

package/src/components/Measurements/widgets/EntryForm.tsx

@@ -0,0 +1,139 @@
+import { Button, Stack, TextField } from "@mui/material";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { MeasurementEntry } from "components/Measurements/models/Entry";
+import {
+    useAddMeasurementEntryQuery,
+    useEditMeasurementEntryQuery,
+    useMeasurementsQuery
+} from "components/Measurements/queries";
+import { Form, Formik } from "formik";
+import { DateTime, Settings } from "luxon";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { TIMEZONE } from "utils/consts";
+import { dateToYYYYMMDD } from "utils/date";
+import * as yup from 'yup';
+
+Settings.defaultZone = TIMEZONE;
+
+interface EntryFormProps {
+    entry?: MeasurementEntry,
+    closeFn?: () => void,
+    categoryId: number,
+}
+
+export const EntryForm = ({ entry, closeFn, categoryId }: EntryFormProps) => {
+
+    const [t, i18n] = useTranslation();
+    const useAddEntryQuery = useAddMeasurementEntryQuery();
+    const useEditEntryQuery = useEditMeasurementEntryQuery();
+    const categoryQuery = useMeasurementsQuery(categoryId);
+
+    const [dateValue, setDateValue] = React.useState<DateTime | null>(entry ? DateTime.fromJSDate(entry.date) : DateTime.now());
+
+    const validationSchema = yup.object({
+        value: yup
+            .number()
+            .required(t('forms.fieldRequired'))
+            .min(0, t('forms.minValue', { value: '0' }))
+            .max(1000, t('forms.maxValue', { value: '1000' })),
+        date: yup
+            .date()
+            .required(t('forms.fieldRequired')),
+        notes: yup
+            .string()
+            .max(500, t('forms.maxLength', { value: '500' })),
+    });
+
+
+    return (
+        (<Formik
+            initialValues={{
+                value: entry ? entry.value : 0,
+                date: entry ? entry.date : new Date(),
+                notes: entry ? entry.notes : "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values) => {
+
+                // Edit existing weight entry
+                if (entry) {
+                    useEditEntryQuery.mutate({ ...values, id: entry.id! });
+                } else {
+                    useAddEntryQuery.mutate({ ...values, categoryId: categoryId });
+                }
+
+                // if closeFn is defined, close the modal (this form does not have to
+                // be displayed in a modal)
+                if (closeFn) {
+                    closeFn();
+                }
+            }}
+        >
+            {formik => (
+                <Form>
+                    <Stack spacing={2}>
+                        <TextField
+                            fullWidth
+                            id="value"
+                            type={"number"}
+                            label={t('value')}
+                            error={formik.touched.value && Boolean(formik.errors.value)}
+                            helperText={formik.touched.value && formik.errors.value}
+                            {...formik.getFieldProps('value')}
+                        />
+                        {categoryQuery.isLoading
+                            ? <LoadingPlaceholder />
+                            : <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={i18n.language}>
+                                <DatePicker
+                                    format="yyyy-MM-dd"
+                                    label={t('date')}
+                                    value={dateValue}
+                                    disableFuture={true}
+
+                                    onChange={(newValue) => {
+                                        if (newValue) {
+                                            formik.setFieldValue('date', newValue.toJSDate());
+                                        }
+                                        setDateValue(newValue);
+                                    }}
+                                    shouldDisableDate={(date) => {
+                                        // Allow the date of the current weight entry, since we are editing it
+                                        if (entry && dateToYYYYMMDD(entry.date) === dateToYYYYMMDD(date.toJSDate())) {
+                                            return false;
+                                        }
+
+                                        // if date is in list of existing entries, disable it
+                                        if (date) {
+                                            return categoryQuery.data!.entries.some(entry => dateToYYYYMMDD(entry.date) === dateToYYYYMMDD(date.toJSDate()));
+                                        }
+
+                                        // all other dates are allowed
+                                        return false;
+                                    }}
+                                />
+                            </LocalizationProvider>}
+
+                        <TextField
+                            fullWidth
+                            id="notes"
+                            label={t('notes')}
+                            multiline
+                            error={formik.touched.notes && Boolean(formik.errors.notes)}
+                            helperText={formik.touched.notes && formik.errors.notes}
+                            {...formik.getFieldProps('notes')}
+                        />
+
+                        <Stack direction="row" justifyContent="end" sx={{ mt: 2 }}>
+                            <Button color="primary" variant="contained" type="submit" sx={{ mt: 2 }}>
+                                {t('submit')}
+                            </Button>
+                        </Stack>
+                    </Stack>
+                </Form>
+            )}
+        </Formik>)
+    );
+};

package/src/components/Measurements/widgets/MeasurementChart.tsx

@@ -0,0 +1,52 @@
+import { Box } from "@mui/material";
+import { MeasurementCategory } from "components/Measurements/models/Category";
+import React from "react";
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { theme } from "theme";
+import { dateToLocale } from "utils/date";
+
+export const MeasurementChart = (props: { category: MeasurementCategory }) => {
+    const NR_OF_ENTRIES_CHART_DOT = 30;
+
+    // map the list of weights to an array of objects with the date and weight
+    const entryData = [...props.category.entries].sort((a, b) => a.date.getTime() - b.date.getTime()).map(entry => {
+        return {
+            date: entry.date.getTime(),
+            value: entry.value,
+            entry: entry
+        };
+    });
+
+
+    return <Box alignItems={'center'} display={'flex'} flexDirection={'column'}>
+        <ResponsiveContainer width="90%" height={200}>
+
+            <LineChart data={entryData}>
+                <Line
+                    type="monotone"
+                    dataKey="value"
+                    stroke={theme.palette.secondary.main}
+                    strokeWidth={2}
+                    dot={entryData.length > NR_OF_ENTRIES_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
+                    activeDot={{
+                        stroke: 'black',
+                        strokeWidth: 1,
+                        r: 6,
+                        //onClick: handleClick
+                    }} />
+                <CartesianGrid
+                    stroke="#ccc"
+                    strokeDasharray="5 5" />
+                <XAxis
+                    dataKey="date"
+                    type={'number'}
+                    domain={['dataMin', 'dataMax']}
+                    tickFormatter={timeStr => dateToLocale(new Date(timeStr))!}
+                    tickCount={10}
+                />
+                <YAxis domain={['auto', 'auto']} unit={props.category.unit} />
+                {/*<Tooltip content={<CustomTooltip />} />*/}
+            </LineChart>
+        </ResponsiveContainer>
+    </Box>;
+};

package/src/components/Measurements/widgets/fab.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Fab } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import { useTranslation } from "react-i18next";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { CategoryForm } from "components/Measurements/widgets/CategoryForm";
+import { EntryForm } from "components/Measurements/widgets/EntryForm";
+import { useParams } from "react-router-dom";
+
+export const AddMeasurementCategoryFab = () => {
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+
+    return (
+        <div>
+            <Fab
+                color="secondary"
+                aria-label="add"
+                onClick={handleOpenModal}
+                sx={{
+                    position: 'fixed',
+                    bottom: '5rem',
+                    right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                    zIndex: 9,
+                }}>
+                <AddIcon />
+            </Fab>
+            <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+                <CategoryForm closeFn={handleCloseModal} />
+            </WgerModal>
+        </div>
+    );
+};
+
+export const AddMeasurementEntryFab = () => {
+    const [t] = useTranslation();
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+
+    const params = useParams<{ categoryId: string }>();
+    const categoryId = parseInt(params.categoryId!);
+
+
+    return (<>
+        <Fab
+            color="secondary"
+            aria-label="add"
+            onClick={handleOpenModal}
+            sx={{
+                position: 'fixed',
+                bottom: '5rem',
+                right: (theme) => `max(${theme.spacing(2)}, calc((100vw - ${theme.breakpoints.values.lg}px) / 2 + ${theme.spacing(2)}))`,
+                zIndex: 9,
+            }}>
+            <AddIcon />
+        </Fab>
+        <WgerModal title={t('add')} isOpen={openModal} closeFn={handleCloseModal}>
+            <EntryForm closeFn={handleCloseModal} categoryId={categoryId} />
+        </WgerModal>
+    </>);
+};

package/src/components/Muscles/MuscleOverview.tsx

@@ -0,0 +1,37 @@
+import { Muscle } from "components/Exercises/models/muscle";
+import { PUBLIC_URL } from "config";
+import React from "react";
+
+type OverviewCardProps = {
+    primaryMuscles: Muscle[];
+    secondaryMuscles: Muscle[];
+    isFront: boolean;
+};
+
+export const MuscleOverview = ({ primaryMuscles, secondaryMuscles, isFront }: OverviewCardProps) => {
+    const backgroundStyle = [];
+
+    backgroundStyle.push(
+        ...primaryMuscles
+            .filter(m => m.isFront === isFront)
+            .map(m => `/muscles/main/muscle-${m.id}.svg`)
+    );
+    backgroundStyle.push(
+        ...secondaryMuscles
+            .filter(m => m.isFront === isFront)
+            .map(m => `/muscles/secondary/muscle-${m.id}.svg`)
+    );
+    backgroundStyle.push(isFront ? "/muscles/muscular_system_front.svg" : "/muscles/muscular_system_back.svg");
+    const backgroundUrl = backgroundStyle.map(url => `url(${PUBLIC_URL}${url})`).join(", ");
+
+    return (
+        <div
+            style={{
+                height: "400px",
+                width: "200px",
+                backgroundImage: backgroundUrl,
+                backgroundRepeat: "no-repeat"
+            }}>
+        </div>
+    );
+};

package/src/components/Nutrition/components/BmiCalculator.test.tsx

@@ -0,0 +1,55 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import { BmiCalculator } from "components/Nutrition/components/BmiCalculator";
+import { BrowserRouter } from 'react-router-dom';
+import { testQueryClient } from "tests/queryClient";
+
+// Mock the necessary React Query hooks
+jest.mock('components/BodyWeight/queries', () => ({
+    useBodyWeightQuery: () => ({
+        isLoading: false,
+        data: [{ weight: 55, date: new Date() }], // Provide mock weight data
+    }),
+}));
+
+jest.mock('components/User/queries/profile', () => ({
+    useProfileQuery: () => ({
+        isLoading: false,
+        data: { height: 180, useMetric: true }, // Provide mock profile data
+    }),
+}));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={testQueryClient}>
+        <BrowserRouter>
+            {children}
+        </BrowserRouter>
+    </QueryClientProvider>
+);
+
+const { ResizeObserver } = window;
+
+describe('BmiCalculator', () => {
+
+    beforeEach(() => {
+        // @ts-ignore
+        delete window.ResizeObserver;
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn()
+        }));
+    });
+
+    afterEach(() => {
+        window.ResizeObserver = ResizeObserver;
+        jest.restoreAllMocks();
+    });
+
+    it('renders the component with title and chart', async () => {
+        render(<BmiCalculator />, { wrapper });
+
+        expect(screen.getByText('bmi.calculator')).toBeInTheDocument();
+        expect(screen.getByText('bmi.result')).toBeInTheDocument();
+    });
+});