@wger-project/react-components 25.10.16

package/src/components/Exercises/forms/Muscle.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EditExerciseMuscle } from "components/Exercises/forms/Muscle";
+import { useMusclesQuery } from "components/Exercises/queries";
+import React from "react";
+import { editExercise } from "services";
+import { testMuscles } from "tests/exerciseTestdata";
+
+jest.mock("components/Exercises/queries");
+jest.mock("services/exercise");
+
+describe("Test the widget to live edit the muscles", () => {
+
+    beforeEach(() => {
+        // @ts-ignore
+        useMusclesQuery.mockImplementation(() => ({ isSuccess: true, data: testMuscles }));
+
+        // @ts-ignore
+        editExercise.mockImplementation(() => (200));
+    });
+
+    test('Clicking on a muscle immediately fires the request', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <EditExerciseMuscle
+                exerciseId={100}
+                value={[1, 2]}
+                setValue={jest.fn()}
+                blocked={[]}
+                isMain
+            />
+        );
+
+        // Assert
+        expect(await screen.findByText(/biggus/i)).toBeInTheDocument();
+        expect(await screen.findByText(/dacttilaris/i)).toBeInTheDocument();
+
+        await user.click(screen.getByRole('combobox', { name: /exercises\.muscles/i }));
+        const shoulders = await screen.findByText(/shoulders/i);
+        await user.click(shoulders);
+        expect(editExercise).toHaveBeenCalledWith(100, { "muscles": [1, 2, 3] });
+    });
+
+    test('Correctly sets secondary muscles', async () => {
+
+        // Arrange
+        const user = userEvent.setup();
+
+        // Act
+        render(
+            <EditExerciseMuscle
+                exerciseId={1234}
+                value={[1, 2]}
+                setValue={jest.fn()}
+                blocked={[]}
+                isMain={false}
+            />
+        );
+
+        // Assert
+        expect(await screen.findByText(/biggus/i)).toBeInTheDocument();
+        expect(await screen.findByText(/dacttilaris/i)).toBeInTheDocument();
+
+        await user.click(screen.getByRole('combobox', { name: /exercises\.secondarymuscles/i }));
+        const shoulders = await screen.findByText(/shoulders/i);
+        await user.click(shoulders);
+        // eslint-disable-next-line camelcase
+        expect(editExercise).toHaveBeenCalledWith(1234, { muscles_secondary: [1, 2, 3] });
+    });
+});

package/src/components/Exercises/forms/Muscle.tsx

@@ -0,0 +1,41 @@
+import { Autocomplete, TextField } from "@mui/material";
+import { useMusclesQuery } from "components/Exercises/queries";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { editExercise } from "services";
+
+export function EditExerciseMuscle(props: {
+    exerciseId: number,
+    value: number[],
+    setValue: React.Dispatch<React.SetStateAction<number[]>>,
+    blocked: number[],
+    isMain: boolean
+}) {
+    const { t } = useTranslation();
+    const musclesQuery = useMusclesQuery();
+
+    const handleOnChange = async (newValue: number[]) => {
+        props.setValue(newValue);
+        // eslint-disable-next-line camelcase
+        await editExercise(props.exerciseId, props.isMain ? { muscles: newValue } : { muscles_secondary: newValue });
+    };
+
+    return musclesQuery.isSuccess
+        ? <Autocomplete
+            multiple
+            options={musclesQuery.data!.map(m => m.id)}
+            getOptionDisabled={(option) => props.blocked.includes(option)}
+            getOptionLabel={option => musclesQuery.data!.find(m => m.id === option)!.getName()}
+            value={props.value}
+            onChange={(event, newValue) => handleOnChange(newValue)}
+            renderInput={params => (
+                <TextField
+                    {...params}
+                    variant="standard"
+                    label={t(props.isMain ? "exercises.muscles" : "exercises.secondaryMuscles")}
+                    value={props.value}
+                />
+            )}
+        />
+        : null;
+}

package/src/components/Exercises/forms/VideoCard.tsx

@@ -0,0 +1,109 @@
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { Box, Button, Card, CardActions, CardMedia } from "@mui/material";
+import { ExerciseVideo } from "components/Exercises/models/video";
+import { FormQueryErrorsSnackbar } from "components/Core/Widgets/FormError";
+import { useProfileQuery } from "components/User/queries/profile";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAddExerciseVideoQuery, useDeleteExerciseVideoQuery } from "../queries";
+
+type VideoCardProps = {
+    exerciseId: number;
+    video: ExerciseVideo;
+    canDelete: boolean;
+};
+
+/**
+ * A card component to edit (delete) an existing exercise video
+ * Will render MUI's isLoading in the button state while any actions are in progress
+ * @param {number} exerciseId - Exercise ID to which the uploaded video will be added to
+ * @param {ExerciseVideo} video - The ExerciseVideo object to display
+ * @param {boolean} canDelete - Whether the delete button should be shown
+ * @returns {JSX.Element} The rendered AddVideoCard component
+ */
+export const VideoEditCard = ({ exerciseId, video, canDelete }: VideoCardProps) => {
+    const [t] = useTranslation();
+    const deleteExerciseVideoQuery = useDeleteExerciseVideoQuery(exerciseId);
+
+    const onDeleteClick = () => {
+        deleteExerciseVideoQuery.mutate(video.id);
+    };
+
+    return (
+        <>
+            <Card>
+                <CardMedia component={"video"} src={video.url} sx={{ height: 120 }} controls preload="metadata" />
+                <CardActions>
+                    {canDelete && (
+                        <Button loading={deleteExerciseVideoQuery.isPending} color="primary" onClick={onDeleteClick}>
+                            {t("delete")}
+                        </Button>
+                    )}
+                </CardActions>
+            </Card>
+            {deleteExerciseVideoQuery.isError && <FormQueryErrorsSnackbar mutationQuery={deleteExerciseVideoQuery} />}
+        </>
+    );
+};
+
+type AddVideoCardProps = {
+    exerciseId: number;
+};
+
+/**
+ * A card component to add a new exercise video
+ * Uses the query to handle uploading the video file
+ * Will render MUI's isLoading in the button state while the upload is in progress
+ * @param {number} exerciseId - Exercise ID to which the uploaded video will be added to
+ * @returns {JSX.Element} The rendered AddVideoCard component
+ */
+export const AddVideoCard = ({ exerciseId }: AddVideoCardProps) => {
+    const [t] = useTranslation();
+    const profileQuery = useProfileQuery();
+    const addVideoQuery = useAddExerciseVideoQuery(exerciseId);
+
+    const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files?.length) {
+            return;
+        }
+        const [uploadedFile] = e.target.files;
+        if (profileQuery.isSuccess) {
+            addVideoQuery.mutate({
+                exerciseId: exerciseId,
+                video: uploadedFile,
+                author: profileQuery.data!.username,
+            });
+        }
+    };
+
+    return (
+        <>
+            <Card>
+                <CardMedia>
+                    <Box
+                        sx={{ backgroundColor: "lightgray", height: 120 }}
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                    >
+                        <AddCircleIcon sx={{ fontSize: 80, color: "gray" }} />
+                    </Box>
+                </CardMedia>
+                <CardActions>
+                    <Button component="label" loading={addVideoQuery.isPending}>
+                        {t("add")}
+                        <input
+                            style={{ display: "none" }}
+                            id="camera-input"
+                            type="file"
+                            accept="video/*"
+                            capture="environment"
+                            onChange={handleFileInputChange}
+                        />
+                    </Button>
+                </CardActions>
+            </Card>
+            {addVideoQuery.isError && <FormQueryErrorsSnackbar mutationQuery={addVideoQuery} />}
+        </>
+    );
+};

package/src/components/Exercises/forms/yupValidators.ts

@@ -0,0 +1,46 @@
+import i18n from 'i18next';
+import * as yup from "yup";
+
+const MIN_CHAR_NAME = 5;
+const MAX_CHAR_NAME = 40;
+
+const MIN_DESC_LENGTH = 40;
+
+const MIN_NOTE_LENGTH = 15;
+
+
+export const nameValidator = () => yup
+    .string()
+    .min(MIN_CHAR_NAME, i18n.t("forms.minLength", { 'chars': MIN_CHAR_NAME }))
+    .max(MAX_CHAR_NAME, i18n.t("forms.maxLength", { 'chars': MAX_CHAR_NAME }))
+    .required(i18n.t("forms.fieldRequired"));
+
+export const alternativeNameValidator = () => yup
+    .array()
+    .ensure()
+    .compact()
+    .of(
+        yup
+            .string()
+            .min(MIN_CHAR_NAME, i18n.t("forms.minLength", { 'chars': MIN_CHAR_NAME }))
+            .max(MAX_CHAR_NAME, i18n.t("forms.maxLength", { 'chars': MAX_CHAR_NAME }))
+    );
+
+export const descriptionValidator = () => yup
+    .string()
+    .min(MIN_DESC_LENGTH, i18n.t("forms.minLength", { 'chars': MIN_DESC_LENGTH }))
+    .required(i18n.t("forms.fieldRequired"));
+
+export const noteValidator = () => yup
+    .array()
+    .ensure()
+    .compact()
+    .of(
+        yup
+            .string()
+            .min(MIN_NOTE_LENGTH, i18n.t("forms.minLength", { 'chars': MIN_NOTE_LENGTH }))
+    );
+
+export const categoryValidator = () => yup
+    .number()
+    .required(i18n.t("forms.fieldRequired"));

package/src/components/Exercises/models/alias.ts

@@ -0,0 +1,29 @@
+import { ApiAliasType } from "types";
+import { Adapter } from "utils/Adapter";
+
+export class Alias {
+    constructor(
+        public id: number,
+        public uuid: string,
+        public alias: string,
+    ) {
+    }
+
+}
+
+export class AliasAdapter implements Adapter<Alias> {
+    fromJson(item: ApiAliasType): Alias {
+        return new Alias(
+            item.id,
+            item.uuid,
+            item.alias,
+        );
+    }
+
+    toJson(item: Alias) {
+        return {
+            id: item.id,
+            name: item.alias,
+        };
+    }
+}

package/src/components/Exercises/models/category.ts

@@ -0,0 +1,35 @@
+import i18n from "i18n";
+import { Adapter } from "utils/Adapter";
+import { getTranslationKey } from "utils/strings";
+
+
+export class Category {
+
+    constructor(
+        public id: number,
+        public name: string
+    ) {
+    }
+
+    public get translatedName(): string {
+        return i18n.t(getTranslationKey(this.name), { defaultValue: this.name });
+    }
+}
+
+
+export class CategoryAdapter implements Adapter<Category> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Category {
+        return new Category(
+            item.id,
+            item.name
+        );
+    }
+
+    toJson(item: Category) {
+        return {
+            id: item.id,
+            name: item.name,
+        };
+    }
+}

package/src/components/Exercises/models/equipment.ts

@@ -0,0 +1,33 @@
+import i18n from "i18n";
+import { Adapter } from "utils/Adapter";
+import { getTranslationKey } from "utils/strings";
+
+export class Equipment {
+
+    constructor(
+        public id: number,
+        public name: string
+    ) {
+    }
+
+    public get translatedName(): string {
+        return i18n.t(getTranslationKey(this.name), { defaultValue: this.name });
+    }
+}
+
+export class EquipmentAdapter implements Adapter<Equipment> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Equipment {
+        return new Equipment(
+            item.id,
+            item.name,
+        );
+    }
+
+    toJson(item: Equipment) {
+        return {
+            id: item.id,
+            name: item.name,
+        };
+    }
+}

package/src/components/Exercises/models/exercise.test.ts

@@ -0,0 +1,74 @@
+import { ExerciseAdapter } from "components/Exercises/models/exercise";
+import { Language } from "components/Exercises/models/language";
+import {
+    testExerciseBenchPress,
+    testExerciseSquats,
+    testLanguageEnglish,
+    testLanguageGerman
+} from "tests/exerciseTestdata";
+import { responseApiExerciseInfo, testApiExercise1 } from "tests/responseApi";
+
+
+describe("Exercise base model tests", () => {
+
+    test('translation helper - default language', () => {
+
+        // Assert
+        expect(testExerciseSquats.getTranslation().name).toBe("Squats");
+    });
+
+    test('translation helper - explicit language - English', () => {
+
+        // Assert
+        expect(testExerciseSquats.getTranslation(testLanguageEnglish).name).toBe("Squats");
+    });
+
+    test('translation helper - explicit language - German', () => {
+
+        // Assert
+        expect(testExerciseSquats.getTranslation(testLanguageGerman).name).toBe("Kniebeuge");
+    });
+
+    test('translation helper - unknown language', () => {
+
+        // Arrange
+        const unknownLanguage = new Language(4, "kg", "Klingon");
+
+        // Assert
+        expect(testExerciseSquats.getTranslation(unknownLanguage).name).toBe("Squats");
+    });
+
+    test('adapter - from json', () => {
+
+        // Act
+        const adapter = new ExerciseAdapter();
+        const result = adapter.fromJson(responseApiExerciseInfo.results[0]);
+
+        // Assert
+        expect(result).toEqual(testApiExercise1);
+    });
+
+    test('adapter - to json', () => {
+
+        // Assert
+        const adapter = new ExerciseAdapter();
+        expect(adapter.toJson(testExerciseSquats)).toStrictEqual({
+            id: 345,
+            uuid: "c788d643-150a-4ac7-97ef-84643c6419bf",
+            category: 2,
+            equipment: [1, 42],
+            muscles: [1, 4],
+            // eslint-disable-next-line camelcase
+            muscles_secondary: [],
+            images: [],
+        });
+    });
+
+    test('availableLanguages', () => {
+
+        // Assert
+        expect(testExerciseSquats.availableLanguages).toEqual([2, 1]);
+        expect(testExerciseBenchPress.availableLanguages).toEqual([2]);
+    });
+});
+

package/src/components/Exercises/models/exercise.ts

@@ -0,0 +1,159 @@
+import { Category, CategoryAdapter, } from "components/Exercises/models/category";
+import { Equipment, EquipmentAdapter, } from "components/Exercises/models/equipment";
+import { ExerciseImage, ExerciseImageAdapter, } from "components/Exercises/models/image";
+import { Language } from "components/Exercises/models/language";
+import { Muscle, MuscleAdapter } from "components/Exercises/models/muscle";
+import { Translation, TranslationAdapter } from "components/Exercises/models/translation";
+import { ExerciseVideo, ExerciseVideoAdapter } from "components/Exercises/models/video";
+import { Adapter } from "utils/Adapter";
+import { ENGLISH_LANGUAGE_ID } from "utils/consts";
+
+export class Exercise {
+    translations: Translation[] = [];
+    videos: ExerciseVideo[] = [];
+    authors: string[] = [];
+
+    constructor(
+        public id: number | null,
+        public uuid: string | null,
+        public category: Category,
+        public equipment: Equipment[],
+        public muscles: Muscle[],
+        public musclesSecondary: Muscle[],
+        public images: ExerciseImage[],
+        public variationId: number | null,
+        translations?: Translation[],
+        videos?: ExerciseVideo[],
+        authors?: string[]
+        /*
+            license: number,
+            licenseAuthorS: string[],
+         */
+    ) {
+        if (translations) {
+            this.translations = translations;
+        }
+
+        if (videos) {
+            this.videos = videos;
+        }
+
+        if (authors) {
+            this.authors = authors;
+        }
+    }
+
+    // Returns the users translation or english as a fallback
+    //
+    // Note that we still check for the case that no english translation can be
+    // found. While this can't happen for the "regular" wger server, other local
+    // instances might have deleted the english translation or added new exercises
+
+    /**
+     * Returns a list with the available languages for this exercise
+     */
+    get availableLanguages(): number[] {
+        return this.translations.map(t => t.language);
+    }
+
+    get mainImage(): ExerciseImage | undefined {
+        return this.images.find(i => i.isMain);
+    }
+
+    get sideImages(): ExerciseImage[] {
+        return this.images.filter(i => !i.isMain);
+    }
+
+    // without an English translation.
+    getTranslation(userLanguage?: Language): Translation {
+        const languageId = userLanguage != null ? userLanguage.id : ENGLISH_LANGUAGE_ID;
+
+        let translation = this.translations.find(t => t.language === languageId);
+        if (!translation) {
+            translation = this.translations.find(t => t.language === ENGLISH_LANGUAGE_ID);
+        }
+
+        if (!translation) {
+            //console.warn(`No translation found for exercise base ${this.uuid} (${this.id}) for language ${language}`);
+            return this.translations[0];
+        }
+        return translation!;
+    }
+
+}
+
+
+export class ExerciseAdapter implements Adapter<Exercise> {
+    /*
+     * needs the items from exerciseinfo
+     */
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Exercise {
+        const categoryAdapter = new CategoryAdapter();
+        const equipmentAdapter = new EquipmentAdapter();
+        const muscleAdapter = new MuscleAdapter();
+        const imageAdapter = new ExerciseImageAdapter();
+        const translationAdapter = new TranslationAdapter();
+        const videoAdapter = new ExerciseVideoAdapter();
+
+        const exercise = new Exercise(
+            item.id,
+            item.uuid,
+            categoryAdapter.fromJson(item.category),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.equipment.map((e: any) => (equipmentAdapter.fromJson(e))),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.muscles.map((m: any) => (muscleAdapter.fromJson(m))),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.muscles_secondary.map((m: any) => (muscleAdapter.fromJson(m))),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.images.map((i: any) => (imageAdapter.fromJson(i))),
+            item.variations,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.translations.map((t: any) => translationAdapter.fromJson(t)),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.videos.map((t: any) => videoAdapter.fromJson(t)),
+            item.author_history
+        );
+
+        if (!exercise.translations.some(t => t.language === ENGLISH_LANGUAGE_ID)) {
+            console.info(`No english translation found for exercise base ${exercise.uuid}!`);
+        }
+
+        if (exercise.translations.length === 0) {
+            throw new Error(`No translations found for exercise base ${exercise.uuid}!`);
+        }
+
+        return exercise;
+    }
+
+    /**
+     * Don't return all properties, since not all items can be updated (they would
+     * be ignored by the server, but it's better to not send too much anyway)
+     */
+    toJson(item: Exercise) {
+        return {
+            id: item.id,
+            uuid: item.uuid,
+            category: item.category.id,
+            equipment: item.equipment.map(e => e.id),
+            muscles: item.muscles.map(m => m.id),
+            // eslint-disable-next-line camelcase
+            muscles_secondary: item.musclesSecondary.map(m => m.id),
+            images: item.images.map(i => new ExerciseImageAdapter().toJson(i)),
+        };
+    }
+}
+
+export type ImageFormData = {
+    url: string;
+    file: File;
+    author: string;
+    authorUrl: string;
+    title: string,
+    objectUrl: string,
+    derivativeSourceUrl: string;
+    style: string;
+};
+

package/src/components/Exercises/models/image.ts

@@ -0,0 +1,41 @@
+import { Adapter } from "utils/Adapter";
+
+export enum ImageStyle {
+    LINE_ART = 1,
+    THREE_D,
+    LOW_POLY,
+    PHOTO,
+    OTHER,
+}
+
+export class ExerciseImage {
+
+    constructor(
+        public id: number,
+        public uuid: string,
+        public url: string,
+        public isMain: boolean) {
+    }
+}
+
+export class ExerciseImageAdapter implements Adapter<ExerciseImage> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): ExerciseImage {
+        return new ExerciseImage(
+            item.id,
+            item.uuid,
+            item.image,
+            item.is_main
+        );
+    }
+
+    // TODO: when uploading an image we have to send the file
+    toJson(item: ExerciseImage) {
+        return {
+            id: item.id,
+            image: item.url,
+            // eslint-disable-next-line camelcase
+            is_front: item.isMain
+        };
+    }
+}

package/src/components/Exercises/models/language.ts

@@ -0,0 +1,23 @@
+import { Adapter } from "utils/Adapter";
+
+export class Language {
+
+    constructor(
+        public id: number,
+        public nameShort: string,
+        public nameLong: string
+    ) {
+    }
+}
+
+
+export class LanguageAdapter implements Adapter<Language> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Language {
+        return new Language(
+            item.id,
+            item.short_name,
+            item.full_name
+        );
+    }
+}

package/src/components/Exercises/models/muscle.test.ts

@@ -0,0 +1,17 @@
+import { Muscle } from "components/Exercises/models/muscle";
+
+
+describe("Muscle model tests", () => {
+
+    test('name helper', () => {
+
+        // Arrange
+        const m1 = new Muscle(2, "Anterior deltoid", "Shoulders", true);
+        const m2 = new Muscle(2, "Anterior deltoid", "", true);
+
+        // Assert
+        expect(m1.getName()).toBe("Anterior deltoid (Shoulders)");
+        expect(m2.getName()).toBe("Anterior deltoid");
+    });
+});
+