@wger-project/react-components 25.10.16

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

@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import { Adapter } from "utils/Adapter";
+import { getTranslationKey } from "utils/strings";
+
+export class Muscle {
+    constructor(
+        public id: number,
+        public name: string,
+        public nameEn: string,
+        public isFront: boolean
+    ) {
+    }
+
+    public get translatedName(): string {
+        return i18n.t(getTranslationKey(this.nameEn), { defaultValue: this.nameEn });
+    }
+
+    // Return the name and English name of the muscle, if available.
+    public getName(): string {
+        if (this.nameEn) {
+            return `${this.name} (${this.translatedName})`;
+        } else {
+            return this.name;
+        }
+    }
+
+}
+
+export class MuscleAdapter implements Adapter<Muscle> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Muscle {
+        return new Muscle(
+            item.id,
+            item.name,
+            item.name_en,
+            item.is_front
+        );
+    }
+}

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

@@ -0,0 +1,29 @@
+import { Adapter } from "utils/Adapter";
+
+export class Note {
+    constructor(
+        public id: number | null,
+        public exercise: number,
+        public note: string,
+    ) {
+    }
+}
+
+export class NoteAdapter implements Adapter<Note> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Note {
+        return new Note(
+            item.id,
+            item.exercise,
+            item.comment,
+        );
+    }
+
+    toJson(item: Note) {
+        return {
+            id: item.id,
+            comment: item.note,
+            exercise: item.exercise
+        };
+    }
+}

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

@@ -0,0 +1,68 @@
+import { Translation, TranslationAdapter } from "components/Exercises/models/translation";
+
+
+describe("Exercise translation model tests", () => {
+
+    // Arrange
+    const e1 = new Translation(
+        2,
+        "uuid",
+        "a very long name that should be truncated",
+        "description",
+        1,
+        [],
+        [],
+        ['author1', 'author2', 'author3']
+    );
+
+    test('name helper', () => {
+
+        // Assert
+        expect(e1.nameLong).toBe("a very long name that …");
+    });
+
+    test('adapter - from json', () => {
+
+        // Assert
+        const adapter = new TranslationAdapter();
+        expect(adapter.fromJson({
+            id: 2,
+            uuid: "uuid",
+            name: "a very long name that should be truncated",
+            description: "description",
+            language: 1,
+            notes: [],
+            aliases: [],
+            // eslint-disable-next-line camelcase
+            author_history: ['author1', 'author2', 'author3']
+        })).toStrictEqual(e1);
+    });
+
+    test('adapter - to json', () => {
+
+        // Assert
+        const adapter = new TranslationAdapter();
+        expect(adapter.toJson(e1)).toStrictEqual({
+            id: 2,
+            uuid: "uuid",
+            name: "a very long name that should be truncated",
+            description: "description",
+            language: 1,
+        });
+    });
+
+    test('slug apadpter', () => {
+        // Arrange
+        const e1 = new Translation(
+            2,
+            "uuid",
+            "Grüß Göttles",
+            "description",
+            1
+        );
+
+        // Assert
+        expect(e1.nameSlug).toEqual('gruss-gottles');
+    });
+});
+

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

@@ -0,0 +1,83 @@
+import { Alias, AliasAdapter } from "components/Exercises/models/alias";
+import { Note, NoteAdapter } from "components/Exercises/models/note";
+import slug from "slug";
+import { Adapter } from "utils/Adapter";
+import { truncateLongNames } from "utils/strings";
+
+
+export class Translation {
+
+    notes: Note[] = [];
+    aliases: Alias[] = [];
+    authors: string[] = [];
+
+    constructor(public id: number | null,
+                public uuid: string | null,
+                public name: string,
+                public description: string,
+                public language: number,
+                notes?: Note[],
+                aliases?: Alias[],
+                authors?: string[]
+    ) {
+        if (notes) {
+            this.notes = notes;
+        }
+
+        if (aliases) {
+            this.aliases = aliases;
+        }
+
+        if (authors) {
+            this.authors = authors;
+        }
+    }
+
+    /**
+     * Returns the first characters of an exercise name
+     *
+     * This is used in places where we need to display the exercise name in a
+     * list or similar
+     */
+    get nameLong(): string {
+        return truncateLongNames(this.name);
+    }
+
+    get nameSlug(): string {
+        return slug(this.name);
+    }
+}
+
+
+export class TranslationAdapter implements Adapter<Translation> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): Translation {
+        return new Translation(
+            item.id,
+            item.uuid,
+            item.name,
+            item.description,
+            item.language,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.notes?.map((e: any) => (new NoteAdapter().fromJson(e))),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            item.aliases?.map((e: any) => (new AliasAdapter().fromJson(e))),
+            item.author_history
+        );
+    }
+
+    /**
+     * 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: Translation) {
+
+        return {
+            id: item.id,
+            uuid: item.uuid,
+            name: item.name,
+            description: item.description,
+            language: item.language,
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+import { Adapter } from "utils/Adapter";
+
+export class ExerciseVideo {
+
+    constructor(
+        public id: number,
+        public uuid: string,
+        public url: string,
+        public isMain: boolean) {
+    }
+}
+
+export class ExerciseVideoAdapter implements Adapter<ExerciseVideo> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fromJson(item: any): ExerciseVideo {
+        return new ExerciseVideo(
+            item.id,
+            item.uuid,
+            item.video,
+            item.is_main
+        );
+    }
+
+    toJson(item: ExerciseVideo) {
+        return {
+            id: item.id,
+            video: item.url,
+        };
+    }
+}

package/src/components/Exercises/queries/exercises.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { addFullExercise, getExercise, getExercises } from "services";
+import { AddExerciseFullProps } from "services/exercise";
+import { QueryKey } from "utils/consts";
+
+export function useExercisesQuery() {
+    return useQuery({
+        queryKey: [QueryKey.EXERCISES],
+        queryFn: getExercises
+    });
+}
+
+export function useExerciseQuery(id: number) {
+    return useQuery({
+        queryKey: [QueryKey.EXERCISE_DETAIL, id],
+        queryFn: () => getExercise(id)
+    });
+}
+
+export function useAddExerciseFullQuery() {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: AddExerciseFullProps) => addFullExercise(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+        }
+    });
+}

package/src/components/Exercises/queries/index.ts

@@ -0,0 +1,133 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+    addTranslation,
+    editTranslation,
+    getCategories,
+    getEquipment,
+    getLanguages,
+    getMuscles,
+    postExerciseImage,
+} from "services";
+import { AddTranslationParams, EditTranslationParams } from "services/exerciseTranslation";
+import { deleteExerciseImage, PostExerciseImageParams } from "services/image";
+import { deleteExerciseVideo, postExerciseVideo, PostExerciseVideoParams } from "services/video";
+import { QueryKey } from "utils/consts";
+
+export { useExercisesQuery, useExerciseQuery, useAddExerciseFullQuery } from "./exercises";
+
+export function useAddTranslationQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: AddTranslationParams) => addTranslation(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+export function useEditTranslationQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: EditTranslationParams) => editTranslation(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+export function useDeleteExerciseImageQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteExerciseImage(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+export function useAddExerciseImageQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: PostExerciseImageParams) => postExerciseImage(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+/**
+ * A query hook to add a new exercise video
+ * @param exerciseId {number} - Exercise ID to which the uploaded video will be added to
+ * @returns {useMutation} A mutation object to manage the video upload process
+ */
+export function useAddExerciseVideoQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (data: PostExerciseVideoParams) => postExerciseVideo(data),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+/**
+ * A query hook to delete a exercise video
+ * @param exerciseId {number} - Exercise ID to which the video is linked
+ * @returns {useMutation} A mutation object to manage the video deletion process
+ */
+export function useDeleteExerciseVideoQuery(exerciseId: number) {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: (id: number) => deleteExerciseVideo(id),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISE_DETAIL, exerciseId] });
+        },
+    });
+}
+
+export function useCategoriesQuery() {
+    return useQuery({
+        queryKey: [QueryKey.CATEGORIES],
+        queryFn: getCategories,
+    });
+}
+
+export function useMusclesQuery() {
+    return useQuery({
+        queryKey: [QueryKey.MUSCLES],
+        queryFn: getMuscles,
+    });
+}
+
+export function useEquipmentQuery() {
+    return useQuery({
+        queryKey: [QueryKey.EQUIPMENT],
+        queryFn: getEquipment,
+    });
+}
+
+export function useLanguageQuery() {
+    return useQuery({
+        queryKey: [QueryKey.LANGUAGES],
+        queryFn: getLanguages,
+    });
+}
+
+export function useNotesQuery(translationId: number) {
+    return useQuery({
+        queryKey: [QueryKey.LANGUAGES, translationId],
+        queryFn: getLanguages,
+    });
+}

package/src/components/Exercises/queries/variations.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { addVariation } from "services/variation";
+import { QueryKey } from "utils/consts";
+
+export function useAddVariationQuery() {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: () => addVariation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QueryKey.EXERCISES] });
+        }
+    });
+}
+

package/src/components/Header/SubMenus/BodyWeightSubMenu.tsx

@@ -0,0 +1,27 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from 'react-router-dom';
+import { makeLink, WgerLink } from "utils/url";
+
+export const BodyWeightSubMenu = () => {
+    const { i18n } = useTranslation();
+    const [anchorElWeight, setAnchorElWeight] = React.useState<null | HTMLElement>(null);
+
+    return (
+        <>
+            <Button color="inherit" onClick={(event) => setAnchorElWeight(event.currentTarget)}>
+                Weight
+            </Button>
+            <Menu
+                anchorEl={anchorElWeight}
+                open={Boolean(anchorElWeight)}
+                onClose={() => setAnchorElWeight(null)}
+            >
+                <MenuItem component={Link} to={makeLink(WgerLink.WEIGHT_OVERVIEW, i18n.language)}>
+                    Weight overview
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};

package/src/components/Header/SubMenus/MeasurementsSubMenu.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from "react-i18next";
+import { Button, Menu, MenuItem } from "@mui/material";
+import { makeLink, WgerLink } from "utils/url";
+import React from "react";
+
+export const MeasurementsSubMenu = () => {
+
+    const { i18n } = useTranslation();
+    const [anchorElMeasurements, setAnchorElMeasurements] = React.useState<null | HTMLElement>(null);
+
+    return (
+        <>
+            <Button color="inherit" onClick={(event) => setAnchorElMeasurements(event.currentTarget)}>
+                Measurements
+            </Button>
+            <Menu
+                anchorEl={anchorElMeasurements}
+                open={Boolean(anchorElMeasurements)}
+                onClose={() => setAnchorElMeasurements(null)}
+            >
+                <MenuItem component={Link} to={makeLink(WgerLink.MEASUREMENT_OVERVIEW, i18n.language)}>
+                    Overview
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};

package/src/components/Header/SubMenus/NutritionSubMenu.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from "react-i18next";
+import { Button, Menu, MenuItem } from "@mui/material";
+import { makeLink, WgerLink } from "utils/url";
+import React from "react";
+
+export const NutritionSubMenu = () => {
+
+    const { i18n } = useTranslation();
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+    return (
+        <>
+            <Button color="inherit" onClick={(event) => setAnchorEl(event.currentTarget)}>
+                Nutrition
+            </Button>
+            <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={() => setAnchorEl(null)}
+            >
+                <MenuItem component={Link} to={makeLink(WgerLink.NUTRITION_OVERVIEW, i18n.language)}>
+                    Overview
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};

package/src/components/Header/SubMenus/TrainingSubMenu.tsx

@@ -0,0 +1,43 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from 'react-router-dom';
+import { makeLink, WgerLink } from "utils/url";
+
+export const TrainingSubMenu = () => {
+
+    const { i18n } = useTranslation();
+    const [anchorElRoutine, setAnchorElRoutine] = React.useState<null | HTMLElement>(null);
+
+    return (
+        <>
+            <Button color="inherit" onClick={(event) => setAnchorElRoutine(event.currentTarget)}>
+                Routines
+            </Button>
+            <Menu
+                anchorEl={anchorElRoutine}
+                open={Boolean(anchorElRoutine)}
+                onClose={() => setAnchorElRoutine(null)}
+            >
+                <MenuItem component={Link} to={makeLink(WgerLink.ROUTINE_OVERVIEW, i18n.language)}>
+                    Routine overview
+                </MenuItem>
+                <MenuItem component={Link} to={makeLink(WgerLink.PRIVATE_TEMPLATE_OVERVIEW, i18n.language)}>
+                    Private template overview
+                </MenuItem>
+                <MenuItem component={Link} to={makeLink(WgerLink.PUBLIC_TEMPLATE_OVERVIEW, i18n.language)}>
+                    Public template overview
+                </MenuItem>
+                <MenuItem component={Link} to={makeLink(WgerLink.EXERCISE_OVERVIEW, i18n.language)}>
+                    Exercise overview
+                </MenuItem>
+                <MenuItem component={Link} to={makeLink(WgerLink.EXERCISE_CONTRIBUTE, i18n.language)}>
+                    Contribute exercise
+                </MenuItem>
+                <MenuItem component={Link} to={makeLink(WgerLink.CALENDAR, i18n.language)}>
+                    Calendar
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};

package/src/components/Header/SubMenus/WorkoutSubMenu.tsx

@@ -0,0 +1,28 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { makeLink, WgerLink } from "../../../utils/url";
+
+export const WorkoutSubMenu = () => {
+    const { i18n } = useTranslation();
+    const [anchorElWorkout, setAnchorElWorkout] = React.useState<null | HTMLElement>(null);
+
+
+    return (
+        <>
+            <Button color="inherit" onClick={(event) => setAnchorElWorkout(event.currentTarget)}>
+                Workout
+            </Button>
+            <Menu
+                anchorEl={anchorElWorkout}
+                open={Boolean(anchorElWorkout)}
+                onClose={() => setAnchorElWorkout(null)}
+            >
+                <MenuItem component={Link} to={makeLink(WgerLink.CALENDAR, i18n.language)}>
+                    Calendar
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};

package/src/components/Header/index.tsx

@@ -0,0 +1,27 @@
+import { AppBar, Toolbar, Typography } from "@mui/material";
+import { BodyWeightSubMenu } from "components/Header/SubMenus/BodyWeightSubMenu";
+import { MeasurementsSubMenu } from "components/Header/SubMenus/MeasurementsSubMenu";
+import { NutritionSubMenu } from "components/Header/SubMenus/NutritionSubMenu";
+import { TrainingSubMenu } from "components/Header/SubMenus/TrainingSubMenu";
+import React from 'react';
+
+
+export const Header = () => {
+
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <Typography variant="h6" component="div" mr={3}>
+                    wger
+                </Typography>
+
+                <TrainingSubMenu />
+                <BodyWeightSubMenu />
+                <MeasurementsSubMenu />
+                <NutritionSubMenu />
+
+
+            </Toolbar>
+        </AppBar>
+    );
+};

package/src/components/Measurements/Screens/MeasurementCategoryDetail.test.tsx

@@ -0,0 +1,67 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from '@testing-library/react';
+import { useMeasurementsQuery } from "components/Measurements/queries";
+import { MeasurementCategoryDetail } from "components/Measurements/Screens/MeasurementCategoryDetail";
+import React from 'react';
+import { MemoryRouter, Route, Routes } from "react-router";
+import { TEST_MEASUREMENT_CATEGORY_1 } from "tests/measurementsTestData";
+
+jest.mock("components/Measurements/queries");
+
+
+const queryClient = new QueryClient();
+
+describe("Test the MeasurementCategoryDetail component", () => {
+
+    // See https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
+    const { ResizeObserver } = window;
+
+    beforeEach(() => {
+
+        (useMeasurementsQuery as jest.Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: TEST_MEASUREMENT_CATEGORY_1
+        }));
+
+        // @ts-ignore
+        delete window.ResizeObserver;
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn()
+        }));
+    });
+
+    afterEach(() => {
+        window.ResizeObserver = ResizeObserver;
+        jest.restoreAllMocks();
+    });
+
+
+    test('renders the current category correctly', async () => {
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/measurement/category/42']}>
+                    <Routes>
+                        <Route path="measurement/category/:categoryId" element={<MeasurementCategoryDetail />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(useMeasurementsQuery).toHaveBeenCalled();
+        expect(screen.getByText('Biceps')).toBeInTheDocument();
+
+        expect(screen.getByText('10cm')).toBeInTheDocument();
+        expect(screen.getByText(/Feb 1, 2023/i)).toBeInTheDocument();
+        expect(screen.getByText('test note')).toBeInTheDocument();
+
+        expect(screen.getByText('20cm')).toBeInTheDocument();
+        expect(screen.getByText(/Feb 2, 2023/i)).toBeInTheDocument();
+        expect(screen.getByText('important note')).toBeInTheDocument();
+    });
+});