@wger-project/react-components 25.10.16

package/src/components/Exercises/Detail/ExerciseDetailEdit.tsx

@@ -0,0 +1,340 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { Alert, Box, Button, IconButton, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
+import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
+import { EditExerciseCategory } from "components/Exercises/forms/Category";
+import { EditExerciseEquipment } from "components/Exercises/forms/Equipment";
+import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases";
+import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription";
+import { ExerciseName } from "components/Exercises/forms/ExerciseName";
+import { AddImageCard, ImageEditCard } from "components/Exercises/forms/ImageCard";
+import { EditExerciseMuscle } from "components/Exercises/forms/Muscle";
+import { AddVideoCard, VideoEditCard } from "components/Exercises/forms/VideoCard";
+import {
+    alternativeNameValidator,
+    descriptionValidator,
+    nameValidator
+} from "components/Exercises/forms/yupValidators";
+import { Language } from "components/Exercises/models/language";
+import { Translation } from "components/Exercises/models/translation";
+import {
+    useAddTranslationQuery,
+    useEditTranslationQuery,
+    useExerciseQuery,
+    useMusclesQuery
+} from "components/Exercises/queries";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import { usePermissionQuery } from "components/User/queries/permission";
+import { useProfileQuery } from "components/User/queries/profile";
+import { Form, Formik } from "formik";
+import { WgerPermissions } from "permissions";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { deleteAlias, postAlias } from "services";
+import * as yup from "yup";
+
+export interface ViewProps {
+    exerciseId: number;
+    language: Language;
+}
+
+export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
+    const [t] = useTranslation();
+
+    const [alertIsVisible, setAlertIsVisible] = useState(false);
+    const [mainMuscles, setMainMuscles] = useState<number[]>([]);
+    const [secondaryMuscles, setSecondaryMuscles] = useState<number[]>([]);
+
+    const exerciseQuery = useExerciseQuery(exerciseId);
+    const addTranslationQuery = useAddTranslationQuery(exerciseId);
+    const editTranslationQuery = useEditTranslationQuery(exerciseId);
+    const addImagePermissionQuery = usePermissionQuery(WgerPermissions.ADD_IMAGE);
+    const deleteImagePermissionQuery = usePermissionQuery(WgerPermissions.DELETE_IMAGE);
+    const addVideoPermissionQuery = usePermissionQuery(WgerPermissions.ADD_VIDEO);
+    const deleteVideoPermissionQuery = usePermissionQuery(WgerPermissions.DELETE_VIDEO);
+    const editExercisePermissionQuery = usePermissionQuery(WgerPermissions.EDIT_EXERCISE);
+    const musclesQuery = useMusclesQuery();
+    const profileQuery = useProfileQuery();
+
+    const exercise = exerciseQuery.data!;
+
+    useEffect(() => {
+        if (exerciseQuery.data !== undefined) {
+            setMainMuscles(exercise.muscles.map((m) => m.id));
+            setSecondaryMuscles(exercise.musclesSecondary.map((m) => m.id));
+        }
+    }, [exerciseQuery.data]);
+
+
+    if (exerciseQuery.isLoading || musclesQuery.isLoading || exerciseQuery.isLoading || profileQuery.isLoading || addImagePermissionQuery.isLoading || deleteImagePermissionQuery.isLoading || addVideoPermissionQuery.isLoading || deleteVideoPermissionQuery.isLoading || editExercisePermissionQuery.isLoading) {
+        return <LoadingWidget />;
+    }
+
+    const translationFromBase = exercise.getTranslation(language);
+    const isNewTranslation = language.id !== translationFromBase?.language;
+    const exerciseTranslation =
+        isNewTranslation
+            ? new Translation(null, null, '', '', language.id)
+            : translationFromBase;
+    const exerciseEnglish = exercise.getTranslation();
+
+    const validationSchema = yup.object({
+        name: nameValidator(),
+        alternativeNames: alternativeNameValidator(),
+        description: descriptionValidator()
+    });
+
+    return <>
+        <Formik
+            initialValues={{
+                name: exerciseTranslation.name,
+                alternativeNames: exerciseTranslation.aliases.map(a => a.alias),
+                description: exerciseTranslation.description,
+            }}
+            enableReinitialize
+            validationSchema={validationSchema}
+            onSubmit={async values => {
+
+                // Exercise translation
+                const translation = exerciseTranslation.id
+                    ? await editTranslationQuery.mutateAsync({
+                        id: exerciseTranslation.id,
+                        exerciseId: exercise.id!,
+                        languageId: language.id,
+                        name: values.name,
+                        description: values.description,
+                        author: ''
+                    })
+                    : await addTranslationQuery.mutateAsync({
+                        exerciseId: exercise.id!,
+                        languageId: language.id,
+                        name: values.name,
+                        description: values.description,
+                        author: profileQuery.data!.username
+                    });
+
+                // Edit aliases (this is currently really hacky)
+                // Since we only get the string from the form, we need to compare them to the list of
+                // current aliases and decide which stay the same and which will be updated (which we
+                // can't directly do, so the old one gets deleted and a new one created)
+
+                // https://stackoverflow.com/questions/1187518/
+                const aliasOrig = exerciseTranslation.aliases.map(a => a.alias);
+                const aliasNew = values.alternativeNames;
+                const aliasToCreate = aliasNew.filter(x => !aliasOrig.includes(x));
+                const aliasToDelete = aliasOrig.filter(x => !aliasNew.includes(x));
+
+                aliasToCreate.forEach(alias => {
+                    postAlias(translation.id!, alias);
+                });
+
+                aliasToDelete.forEach(alias => {
+                    deleteAlias(exerciseTranslation.aliases.find(a => a.alias === alias)!.id);
+                });
+
+                // Notify the user
+                setAlertIsVisible(true);
+            }}
+        >
+            <Form>
+                <Grid container spacing={1}>
+                    {alertIsVisible &&
+                        <Grid size={12}>
+                            <Alert
+                                severity="success"
+                                action={
+                                    <IconButton
+                                        aria-label="close"
+                                        size="small"
+                                        color="inherit"
+                                        onClick={() => {
+                                            setAlertIsVisible(false);
+                                        }}
+                                    >
+                                        <CloseIcon fontSize="inherit" />
+                                    </IconButton>
+                                }
+                            >
+                                {t('exercises.successfullyUpdated')}
+                            </Alert>
+                            <PaddingBox />
+                        </Grid>}
+
+                    <Grid size={6}>
+                        <Typography variant={'h5'}>{t('English')}</Typography>
+                    </Grid>
+                    <Grid size={6}>
+                        <Typography variant={'h5'}>
+                            {language.nameLong} ({language.nameShort})
+                        </Typography>
+                    </Grid>
+                    <Grid size={12}>
+                        <PaddingBox />
+                        <Typography variant={'h6'}>{t('name')}</Typography>
+                    </Grid>
+                    <Grid size={6}>
+                        {exerciseEnglish.name}
+                        <ul>
+                            {exerciseEnglish.aliases.map((alias) => (
+                                <li key={alias.id}>{alias.alias}</li>
+                            ))}
+                        </ul>
+                    </Grid>
+                    <Grid size={6}>
+                        <Box mb={2}>
+                            <ExerciseName fieldName={'name'} />
+                        </Box>
+                        <ExerciseAliases fieldName={'alternativeNames'} />
+                    </Grid>
+                    <Grid size={12}>
+                        <PaddingBox />
+                    </Grid>
+
+
+                    <Grid size={12}>
+                        <Typography variant={'h6'}>{t('exercises.description')}</Typography>
+                    </Grid>
+                    <Grid size={{ xs: 12, md: 6 }}>
+                        <div dangerouslySetInnerHTML={{ __html: exerciseEnglish.description! }} />
+                    </Grid>
+                    <Grid size={{ xs: 12, md: 6 }}>
+                        <ExerciseDescription fieldName={"description"} />
+                    </Grid>
+
+                    {editExercisePermissionQuery.data && <>
+                        <Grid size={12}>
+                            <PaddingBox />
+                        </Grid>
+                        <Grid size={{ xs: 12, md: 6 }}>
+                            <EditExerciseCategory exerciseId={exercise.id!} initial={exercise.category.id} />
+                        </Grid>
+                        <Grid size={{ xs: 12, md: 6 }}>
+                            <EditExerciseEquipment exerciseId={exercise.id!}
+                                                   initial={exercise.equipment.map(e => e.id)} />
+                        </Grid>
+                    </>}
+
+                    {/*
+                <Grid item xs={12}>
+                    <PaddingBox />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Typography variant={'h6'}>{t('exercises.notes')}</Typography>
+                </Grid>
+                <Grid item sm={6}>
+                    <ul>
+                        {exerciseEnglish.notes.map((note: Note) => (
+                            <li key={note.id}>{note.note}</li>
+                        ))}
+                    </ul>
+                </Grid>
+                <Grid item sm={6}>
+                    <ul>
+                        {exerciseTranslation.notes.map((note: Note) => (
+                            <li key={note.id}>{note.note}</li>
+                        ))}
+                    </ul>
+                </Grid>
+                */}
+
+                    <Grid size={12}>
+                        <PaddingBox />
+                        <Button
+                            variant="contained"
+                            type="submit"
+                            sx={{ mt: 1, mr: 1 }}
+                            disabled={exerciseQuery.isLoading || addTranslationQuery.isPending || editTranslationQuery.isPending}
+                        >
+                            {t('save')}
+                        </Button>
+                    </Grid>
+                </Grid>
+            </Form>
+        </Formik>
+
+        {/* Images */}
+        <PaddingBox />
+        <Typography variant={'h6'}>{t('images')}</Typography>
+        <Grid container spacing={2} mt={2}>
+            {addImagePermissionQuery.data && <Grid key={'add'} size={{ md: 3 }}>
+                <AddImageCard exerciseId={exercise.id!} />
+            </Grid>}
+
+            {exercise.images.map(img => (
+                <Grid key={img.id} size={{ md: 3 }}>
+                    <ImageEditCard
+                        exerciseId={exercise.id!}
+                        image={img}
+                        canDelete={deleteImagePermissionQuery.data!}
+                    />
+                </Grid>
+            ))}
+        </Grid>
+
+        {/* Videos */}
+        <PaddingBox />
+        <Typography variant={'h6'}>{t('videos')}</Typography>
+        <Grid container spacing={2} mt={2}>
+            {addVideoPermissionQuery.data
+                && <Grid key={'add'} size={{ md: 3 }}>
+                    <AddVideoCard exerciseId={exercise.id!} />
+                </Grid>
+            }
+
+            {exercise.videos.map(video => (
+                <Grid key={video.id} size={{ md: 3 }}>
+                    <VideoEditCard exerciseId={exercise.id!} video={video} canDelete={deleteVideoPermissionQuery.data!} />
+                </Grid>
+            ))}
+        </Grid>
+
+        {/* Base data */}
+        {editExercisePermissionQuery.data
+            && <>
+                <PaddingBox />
+                <Typography variant={'h6'}>{t('exercises.muscles')}</Typography>
+                <Grid container spacing={1} mt={2}>
+
+                    <Grid size={{ xs: 12, md: 6 }}>
+                        <EditExerciseMuscle
+                            exerciseId={exercise.id!}
+                            value={mainMuscles}
+                            setValue={setMainMuscles}
+                            blocked={secondaryMuscles}
+                            isMain
+                        />
+                    </Grid>
+                    <Grid size={{ xs: 12, md: 6 }}>
+                        <EditExerciseMuscle
+                            exerciseId={exercise.id!}
+                            value={secondaryMuscles}
+                            setValue={setSecondaryMuscles}
+                            blocked={mainMuscles}
+                            isMain={false}
+                        />
+                    </Grid>
+                    <Grid size={{ sm: 6 }} offset={{ md: 3 }}>
+                        <Grid container>
+                            <Grid display="flex" justifyContent={"center"} size={6}>
+                                <MuscleOverview
+                                    primaryMuscles={mainMuscles.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={mainMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                    secondaryMuscles={secondaryMuscles.map(m => musclesQuery.data!.find(mq => mq.id === m)!)}
+                                    isFront={false}
+                                />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </>
+        }
+    </>;
+};

package/src/components/Exercises/Detail/ExerciseDetailView.test.tsx

@@ -0,0 +1,96 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { ExerciseDetailView } from "components/Exercises/Detail/ExerciseDetailView";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import { usePermissionQuery } from "components/User/queries/permission";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from 'react';
+import { testExerciseCrunches, testLanguageEnglish, testLanguageFrench } from "tests/exerciseTestdata";
+import { testProfileDataNotVerified, testProfileDataVerified } from "tests/userTestdata";
+
+jest.mock("components/User/queries/profile");
+jest.mock("components/User/queries/permission");
+
+const queryClient = new QueryClient();
+
+describe("Contribute banner tests", () => {
+
+    const renderComponent = (exercise: Exercise, language: Language) => render(
+        <QueryClientProvider client={queryClient}>
+            <ExerciseDetailView
+                exercise={exercise}
+                language={language}
+                setEditMode={jest.fn}
+                variations={[]}
+            />
+        </QueryClientProvider>
+    );
+
+    beforeEach(() => {
+
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfileDataNotVerified
+        }));
+        (usePermissionQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: false
+        }));
+
+    });
+
+
+    test('Should show no banner for a language that is already translated', async () => {
+
+        // Act
+        await renderComponent(testExerciseCrunches, testLanguageEnglish);
+
+        // Assert
+        expect(usePermissionQuery).toHaveBeenCalled();
+        expect(useProfileQuery).toHaveBeenCalled();
+        expect(screen.queryByText("exercises.exerciseNotTranslated")).not.toBeInTheDocument();
+    });
+
+    test('Should show no banner to anonymous users', async () => {
+        // Arrange
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: null
+        }));
+
+        // Act
+        renderComponent(testExerciseCrunches, testLanguageEnglish);
+
+        // Assert
+        expect(screen.queryByText("exercises.exerciseNotTranslated")).not.toBeInTheDocument();
+    });
+
+    test('Should show the banner to admins', async () => {
+        // Arrange
+        (usePermissionQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: true
+        }));
+
+        // Act
+        renderComponent(testExerciseCrunches, testLanguageFrench);
+
+        // Assert
+        expect(screen.getByText("exercises.exerciseNotTranslated")).toBeInTheDocument();
+    });
+
+    test('Should show the banner to verified users', () => {
+        // Arrange
+        (useProfileQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            data: testProfileDataVerified
+        }));
+
+        // Act
+        renderComponent(testExerciseCrunches, testLanguageFrench);
+
+        // Assert
+        expect(screen.getByText("exercises.exerciseNotTranslated")).toBeInTheDocument();
+    });
+});

package/src/components/Exercises/Detail/ExerciseDetailView.tsx

@@ -0,0 +1,242 @@
+import { Box, Button, Divider, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid';
+import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
+import { OverviewCard } from "components/Exercises/Detail/OverviewCard";
+import { SideGallery, SideVideoGallery } from "components/Exercises/Detail/SideGallery";
+import { Exercise } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import { Muscle } from "components/Exercises/models/muscle";
+import { Note } from "components/Exercises/models/note";
+import { MuscleOverview } from "components/Muscles/MuscleOverview";
+import { useCanContributeExercises } from "components/User/queries/contribute";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+
+const TranslateExerciseBanner = ({ setEditMode }: { setEditMode: (mode: boolean) => void }) => {
+    const [t] = useTranslation();
+
+    return (
+        <Box
+            mb={2}
+            paddingY={2}
+            sx={{
+                width: "100%",
+                backgroundColor: "#ebebeb",
+                textAlign: "center",
+            }}
+        >
+            <Typography variant={"h5"}>
+                {t("exercises.exerciseNotTranslated")}
+            </Typography>
+
+            <Typography gutterBottom variant="body1" component="div">
+                {t("exercises.exerciseNotTranslatedBody")}
+            </Typography>
+
+            <Button variant="contained" onClick={() => setEditMode(true)}>
+                {t("exercises.translateExerciseNow")}
+            </Button>
+
+        </Box>
+    );
+};
+
+export interface ViewProps {
+    exercise: Exercise
+    variations: Exercise[],
+    language: Language,
+    setEditMode: (mode: boolean) => void
+}
+
+export const ExerciseDetailView = ({
+                                       exercise,
+                                       variations,
+                                       language,
+                                       setEditMode
+                                   }: ViewProps) => {
+    const [t] = useTranslation();
+    const contributeQuery = useCanContributeExercises();
+    const currentTranslation = exercise.getTranslation(language);
+    const isNewTranslation = language && language.id !== currentTranslation.language;
+
+    return (
+        <Grid container>
+            {isNewTranslation
+                && contributeQuery.canContribute
+                && <Grid
+                    order={{ xs: 2, sm: 1 }}
+                    size={{
+                        xs: 12,
+                        sm: 7,
+                        md: 12
+                    }}>
+                    <TranslateExerciseBanner setEditMode={setEditMode} />
+                </Grid>
+            }
+            <Grid
+                order={{ xs: 2, sm: 1 }}
+                size={{
+                    xs: 12,
+                    sm: 7,
+                    md: 8
+                }}>
+
+                {currentTranslation?.aliases.length > 0
+                    && <>
+                        <p>
+                            {t("exercises.alsoKnownAs")} &nbsp;
+                            {currentTranslation?.aliases?.map(e => e.alias).join(", ")}
+                        </p>
+                        <PaddingBox />
+                    </>}
+
+                <Typography variant="h5">{t("exercises.description")}</Typography>
+                <div
+                    dangerouslySetInnerHTML={{ __html: currentTranslation?.description! }} />
+                <PaddingBox />
+
+                {currentTranslation?.notes.length > 0 && <Typography variant="h5">{t("exercises.notes")}</Typography>}
+                <ul>
+                    {currentTranslation?.notes.map((note: Note) => (
+                        <li key={note.id}>{note.note}</li>
+                    ))}
+                </ul>
+                <PaddingBox />
+
+                <Typography variant="h5">{t("exercises.muscles")}</Typography>
+                <Grid container>
+                    <Grid
+                        order={{ xs: 1 }}
+                        size={{
+                            xs: 6,
+                            md: 3
+                        }}>
+                        <MuscleOverview
+                            primaryMuscles={exercise.muscles}
+                            secondaryMuscles={exercise.musclesSecondary}
+                            isFront={true}
+                        />
+                    </Grid>
+                    <Grid
+                        order={{ xs: 2, md: 3 }}
+                        size={{
+                            xs: 6,
+                            md: 3
+                        }}>
+                        <h3>{t("exercises.primaryMuscles")}</h3>
+                        <ul>
+                            {exercise.muscles.map((m: Muscle) => (
+                                <li key={m.id}>{m.getName()}</li>
+                            ))}
+                        </ul>
+                    </Grid>
+
+                    <Grid
+                        order={{ xs: 3, md: 2 }}
+                        size={{
+                            xs: 6,
+                            md: 3
+                        }}>
+                        <MuscleOverview
+                            primaryMuscles={exercise.muscles}
+                            secondaryMuscles={exercise.musclesSecondary}
+                            isFront={false}
+                        />
+                    </Grid>
+
+
+                    <Grid
+                        order={{ xs: 4 }}
+                        size={{
+                            xs: 6,
+                            md: 3
+                        }}>
+                        <h3>{t("exercises.secondaryMuscles")}</h3>
+                        <ul>
+                            {exercise.musclesSecondary.map((m: Muscle) => (
+                                <li key={m.id}>{m.getName()}</li>
+                            ))}
+                        </ul>
+                    </Grid>
+
+                </Grid>
+                <PaddingBox />
+            </Grid>
+            <Grid
+                order={{ xs: 1, sm: 2 }}
+                size={{
+                    xs: 12,
+                    sm: 5,
+                    md: 4
+                }}>
+                { /*
+                            <Carousel>
+                                <CarouselItem>
+                                    <img
+                                        style={{width: "100%"}}
+                                        src="https://images.unsplash.com/photo-1434682881908-b43d0467b798?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
+                                        alt="detail"
+                                    />
+                                </CarouselItem>
+                                <CarouselItem>
+                                    <img
+                                        style={{width: "100%"}}
+                                        src="https://images.unsplash.com/photo-1434682881908-b43d0467b798?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
+                                        alt="detail"
+                                    />
+                                </CarouselItem>
+                                <CarouselItem>
+                                    <img
+                                        style={{width: "100%"}}
+                                        src="https://images.unsplash.com/photo-1434682881908-b43d0467b798?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
+                                        alt="detail"
+                                    />
+                                </CarouselItem>
+                            </Carousel>
+                            */}
+
+                {/* This gallery only displays on medium screens upwards */}
+                <SideGallery
+                    mainImage={exercise.mainImage}
+                    sideImages={exercise.sideImages}
+                />
+
+                <PaddingBox />
+                <SideVideoGallery videos={exercise.videos} />
+            </Grid>
+
+
+            <Grid order={{ xs: 3 }} size={12}>
+
+                <Divider />
+                <PaddingBox />
+
+                {variations.length > 0 && <Typography variant={"h5"}>{t('exercises.variations')}</Typography>}
+                <Grid container spacing={2}>
+                    {variations.map((variation: Exercise) =>
+                        <Grid
+                            key={variation.id}
+                            size={{
+                                xs: 6,
+                                md: 2
+                            }}>
+                            <OverviewCard
+                                key={variation.id}
+                                exercise={variation}
+                                language={language}
+                            />
+                        </Grid>
+                    )}
+                </Grid>
+            </Grid>
+            <Grid order={{ xs: 4 }} size={12}>
+                <Typography variant="caption" display="block" mt={2}>
+                    The text on this page is available under the <a
+                    href="https://creativecommons.org/licenses/by-sa/4.0/deed">CC BY-SA 4
+                    License</a>.
+                </Typography>
+            </Grid>
+        </Grid>
+    );
+};