@wger-project/react-components 25.10.16

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

@@ -0,0 +1,237 @@
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import PhotoIcon from '@mui/icons-material/Photo';
+import SearchIcon from '@mui/icons-material/Search';
+import {
+    Alert,
+    AlertTitle,
+    Avatar,
+    AvatarGroup,
+    Box,
+    Button,
+    InputAdornment,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Paper,
+    Switch,
+    TextField,
+    Typography
+} from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
+import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
+import { Exercise } from "components/Exercises/models/exercise";
+
+import { useExercisesQuery } from "components/Exercises/queries";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useExerciseSubmissionStateValue } from "state";
+import { setNewBaseVariationId, setVariationId } from "state/exerciseSubmissionReducer";
+
+/*
+ * Groups a list of objects by a property
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function groupBy(list: any[], keyGetter: Function) {
+    const map = new Map();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    list.forEach((item: any) => {
+        const key = keyGetter(item);
+        const collection = map.get(key);
+        if (!collection) {
+            map.set(key, [item]);
+        } else {
+            collection.push(item);
+        }
+    });
+    return map;
+}
+
+// New component that displays the exercise info in a ListItem
+const ExerciseInfoListItem = ({ exercises }: { exercises: Exercise[] }) => {
+    const MAX_EXERCISE_IMAGES = 4;
+    const MAX_EXERCISE_NAMES = 5;
+    const variationId = exercises[0].variationId;
+    const exerciseId = exercises[0].id;
+
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+    const [showMore, setShowMore] = useState<boolean>(false);
+
+    const [stateVariationId, setStateVariationId] = useState<number | null>(state.variationId);
+    const [stateNewVariationId, setStateNewVariationId] = useState<number | null>(state.newVariationExerciseId);
+
+    useEffect(() => {
+        dispatch(setVariationId(stateVariationId));
+    }, [dispatch, stateVariationId]);
+
+    useEffect(() => {
+        dispatch(setNewBaseVariationId(stateNewVariationId));
+    }, [dispatch, stateNewVariationId]);
+
+
+    const handleToggle = (variationId: number | null, newVariationId: number | null) => () => {
+
+        if (variationId !== null) {
+            newVariationId = null;
+            if (variationId === state.variationId) {
+                variationId = null;
+            }
+        } else {
+            variationId = null;
+            if (newVariationId === state.newVariationExerciseId) {
+                newVariationId = null;
+            }
+        }
+
+        setStateVariationId(variationId);
+        setStateNewVariationId(newVariationId);
+    };
+
+    let isChecked;
+    if (variationId === null) {
+        isChecked = state.newVariationExerciseId === exerciseId;
+    } else {
+        isChecked = variationId === state.variationId;
+    }
+
+    return (
+        <ListItem disableGutters>
+            <ListItemButton onClick={handleToggle(variationId, exerciseId)}>
+                <ListItemIcon>
+                    <AvatarGroup max={MAX_EXERCISE_IMAGES} spacing={"small"}>
+                        {exercises.map((base) =>
+                            base.mainImage
+                                ? <Avatar key={base.id} src={base.mainImage.url} />
+                                : <Avatar key={base.id} children={<PhotoIcon />} />
+                        )}
+                    </AvatarGroup>
+                </ListItemIcon>
+                <ListItemText
+                    primary={exercises.slice(0, showMore ? exercises.length : MAX_EXERCISE_NAMES).map((exercise) =>
+                        <p style={{ margin: 0 }} key={exercise.id}>{exercise.getTranslation().name}</p>
+                    )} />
+
+                <Switch
+                    key={`variation-${variationId}`}
+                    edge="start"
+                    checked={isChecked}
+                    tabIndex={-1}
+                    disableRipple
+                />
+
+                {!showMore && exercises.length > MAX_EXERCISE_NAMES
+                    ? <ExpandMoreIcon onMouseEnter={() => setShowMore(true)} />
+                    : null
+                }
+
+            </ListItemButton>
+        </ListItem>
+    );
+};
+
+
+export const Step2Variations = ({ onContinue, onBack }: StepProps) => {
+    const [t] = useTranslation();
+    const exercisesQuery = useExercisesQuery();
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+
+    const [searchTerm, setSearchTerms] = useState<string>('');
+
+    // Group exercises by variationId
+    let exercises: Exercise[] = [];
+    let groupedExercises = new Map<number, Exercise[]>();
+    if (exercisesQuery.isSuccess) {
+        exercises = exercisesQuery.data;
+        if (searchTerm !== '') {
+            exercises = exercises.filter((base) => base.getTranslation().name.toLowerCase().includes(searchTerm.toLowerCase()));
+        }
+    }
+    groupedExercises = groupBy(exercises.filter(b => b.variationId !== null), (b: Exercise) => b.variationId);
+
+    return <>
+        <Grid container>
+            <Grid
+                size={{
+                    xs: 12,
+                    sm: 6
+                }}>
+                <Typography>{t('exercises.whatVariationsExist')}</Typography>
+            </Grid>
+            <Grid
+                display="flex"
+                justifyContent={"end"}
+                size={{
+                    xs: 12,
+                    sm: 6
+                }}>
+                <TextField
+                    label={t('name')}
+                    helperText={t('exercises.filterVariations')}
+                    // defaultValue={state.nameEn}
+                    variant="standard"
+                    onChange={(event) => setSearchTerms(event.target.value)}
+                    slotProps={{
+                        input: {
+                            startAdornment: (
+                                <InputAdornment position="start">
+                                    <SearchIcon />
+                                </InputAdornment>
+                            ),
+                        }
+                    }}
+                />
+            </Grid>
+        </Grid>
+
+        {exercisesQuery.isLoading
+            ? <LoadingPlaceholder />
+            : <Paper elevation={2} sx={{ mt: 2 }}>
+                <List style={{ height: "400px", overflowY: "scroll" }}>
+                    {exercises.filter(b => b.variationId === null).map(exercise =>
+                        <ExerciseInfoListItem
+                            exercises={[exercise]}
+                            key={'exercise-' + exercise.id}
+                        />
+                    )}
+                    {[...groupedExercises.keys()].map(variationId =>
+                        <ExerciseInfoListItem
+                            exercises={groupedExercises.get(variationId)!}
+                            key={'variation-' + variationId}
+                        />
+                    )}
+                </List>
+            </Paper>
+        }
+
+        <Alert severity="info" variant="filled" sx={{ mt: 2 }}>
+            <AlertTitle>{t("exercises.identicalExercise")}</AlertTitle>
+            {t('exercises.identicalExercisePleaseDiscard')}
+        </Alert>
+
+        <Grid container>
+            <Grid display="flex" justifyContent={"end"} size={12}>
+                <Box sx={{ mb: 2 }}>
+                    <div>
+                        <Button
+                            disabled={false}
+                            onClick={onBack}
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            {t('goBack')}
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={onContinue}
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            {t('continue')}
+                        </Button>
+                    </div>
+                </Box>
+            </Grid>
+        </Grid>
+    </>;
+};

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

@@ -0,0 +1,66 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Step3Description } from "components/Exercises/Add/Step3Description";
+import React from "react";
+import { testQueryClient } from "tests/queryClient";
+
+jest.mock("state/exerciseSubmissionReducer", () => {
+    const originalModule = jest.requireActual("state/exerciseSubmissionReducer");
+    return {
+        __esModule: true,
+        ...originalModule,
+        setDescriptionEn: jest.fn(),
+        setNotesEn: jest.fn(),
+    };
+});
+
+const mockOnContinue = jest.fn();
+const mockOnBack = jest.fn();
+
+describe("Test the add exercise step 3 component", () => {
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+
+    function renderStep() {
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <Step3Description
+                    onBack={mockOnBack}
+                    onContinue={mockOnContinue}
+                />
+            </QueryClientProvider>
+        );
+    }
+
+    test("Renders without crashing", () => {
+        // Act
+        renderStep();
+
+        // Assert
+        expect(screen.getByText("continue")).toBeInTheDocument();
+    });
+
+
+    test("Correctly set descriptionEn", async () => {
+        // Arrange
+        const user = userEvent.setup();
+        // const text = 'The wild boar is a suid native to much of Eurasia and North Africa';
+
+        // Act
+        renderStep();
+
+        // TODO: fix tests, see https://github.com/wger-project/react/issues/404
+        //const description = screen.getByLabelText("description");
+        //await user.click(description);
+        //await user.type(description, text);
+        await user.click(screen.getByText('continue'));
+
+        // Assert
+        //expect(mockOnContinue).toHaveBeenCalled();
+        //expect(setDescriptionEn).toHaveBeenCalledWith(text);
+    });
+});

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

@@ -0,0 +1,96 @@
+import { Box, Button, Stack } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { useLanguageCheckQuery } from "components/Core/queries";
+import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
+import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
+import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription";
+import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes";
+import { descriptionValidator, noteValidator } from "components/Exercises/forms/yupValidators";
+import { Form, Formik } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useExerciseSubmissionStateValue } from "state";
+import { setDescriptionEn, setNotesEn } from "state/exerciseSubmissionReducer";
+import { ENGLISH_LANGUAGE_ID } from "utils/consts";
+import * as yup from "yup";
+
+
+export const Step3Description = ({ onContinue, onBack }: StepProps) => {
+    const [t] = useTranslation();
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+    const languageCheckQuery = useLanguageCheckQuery();
+
+    const validationSchema = yup.object({
+        description: descriptionValidator(),
+        notes: noteValidator()
+    });
+
+    return (
+        (<Formik
+            initialValues={{
+                description: state.descriptionEn,
+                notes: state.notesEn,
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values, { setFieldError }) => {
+                let canContinue = false;
+
+                const validationResult = await languageCheckQuery.mutateAsync({
+                    input: values.description,
+                    languageId: ENGLISH_LANGUAGE_ID
+                });
+
+                // @ts-ignore - validationResult contains the message from the backend
+                if ("success" in validationResult) {
+                    canContinue = true;
+                } else {
+                    canContinue = false;
+
+                    // @ts-ignore - validationResult contains the message from the backend
+                    setFieldError('description', validationResult.check.message);
+                }
+
+                dispatch(setDescriptionEn(values.description));
+                dispatch(setNotesEn(values.notes));
+
+                if (canContinue) {
+                    onContinue!();
+                }
+
+            }}
+        >
+            <Form>
+                <Stack>
+                    <ExerciseDescription fieldName={"description"} />
+
+                    <PaddingBox />
+
+                    <ExerciseNotes fieldName={'notes'} />
+
+                    <Grid container>
+                        <Grid display="flex" justifyContent={"end"} size={12}>
+                            <Box sx={{ mb: 2 }}>
+                                <div>
+                                    <Button
+                                        onClick={onBack}
+                                        sx={{ mt: 1, mr: 1 }}
+                                    >
+                                        {t('goBack')}
+                                    </Button>
+                                    <Button
+                                        variant="contained"
+                                        type="submit"
+                                        disabled={languageCheckQuery.isPending}
+                                        sx={{ mt: 1, mr: 1 }}
+                                    >
+                                        {t('continue')}
+                                    </Button>
+                                </div>
+                            </Box>
+                        </Grid>
+                    </Grid>
+                </Stack>
+            </Form>
+        </Formik>)
+    );
+};

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

@@ -0,0 +1,119 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Step4Translations } from "components/Exercises/Add/Step4Translations";
+import { useLanguageQuery } from "components/Exercises/queries";
+import React from "react";
+import { testLanguages } from "tests/exerciseTestdata";
+
+// It seems we run into a timeout when running the tests on github actions
+jest.setTimeout(30000);
+
+jest.mock("components/Exercises/queries");
+jest.mock("state/exerciseSubmissionReducer", () => {
+    const originalModule = jest.requireActual("state/exerciseSubmissionReducer");
+    return {
+        __esModule: true,
+        ...originalModule,
+        setNameI18n: jest.fn(),
+        setDescriptionI18n: jest.fn(),
+        setAlternativeNamesI18n: jest.fn(),
+        setLanguageId: jest.fn(),
+        setEquipment: jest.fn(),
+    };
+});
+
+const mockedUseLanguageQuery = useLanguageQuery as jest.Mock;
+const mockOnContinue = jest.fn();
+const mockOnBack = jest.fn();
+const queryClient = new QueryClient();
+
+describe("Test the add exercise step 4 component", () => {
+
+    beforeEach(() => {
+        mockedUseLanguageQuery.mockImplementation(() => ({
+            isLoading: false,
+            data: testLanguages
+        }));
+    });
+
+
+    test("Renders without crashing", () => {
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step4Translations
+                    onContinue={mockOnContinue}
+                    onBack={mockOnBack}
+                />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByText("exercises.translateExerciseNow")).toBeInTheDocument();
+        expect(screen.queryByText("name")).not.toBeInTheDocument();
+        expect(screen.queryByText("exercises.alternativeNames")).not.toBeInTheDocument();
+        expect(screen.queryByText("description")).not.toBeInTheDocument();
+    });
+
+    test("Form elements are shown after clicking on the switch", async () => {
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step4Translations
+                    onContinue={mockOnContinue}
+                    onBack={mockOnBack}
+                />
+            </QueryClientProvider>
+        );
+        const button = screen.getByRole('switch');
+        await user.click(button);
+
+        expect(screen.getByText("name")).toBeInTheDocument();
+        expect(screen.getByText("exercises.alternativeNames")).toBeInTheDocument();
+    });
+
+
+    test("Correctly saves the values to the provider", async () => {
+        // Arrange
+        const user = userEvent.setup();
+        // const text = 'Der Armvernichter ist eine ein alter chinesische Kraftübung, die...';
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <Step4Translations
+                    onContinue={mockOnContinue}
+                    onBack={mockOnBack}
+                />
+            </QueryClientProvider>
+        );
+        const button = screen.getByRole('switch');
+        await user.click(button);
+
+        await user.click(screen.getByRole('combobox', { name: /language/i }));
+        await user.click(screen.getByText(/deutsch/i));
+
+        await user.type(screen.getByRole('textbox', { name: /name/i }), 'Arm Vernichter');
+        const aliases = screen.getByLabelText("exercises.alternativeNames");
+
+        await user.type(aliases, 'Bizepsvergrößer');
+        await user.keyboard('{enter}');
+        await user.type(aliases, 'Arm Explosion');
+        await user.keyboard('{enter}');
+
+        // TODO: fix tests, see https://github.com/wger-project/react/issues/404
+        //await user.type(screen.getByRole('textbox', { name: /description/i }), text);
+        await user.click(screen.getByText('continue'));
+
+
+        // Assert
+        //expect(setLanguageId).toHaveBeenCalledWith(1);
+        //expect(setNameI18n).toHaveBeenCalledWith('Arm Vernichter');
+        //expect(setAlternativeNamesI18n).toHaveBeenCalledWith(['Bizepsvergrößer', 'Arm Explosion']);
+        //expect(setDescriptionI18n).toHaveBeenCalledWith(text);
+    });
+});