@wger-project/react-components 25.10.16

package/src/components/Exercises/Add/AddExerciseStepper.tsx

@@ -0,0 +1,97 @@
+import { Box, Container, Stack, Step, StepContent, StepLabel, Stepper, Typography, } from "@mui/material";
+import { Step1Basics } from "components/Exercises/Add/Step1Basics";
+import { Step2Variations } from "components/Exercises/Add/Step2Variations";
+import { Step3Description } from "components/Exercises/Add/Step3Description";
+import { Step4Translations } from "components/Exercises/Add/Step4Translations";
+import { Step5Images } from "components/Exercises/Add/Step5Images";
+import { Step6Overview } from "components/Exercises/Add/Step6Overview";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import * as exerciseState from "state";
+
+export type StepProps = {
+    onContinue?: () => void;
+    onBack?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+export const AddExerciseStepper = () => {
+    const [t] = useTranslation();
+    const [activeStep, setActiveStep] = React.useState(0);
+
+    const handleNext = () => {
+        setActiveStep(prevActiveStep => prevActiveStep + 1);
+    };
+
+    const handleBack = () => {
+        setActiveStep(prevActiveStep => prevActiveStep - 1);
+    };
+
+    return (
+        <exerciseState.ExerciseSubmissionStateProvider>
+            <Container maxWidth="md">
+                <Stack direction={"row"}>
+                    <Typography gutterBottom variant="h3" component="div">
+                        {t("exercises.contributeExercise")}
+                    </Typography>
+                </Stack>
+                <Box>
+                    <Stepper activeStep={activeStep} orientation="vertical">
+                        <Step key={1}>
+                            <StepLabel>{t("exercises.step1HeaderBasics")}</StepLabel>
+                            <StepContent>
+                                <Step1Basics
+                                    onContinue={handleNext}
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                        <Step key={2}>
+                            <StepLabel>{t("exercises.variations")}</StepLabel>
+                            <StepContent>
+                                <Step2Variations
+                                    onContinue={handleNext}
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                        <Step key={3}>
+                            <StepLabel>{t("description")}</StepLabel>
+                            <StepContent>
+                                <Step3Description
+                                    onContinue={handleNext}
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                        <Step key={4}>
+                            <StepLabel>{t("translation")}</StepLabel>
+                            <StepContent>
+                                <Step4Translations
+                                    onContinue={handleNext}
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                        <Step key={5}>
+                            <StepLabel>{t("images")}</StepLabel>
+                            <StepContent>
+                                <Step5Images
+                                    onContinue={handleNext}
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                        <Step key={6}>
+                            <StepLabel>{t("overview")}</StepLabel>
+                            <StepContent>
+                                <Step6Overview
+                                    onBack={handleBack}
+                                />
+                            </StepContent>
+                        </Step>
+                    </Stepper>
+                </Box>
+            </Container>
+        </exerciseState.ExerciseSubmissionStateProvider>
+    );
+};

package/src/components/Exercises/Add/NotEnoughRights.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Button, Container, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useCanContributeExercises } from "components/User/queries/contribute";
+import { MIN_ACCOUNT_AGE } from "utils/consts";
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+export const NotEnoughRights = () => {
+    const [t] = useTranslation();
+    const contributeQuery = useCanContributeExercises();
+
+    return (
+        <Container maxWidth="md">
+            <Typography variant={"h3"}>{t('exercises.notEnoughRightsHeader')}</Typography>
+            <Box
+                marginTop={4}
+                padding={4}
+                sx={{
+                    width: "100%",
+                    backgroundColor: "#ebebeb",
+                    textAlign: "center",
+                }}
+            >
+                <Typography mb={2}>{t('exercises.notEnoughRights', { days: MIN_ACCOUNT_AGE })}</Typography>
+
+                {!contributeQuery.anonymous && !contributeQuery.emailVerified
+                    &&
+                    <Button variant="contained"
+                            href={'/user/preferences'}
+                            endIcon={<ArrowForwardIosIcon />}>
+                        {t('preferences')}
+                    </Button>
+                }
+            </Box>
+        </Container>
+    );
+};

package/src/components/Exercises/Add/Step1Basics.test.tsx

@@ -0,0 +1,133 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Step1Basics } from "components/Exercises/Add/Step1Basics";
+import { useCategoriesQuery, useEquipmentQuery, useMusclesQuery } from "components/Exercises/queries";
+import React from "react";
+import { ExerciseSubmissionStateProvider } from "state";
+import {
+    setAlternativeNamesEn,
+    setCategory,
+    setEquipment,
+    setNameEn,
+    setPrimaryMuscles,
+    setSecondaryMuscles
+} from "state/exerciseSubmissionReducer";
+import { testCategories, testEquipment, testMuscles } from "tests/exerciseTestdata";
+
+// It seems we run into a timeout when running the tests on GitHub actions
+jest.setTimeout(15000);
+
+jest.mock("components/Exercises/queries");
+jest.mock("state/exerciseSubmissionReducer", () => {
+    const originalModule = jest.requireActual("state/exerciseSubmissionReducer");
+    return {
+        __esModule: true,
+        ...originalModule,
+        setNameEn: jest.fn(),
+        setCategory: jest.fn(),
+        setAlternativeNamesEn: jest.fn(),
+        setEquipment: jest.fn(),
+        setPrimaryMuscles: jest.fn(),
+        setSecondaryMuscles: jest.fn()
+    };
+});
+
+const mockedUseCategoriesQuery = useCategoriesQuery as jest.Mock;
+const mockedMuscleQuery = useMusclesQuery as jest.Mock;
+const mockedUseEquipmentQuery = useEquipmentQuery as jest.Mock;
+
+
+describe("<Step1Basics />", () => {
+
+    beforeEach(() => {
+        mockedUseCategoriesQuery.mockImplementation(() => (
+            { isLoading: false, data: testCategories }
+        ));
+        mockedMuscleQuery.mockImplementation(() => (
+            { isLoading: false, data: testMuscles }
+        ));
+        mockedUseEquipmentQuery.mockImplementation(() => (
+            { isLoading: false, data: testEquipment }
+        ));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("Renders without crashing", () => {
+        // Arrange
+        const mockOnContinue = jest.fn();
+
+        // Act
+        const queryClient = new QueryClient();
+        render(
+            <ExerciseSubmissionStateProvider>
+                <QueryClientProvider client={queryClient}>
+                    <Step1Basics onContinue={mockOnContinue} />
+                </QueryClientProvider>
+            </ExerciseSubmissionStateProvider>
+        );
+
+        // Assert
+        expect(screen.getByText("name")).toBeInTheDocument();
+        expect(screen.getByText("exercises.alternativeNames")).toBeInTheDocument();
+        expect(screen.getByText("exercises.muscles")).toBeInTheDocument();
+        expect(screen.getByText("exercises.secondaryMuscles")).toBeInTheDocument();
+        expect(screen.getByText("exercises.equipment")).toBeInTheDocument();
+    });
+
+    test("Correctly saves the values to the provider", async () => {
+        // Arrange
+        const mockOnContinue = jest.fn();
+        const user = userEvent.setup();
+
+        // Act
+        const queryClient = new QueryClient();
+        render(
+            <ExerciseSubmissionStateProvider>
+                <QueryClientProvider client={queryClient}>
+                    <Step1Basics onContinue={mockOnContinue} />
+                </QueryClientProvider>
+            </ExerciseSubmissionStateProvider>
+        );
+
+        await user.type(screen.getByLabelText("name"), 'Biceps enlarger');
+
+        const aliases = screen.getByLabelText("exercises.alternativeNames");
+        await user.type(aliases, 'Biceps enlarger 2000');
+        await user.keyboard('{enter}');
+        await user.type(aliases, 'Arms exploder');
+        await user.keyboard('{enter}');
+
+        await user.click(screen.getByLabelText('category'));
+        await user.click(screen.getByText('Arms'));
+
+        await user.click(screen.getByLabelText('exercises.equipment'));
+        await user.click(screen.getByText('Rocks'));
+
+        const muscles = screen.getByLabelText('exercises.muscles');
+        await user.click(muscles);
+        await user.click(screen.getByText(/biggus/i));
+        await user.click(muscles);
+        await user.click(screen.getByText(/dacttilaris/i));
+
+        await user.click(screen.getByLabelText('exercises.secondaryMuscles'));
+        await user.click(screen.getByText(/abdominis/i));
+
+        await user.click(screen.getByText('continue'));
+
+        // Assert
+        expect(mockOnContinue).toHaveBeenCalled();
+        expect(setPrimaryMuscles).toHaveBeenNthCalledWith(1, []);
+        expect(setPrimaryMuscles).toHaveBeenNthCalledWith(2, [1]);
+        expect(setPrimaryMuscles).toHaveBeenNthCalledWith(3, [1, 2]);
+        expect(setSecondaryMuscles).toHaveBeenNthCalledWith(1, []);
+        expect(setSecondaryMuscles).toHaveBeenNthCalledWith(2, [4]);
+        expect(setNameEn).toHaveBeenCalledWith('Biceps enlarger');
+        expect(setCategory).toHaveBeenCalledWith(1);
+        expect(setAlternativeNamesEn).toHaveBeenCalledWith(['Biceps enlarger 2000', 'Arms exploder']);
+        expect(setEquipment).toHaveBeenCalledWith([42]);
+    });
+});

package/src/components/Exercises/Add/Step1Basics.tsx

@@ -0,0 +1,179 @@
+import { Autocomplete, Box, Button, MenuItem, Stack, TextField, } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
+import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
+import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases";
+import { ExerciseEquipmentSelect } from "components/Exercises/forms/ExerciseEquipmentSelect";
+import { ExerciseName } from "components/Exercises/forms/ExerciseName";
+import { ExerciseSelect } from "components/Exercises/forms/ExerciseSelect";
+import { alternativeNameValidator, categoryValidator, nameValidator } from "components/Exercises/forms/yupValidators";
+import { useCategoriesQuery, useEquipmentQuery, useMusclesQuery, } from "components/Exercises/queries";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import { Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useExerciseSubmissionStateValue } from "state";
+import * as exerciseReducer from "state/exerciseSubmissionReducer";
+import * as yup from "yup";
+
+export const Step1Basics = ({ onContinue }: StepProps) => {
+    const [t] = useTranslation();
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+    const [primaryMuscles, setPrimaryMuscles] = useState<number[]>(state.muscles);
+    const [secondaryMuscles, setSecondaryMuscles] = useState<number[]>(state.musclesSecondary);
+
+    useEffect(() => {
+        dispatch(exerciseReducer.setPrimaryMuscles(primaryMuscles));
+    }, [dispatch, primaryMuscles]);
+
+    useEffect(() => {
+        dispatch(exerciseReducer.setSecondaryMuscles(secondaryMuscles));
+    }, [dispatch, secondaryMuscles]);
+
+
+    // Load data from server
+    const categoryQuery = useCategoriesQuery();
+    const musclesQuery = useMusclesQuery();
+    const equipmentQuery = useEquipmentQuery();
+
+    const validationSchema = yup.object({
+        nameEn: nameValidator(),
+        newAlternativeNameEn: alternativeNameValidator(),
+        category: categoryValidator(),
+    });
+
+    return (
+        <Formik
+            initialValues={{
+                nameEn: state.nameEn,
+                newAlternativeNameEn: state.alternativeNamesEn,
+                category: state.category !== null ? state.category : '',
+                muscles: state.muscles,
+                equipment: state.equipment,
+                musclesSecondary: state.musclesSecondary,
+            }}
+            validationSchema={validationSchema}
+            onSubmit={values => {
+                dispatch(exerciseReducer.setNameEn(values.nameEn));
+                dispatch(exerciseReducer.setCategory(values.category as number));
+                dispatch(exerciseReducer.setAlternativeNamesEn(values.newAlternativeNameEn));
+                dispatch(exerciseReducer.setEquipment(values.equipment));
+
+                onContinue!();
+            }}
+        >
+            {formik => {
+                return (
+                    (<Form>
+                        <Stack spacing={2}>
+                            <ExerciseName fieldName={'nameEn'} />
+                            <ExerciseAliases fieldName={'newAlternativeNameEn'} />
+
+                            {categoryQuery.isLoading
+                                ? <Box> <LoadingWidget /> </Box>
+                                : <ExerciseSelect
+                                    fieldName={'category'}
+                                    options={categoryQuery.data!.map(category => (
+                                        <MenuItem key={category.id} value={category.id}>
+                                            {category.translatedName}
+                                        </MenuItem>
+                                    ))}
+                                />
+                            }
+
+                            {equipmentQuery.isLoading
+                                ? <Box> <LoadingWidget /> </Box>
+                                : <ExerciseEquipmentSelect fieldName={'equipment'} options={equipmentQuery.data!} />
+                            }
+
+                            {musclesQuery.isLoading
+                                ? <Box> <LoadingWidget /> </Box>
+                                : <>
+                                    <Autocomplete
+                                        multiple
+                                        id="muscles"
+                                        options={musclesQuery.data!.map(m => m.id)}
+                                        getOptionDisabled={(option) =>
+                                            secondaryMuscles.includes(option)
+                                        }
+                                        getOptionLabel={option => musclesQuery.data!.find(m => m.id === option)!.getName()}
+                                        value={primaryMuscles}
+                                        onChange={(event, newValue) => {
+                                            setPrimaryMuscles(newValue);
+                                        }}
+                                        renderInput={params => (
+                                            <TextField
+                                                {...params}
+                                                variant="standard"
+                                                label={t("exercises.muscles")}
+                                                value={formik.getFieldProps("muscles").value}
+                                                onChange={e => {
+                                                    formik.setFieldValue(
+                                                        formik.getFieldProps("muscles").name,
+                                                        e.target.value
+                                                    );
+                                                }}
+                                            />
+                                        )}
+                                    />
+                                    <Autocomplete
+                                        multiple
+                                        id="secondary-muscles"
+                                        options={musclesQuery.data!.map(m => m.id)}
+                                        getOptionDisabled={(option) =>
+                                            primaryMuscles.includes(option)
+                                        }
+                                        getOptionLabel={option => musclesQuery.data!.find(m => m.id === option)!.getName()}
+                                        value={secondaryMuscles}
+                                        onChange={(event, newValue) => {
+                                            setSecondaryMuscles(newValue);
+                                        }}
+                                        renderInput={params => (
+                                            <TextField
+                                                {...params}
+                                                variant="standard"
+                                                label={t("exercises.secondaryMuscles")}
+                                                value={formik.getFieldProps("muscles").value}
+                                            />
+                                        )}
+                                    />
+                                </>
+                            }
+                            <Grid container>
+                                <Grid display="flex" justifyContent={"center"} size={6}>
+                                    <MuscleOverview
+                                        primaryMuscles={primaryMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                        secondaryMuscles={secondaryMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                        isFront={true}
+                                    />
+                                </Grid>
+                                <Grid display="flex" justifyContent={"center"} size={6}>
+                                    <MuscleOverview
+                                        primaryMuscles={primaryMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                        secondaryMuscles={secondaryMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                        isFront={false}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Stack>
+                        <Grid container>
+                            <Grid display="flex" justifyContent={"end"} size={12}>
+                                <Box sx={{ mb: 2 }}>
+                                    <div>
+                                        <Button
+                                            variant="contained"
+                                            type="submit"
+                                            sx={{ mt: 1, mr: 1 }}
+                                        >
+                                            {t('continue')}
+                                        </Button>
+                                    </div>
+                                </Box>
+                            </Grid>
+                        </Grid>
+                    </Form>)
+                );
+            }}
+        </Formik>
+    );
+};

package/src/components/Exercises/Add/Step2Variations.test.tsx

@@ -0,0 +1,149 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Step2Variations } from "components/Exercises/Add/Step2Variations";
+
+import { useExercisesQuery } from "components/Exercises/queries";
+import React from "react";
+import { ExerciseSubmissionStateProvider } from "state";
+import { testExerciseBenchPress, testExerciseCrunches, testExerciseCurls } from "tests/exerciseTestdata";
+
+jest.mock('components/Exercises/queries');
+
+
+const mockedUseExercisesQuery = useExercisesQuery as jest.Mock;
+
+
+const mockOnContinue = jest.fn();
+const queryClient = new QueryClient();
+
+describe("Test the add exercise step 2 component", () => {
+
+    beforeEach(() => {
+        mockedUseExercisesQuery.mockImplementation(() => ({
+            isLoading: false,
+            isSuccess: true,
+            data: [
+                testExerciseBenchPress,
+                testExerciseCurls,
+                testExerciseCrunches
+            ]
+        }));
+
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("Renders without crashing", () => {
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step2Variations onContinue={mockOnContinue} />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByText("exercises.whatVariationsExist")).toBeInTheDocument();
+        expect(screen.getByText("exercises.filterVariations")).toBeInTheDocument();
+        expect(screen.getByText("exercises.identicalExercisePleaseDiscard")).toBeInTheDocument();
+        expect(screen.getByText("Benchpress")).toBeInTheDocument();
+        expect(screen.getByText("Curls")).toBeInTheDocument();
+        expect(screen.getByText("Crunches")).toBeInTheDocument();
+    });
+
+    test("Correctly sets the variation ID", async () => {
+        // Act
+        render(
+            <ExerciseSubmissionStateProvider>
+                <QueryClientProvider client={queryClient}>
+                    <Step2Variations onContinue={mockOnContinue} />
+                </QueryClientProvider>
+            </ExerciseSubmissionStateProvider>
+        );
+        const benchPress = screen.getByText("Benchpress");
+        await userEvent.click(benchPress);
+
+        // Assert
+        //...
+    });
+
+    test("Correctly unsets the variation ID", async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step2Variations onContinue={mockOnContinue} />
+            </QueryClientProvider>
+        );
+        const benchpress = screen.getByText("Benchpress");
+        await user.click(benchpress);
+        await user.click(benchpress);
+
+        // Assert
+    });
+
+    test("Correctly sets the newVariationExerciseId ID", async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step2Variations onContinue={mockOnContinue} />
+            </QueryClientProvider>
+        );
+        const crunches = screen.getByText("Crunches");
+        await user.click(crunches);
+
+        // Assert
+    });
+    test("Correctly unsets the newVariationExerciseId ID", async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step2Variations onContinue={mockOnContinue} />
+            </QueryClientProvider>
+        );
+        const crunches = screen.getByText("Crunches");
+        await user.click(crunches);
+        await user.click(crunches);
+
+        // Assert
+    });
+
+    test("can correctly filter the exercises", async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step2Variations onContinue={mockOnContinue} />
+            </QueryClientProvider>
+        );
+        const input = screen.getByRole('textbox', { name: /name/i });
+
+        // Assert
+        expect(screen.getByText("Benchpress")).toBeInTheDocument();
+        expect(screen.getByText("Curls")).toBeInTheDocument();
+        expect(screen.getByText("Crunches")).toBeInTheDocument();
+
+        await user.type(input, 'cru');
+        expect(screen.queryByText("Benchpress")).not.toBeInTheDocument();
+        expect(screen.queryByText("Curls")).not.toBeInTheDocument();
+        expect(screen.getByText("Crunches")).toBeInTheDocument();
+
+        await user.clear(input);
+        await user.type(input, 'Bench');
+        expect(screen.getByText("Benchpress")).toBeInTheDocument();
+        expect(screen.queryByText("Curls")).not.toBeInTheDocument();
+        expect(screen.queryByText("Crunches")).not.toBeInTheDocument();
+    });
+});