@wger-project/react-components 25.10.16

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

@@ -0,0 +1,183 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormControlLabel,
+    FormGroup,
+    InputLabel,
+    MenuItem,
+    Select,
+    Stack,
+    Switch
+} from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
+import { useLanguageCheckQuery } from "components/Core/queries";
+import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
+import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
+import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases";
+import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription";
+import { ExerciseName } from "components/Exercises/forms/ExerciseName";
+import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes";
+import {
+    alternativeNameValidator,
+    descriptionValidator,
+    nameValidator,
+    noteValidator
+} from "components/Exercises/forms/yupValidators";
+import { useLanguageQuery } from "components/Exercises/queries";
+import { Form, Formik } from "formik";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useExerciseSubmissionStateValue } from "state";
+import {
+    setAlternativeNamesI18n,
+    setDescriptionI18n,
+    setLanguageId,
+    setNameI18n,
+    setNotesI18n
+} from "state/exerciseSubmissionReducer";
+import { ENGLISH_LANGUAGE_ID } from "utils/consts";
+import * as yup from "yup";
+
+export const Step4Translations = ({ onContinue, onBack }: StepProps) => {
+    const [t] = useTranslation();
+    const languageQuery = useLanguageQuery();
+    const languageCheckQuery = useLanguageCheckQuery();
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+
+    const [translateExercise, setTranslateExercise] = useState<boolean>(state.languageId !== null);
+
+
+    const validationSchema = yup.object(
+        translateExercise ? {
+            description: descriptionValidator(),
+            name: nameValidator(),
+            alternativeNames: alternativeNameValidator(),
+            notes: noteValidator(),
+            language: yup
+                .number()
+                .required(),
+        } : {}
+    );
+
+    return (
+        <Formik
+            initialValues={{
+                name: state.nameI18n,
+                alternativeNames: state.alternativeNamesI18n,
+                description: state.descriptionI18n,
+                language: state.languageId === null ? '' : state.languageId,
+                notes: state.notesI18n
+            }}
+            validationSchema={validationSchema}
+            onSubmit={async (values, { setFieldError }) => {
+                let canContinue = true;
+
+                if (values.description !== '') {
+                    const validationResult = await languageCheckQuery.mutateAsync({
+                        input: values.description,
+                        languageId: values.language! as unknown as number
+                    });
+
+                    // @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(setNameI18n(values.name));
+                dispatch(setDescriptionI18n(values.description));
+                dispatch(setAlternativeNamesI18n(values.alternativeNames));
+                dispatch(setLanguageId(values.language === '' ? null : values.language as unknown as number));
+                dispatch(setNotesI18n(values.notes));
+
+                if (canContinue) {
+                    onContinue!();
+                }
+            }}
+        >{formik => (
+            <Form>
+                <Stack spacing={2}>
+                    <FormGroup>
+                        <FormControlLabel checked={translateExercise}
+                                          onClick={() => setTranslateExercise(!translateExercise)}
+                                          control={<Switch />}
+                                          label={t('exercises.translateExerciseNow')} />
+                    </FormGroup>
+                    {translateExercise && (
+                        <>
+                            {languageQuery.isLoading ? (
+                                <Box>
+                                    <LoadingWidget />
+                                </Box>
+                            ) : (
+                                <FormControl fullWidth>
+                                    <InputLabel id="label-language">{t('language')}</InputLabel>
+                                    <Select
+                                        labelId="label-language"
+                                        id="language"
+                                        value={formik.getFieldProps("language").value}
+                                        onChange={e => {
+                                            formik.setFieldValue(
+                                                formik.getFieldProps("language").name,
+                                                e.target.value
+                                            );
+                                        }}
+                                        label={t('language')}
+                                        error={Boolean(
+                                            formik.touched.language && formik.errors.language
+                                        )}
+                                    >
+                                        {languageQuery.data!.filter(language => language.id !== ENGLISH_LANGUAGE_ID).map(language => (
+                                            <MenuItem key={language.id} value={language.id}>
+                                                {language.nameShort} - {language.nameLong}
+                                            </MenuItem>
+                                        ))}
+                                    </Select>
+                                </FormControl>
+                            )}
+                            <ExerciseName fieldName={'name'} />
+
+                            <ExerciseAliases fieldName={'alternativeNames'} />
+
+                            <ExerciseDescription fieldName={"description"} />
+
+                            <PaddingBox />
+                            <ExerciseNotes fieldName={'notes'} />
+                        </>
+                    )}
+                </Stack>
+
+                <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"
+                                    sx={{ mt: 1, mr: 1 }}
+                                >
+                                    {t('continue')}
+                                </Button>
+                            </div>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Form>
+        )}
+        </Formik>
+    );
+};

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

@@ -0,0 +1,28 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { Step5Images } from "components/Exercises/Add/Step5Images";
+import React from "react";
+import { testQueryClient } from "tests/queryClient";
+
+
+const mockOnContinue = jest.fn();
+const mockOnBack = jest.fn();
+
+describe("Test the add exercise step 5 component", () => {
+
+    test("Smoketest", () => {
+        // Act
+        render(
+            <QueryClientProvider client={testQueryClient}>
+                <Step5Images
+                    onContinue={mockOnContinue}
+                    onBack={mockOnBack}
+                />
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByText('exercises.compatibleImagesCC')).toBeInTheDocument();
+    });
+
+});

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

@@ -0,0 +1,269 @@
+import CameraAltIcon from '@mui/icons-material/CameraAlt';
+import CollectionsIcon from '@mui/icons-material/Collections';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import InfoIcon from '@mui/icons-material/Info';
+import {
+    Alert,
+    Box,
+    Button,
+    IconButton,
+    ImageListItem,
+    ImageListItemBar,
+    Modal,
+    Stack,
+    Typography
+} from "@mui/material";
+import Grid from '@mui/material/Grid';
+import ImageList from '@mui/material/ImageList';
+import { LicenseAuthor } from "components/Common/forms/LicenseAuthor";
+import { LicenseAuthorUrl } from "components/Common/forms/LicenseAuthorUrl";
+import { LicenseDerivativeSourceUrl } from "components/Common/forms/LicenseDerivativeSourceUrl";
+import { LicenseObjectUrl } from "components/Common/forms/LicenseObjectUrl";
+import { LicenseTitle } from "components/Common/forms/LicenseTitle";
+import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
+import { ImageStyleToggle } from "components/Exercises/forms/ImageStyle";
+import { ImageFormData } from "components/Exercises/models/exercise";
+import { ImageStyle } from "components/Exercises/models/image";
+import { useProfileQuery } from "components/User/queries/profile";
+import { Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useExerciseSubmissionStateValue } from "state";
+import { setImages } from "state/exerciseSubmissionReducer";
+
+export const Step5Images = ({ onContinue, onBack }: StepProps) => {
+    const [t] = useTranslation();
+    const profileQuery = useProfileQuery();
+
+    const [state, dispatch] = useExerciseSubmissionStateValue();
+    const [localImages, setLocalImages] = useState<ImageFormData[]>(state.images);
+    const [popupImage, setPopupImage] = useState<ImageFormData | undefined>(undefined);
+
+    const [openModal, setOpenModal] = React.useState(false);
+    const handleCloseModal = () => setOpenModal(false);
+
+    useEffect(() => {
+        dispatch(setImages(localImages));
+    }, [dispatch, localImages]);
+
+    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files?.length) {
+            return;
+        }
+        const [uploadedFile] = e.target.files;
+        const objectURL = URL.createObjectURL(uploadedFile);
+
+        setOpenModal(true);
+
+        setPopupImage({
+            url: objectURL,
+            file: uploadedFile,
+
+            author: "",
+            authorUrl: "",
+            title: "",
+            derivativeSourceUrl: "",
+            objectUrl: "",
+            style: ImageStyle.PHOTO.toString()
+        });
+    };
+
+    const handleAddFullImage = (data: {
+        title: string,
+        objectUrl: string,
+        author: string,
+        authorUrl: string,
+        derivativeSourceUrl: string,
+        imageStyle: number
+    }) => {
+        setLocalImages(localImages.concat({
+            url: popupImage?.url!,
+            file: popupImage?.file!,
+
+            author: data.author,
+            authorUrl: data.authorUrl,
+            title: data.title,
+            derivativeSourceUrl: data.derivativeSourceUrl,
+            objectUrl: data.objectUrl,
+            style: data.imageStyle.toString()
+        }));
+        handleCloseModal();
+    };
+
+    const handleDeleteImage = (imageURL: string) => {
+        const updatedImagesURLS = localImages.filter(i => i.url !== imageURL);
+        setLocalImages(updatedImagesURLS);
+    };
+
+    const handleContinue = () => {
+        onContinue!();
+    };
+
+    const style = {
+        position: 'absolute' as const,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 600,
+        bgcolor: 'background.paper',
+        //border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
+
+    return (
+        (<div>
+            <Modal
+                open={openModal}
+                onClose={handleCloseModal}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+
+                <Box sx={style}>
+                    <Typography id="modal-modal-title" variant="h6" component="h2">
+                        {t('exercises.imageDetails')}
+                    </Typography>
+
+                    <Grid container spacing={2}>
+                        <Grid size={4}>
+                            {popupImage && <img
+                                style={{ width: "100%", }}
+                                src={popupImage.url}
+                                alt=""
+                                loading="lazy"
+                            />}
+                        </Grid>
+                        <Grid size={8}>
+                            <Formik
+                                initialValues={{
+                                    title: '',
+                                    objectUrl: '',
+                                    author: profileQuery.isSuccess ? profileQuery.data!.username : '',
+                                    authorUrl: '',
+                                    derivativeSourceUrl: '',
+                                    imageStyle: ImageStyle.PHOTO,
+                                }}
+                                onSubmit={values => {
+                                    console.log(values);
+                                    handleAddFullImage(values);
+                                }}
+                            >
+                                {formik => {
+                                    return (<Form>
+                                        <Stack spacing={2}>
+                                            <LicenseTitle fieldName={'title'} />
+                                            <LicenseObjectUrl fieldName={'objectUrl'} />
+                                            <LicenseAuthor fieldName={'author'} />
+                                            <LicenseAuthorUrl fieldName={'authorUrl'} />
+                                            <LicenseDerivativeSourceUrl fieldName={'derivativeSourceUrl'} />
+                                            <ImageStyleToggle fieldName={'imageStyle'} />
+                                            <Alert icon={<InfoIcon fontSize="inherit" />} severity="info">
+                                                By submitting this image, you agree to release it under the <a
+                                                href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank"
+                                                rel="noreferrer">CC
+                                                BY-SA 4.0</a> license. The image must be either your own work or the
+                                                author must have released in under
+                                                a license compatible with CC BY-SA 4.0.
+                                            </Alert>
+                                        </Stack>
+                                        <Stack direction="row" justifyContent="end"
+                                               sx={{ mt: 2 }}>
+
+                                            <Button color="primary" variant="contained" type="submit" sx={{ mt: 2 }}>
+                                                {t('add')}
+                                            </Button>
+
+                                        </Stack>
+                                    </Form>);
+                                }}
+                            </Formik>
+                        </Grid>
+                    </Grid>
+                </Box>
+            </Modal>
+            <Typography>
+                {t("exercises.compatibleImagesCC")}
+
+            </Typography>
+            <Stack direction={"row"} justifyContent="center">
+                <div>
+                    <label htmlFor="camera-input">
+                        <CameraAltIcon fontSize="large" sx={{ m: 2 }} />
+                    </label>
+                    <input
+                        style={{ display: "none" }}
+                        id="camera-input"
+                        type="file"
+                        accept="image/*"
+                        capture="environment"
+                        onChange={handleFileInputChange}
+                    />
+                </div>
+                <div>
+                    <label htmlFor="image-input">
+                        <CollectionsIcon fontSize="large" sx={{ m: 2 }} />
+                    </label>
+                    <input
+                        type="file"
+                        accept="image/*"
+                        name="image-file"
+                        id="image-input"
+                        style={{ display: "none" }}
+                        onChange={handleFileInputChange}
+                    />
+                </div>
+            </Stack>
+            <ImageList
+                cols={3}
+                style={{ maxHeight: "400px", }}>
+                {localImages.map(imageEntry => (
+                    <ImageListItem key={imageEntry.url}>
+                        <img
+                            style={{ maxHeight: "400px", maxWidth: "400px" }}
+                            src={imageEntry.url}
+                            alt=""
+                            loading="lazy"
+                        />
+                        <ImageListItemBar
+                            title={imageEntry.title}
+                            subtitle={imageEntry.author}
+                            actionIcon={
+                                <IconButton
+                                    onClick={() => handleDeleteImage(imageEntry.url)}
+                                    sx={{ color: 'white' }}
+                                >
+                                    <DeleteOutlineIcon />
+                                </IconButton>
+                            }
+                        />
+                    </ImageListItem>
+                ))}
+            </ImageList>
+            <Typography>
+                {t("forms.supportedImageFormats")}
+            </Typography>
+            <Grid container>
+                <Grid display="flex" justifyContent={"end"} size={12}>
+                    <Box sx={{ mb: 2 }}>
+                        <>
+                            <Button
+                                onClick={onBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {t('goBack')}
+                            </Button>
+                            <Button
+                                variant="contained"
+                                onClick={handleContinue}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {t('continue')}
+                            </Button>
+                        </>
+                    </Box>
+                </Grid>
+            </Grid>
+        </div>)
+    );
+};

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

@@ -0,0 +1,128 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { Step6Overview } from "components/Exercises/Add/Step6Overview";
+import {
+    useAddExerciseFullQuery,
+    useCategoriesQuery,
+    useEquipmentQuery,
+    useLanguageQuery,
+    useMusclesQuery
+} from "components/Exercises/queries";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { useExerciseSubmissionStateValue } from "state";
+import { testCategories, testEquipment, testLanguages, testMuscles } from "tests/exerciseTestdata";
+import { testProfileDataVerified } from "tests/userTestdata";
+
+
+jest.mock("components/Exercises/queries");
+jest.mock("components/User/queries/profile");
+jest.mock("state");
+
+const mockOnContinue = jest.fn();
+const mockedUseCategoriesQuery = useCategoriesQuery as jest.Mock;
+const mockedMuscleQuery = useMusclesQuery as jest.Mock;
+const mockedUseEquipmentQuery = useEquipmentQuery as jest.Mock;
+const mockedLanguageQuery = useLanguageQuery as jest.Mock;
+const mockedUseExerciseStateValue = useExerciseSubmissionStateValue as jest.Mock;
+const mockedUseProfileQuery = useProfileQuery as jest.Mock;
+const addFullExerciseMutation = useAddExerciseFullQuery as jest.Mock;
+
+const queryClient = new QueryClient();
+
+describe("Test the add exercise step 6 component", () => {
+
+    beforeEach(() => {
+        mockedUseCategoriesQuery.mockImplementation(() => (
+            { isLoading: false, data: testCategories }
+        ));
+        mockedMuscleQuery.mockImplementation(() => (
+            { isLoading: false, data: testMuscles }
+        ));
+        mockedUseEquipmentQuery.mockImplementation(() => (
+            { isLoading: false, data: testEquipment }
+        ));
+        mockedLanguageQuery.mockImplementation(() => (
+            { isLoading: false, data: testLanguages }
+        ));
+
+        mockedUseProfileQuery.mockImplementation(() => (
+            { isLoading: false, data: testProfileDataVerified }
+        ));
+
+        addFullExerciseMutation.mockImplementation(() => (
+            { isIdle: false, data: 1 }
+        ));
+
+        // there must be a better way to do this!!!
+        mockedUseExerciseStateValue.mockImplementation(() => (
+            [{
+                category: 1,
+                muscles: [2],
+                musclesSecondary: [],
+                variationId: null,
+                newVariationExerciseId: null,
+                languageId: 3,
+                equipment: [2],
+
+                nameEn: 'A new exercise',
+                descriptionEn: 'This very nice exercise will blow your mind',
+                alternativeNamesEn: [],
+                notesEn: [],
+
+                nameI18n: 'un excellent exercice',
+                alternativeNamesI18n: [],
+                descriptionI18n: 'Ce très bel exercice va vous époustoufler',
+                notesI18n: [],
+
+                images: [],
+            }]
+        ));
+    });
+
+
+    test("Smoketest", () => {
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/exercises/9']}>
+                    <Routes>
+                        <Route path="exercises/:exerciseId"
+                               element={<Step6Overview onContinue={mockOnContinue} />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByText('A new exercise')).toBeInTheDocument();
+        expect(screen.getByText('This very nice exercise will blow your mind')).toBeInTheDocument();
+
+        expect(screen.getByText('Arms')).toBeInTheDocument();
+        expect(screen.getByText('Dumbbell')).toBeInTheDocument();
+        expect(screen.getByText('exercises.step1HeaderBasics')).toBeInTheDocument();
+        expect(screen.getByText(/Musculus dacttilaris/i)).toBeInTheDocument();
+
+        expect(screen.getByText('un excellent exercice')).toBeInTheDocument();
+        expect(screen.getByText('Ce très bel exercice va vous époustoufler')).toBeInTheDocument();
+    });
+
+    test("that the correct calls to the API are made", () => {
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/exercises/9']}>
+                    <Routes>
+                        <Route path="exercises/:exerciseId"
+                               element={<Step6Overview onContinue={mockOnContinue} />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        // TODO: addExercise, etc.
+    });
+
+});