@wger-project/react-components 25.10.16

package/src/services/workoutLogs.ts

@@ -0,0 +1,89 @@
+import axios from "axios";
+import { Exercise } from "components/Exercises/models/exercise";
+import { WorkoutLog, WorkoutLogAdapter } from "components/WorkoutRoutines/models/WorkoutLog";
+import { getExercise } from "services/exercise";
+import { getRoutineRepUnits, getRoutineWeightUnits } from "services/workoutUnits";
+import { API_MAX_PAGE_SIZE, ApiPath } from "utils/consts";
+import { fetchPaginated } from "utils/requests";
+import { makeHeader, makeUrl } from "utils/url";
+
+export const deleteLog = async (id: number): Promise<number> => {
+    const response = await axios.delete<number>(makeUrl(ApiPath.WORKOUT_LOG, { id: id }), {
+        headers: makeHeader(),
+    });
+
+    return response.status;
+};
+
+
+export const editLog = async (entry: WorkoutLog): Promise<WorkoutLog> => {
+    const adapter = new WorkoutLogAdapter();
+    const response = await axios.patch(
+        makeUrl(ApiPath.WORKOUT_LOG, { id: entry.id }),
+        adapter.toJson(entry),
+        { headers: makeHeader() }
+    );
+    return adapter.fromJson(response.data);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const addLogs = async (entries: any[]): Promise<WorkoutLog[]> => {
+    const adapter = new WorkoutLogAdapter();
+    const out = [] as WorkoutLog[];
+    for (const entry of entries) {
+        const response = await axios.post(
+            makeUrl(ApiPath.WORKOUT_LOG,),
+            { ...entry },
+            { headers: makeHeader() }
+        );
+        out.push(adapter.fromJson(response.data));
+    }
+
+    return out;
+};
+
+/*
+ * Retrieves the training logs for a routine
+ */
+export const getRoutineLogs = async (id: number, options?
+: { loadExercises?: boolean, filtersetQuery?: object }): Promise<WorkoutLog[]> => {
+    const { loadExercises = false, filtersetQuery = {} } = options || {};
+
+    const adapter = new WorkoutLogAdapter();
+    const url = makeUrl(
+        ApiPath.WORKOUT_LOG,
+        { query: { routine: id.toString(), limit: API_MAX_PAGE_SIZE, ordering: '-date', ...filtersetQuery } }
+    );
+
+    const unitResponses = await Promise.all([getRoutineRepUnits(), getRoutineWeightUnits()]);
+    const repUnits = unitResponses[0];
+    const weightUnits = unitResponses[1];
+
+    const exercises: Map<number, Exercise> = new Map();
+
+    const out: WorkoutLog[] = [];
+    for await (const page of fetchPaginated(url)) {
+        for (const logData of page) {
+            const log = adapter.fromJson(logData);
+            if (log.repetitionUnitId !== null) {
+                log.repetitionUnitObj = repUnits.find(e => e.id === log.repetitionUnitId) ?? null;
+            }
+
+            if (log.weightUnitId !== null) {
+                log.weightUnitObj = weightUnits.find(e => e.id === log.weightUnitId) ?? null;
+            }
+
+            // Load the base object
+            if (loadExercises) {
+                if (exercises.get(log.exerciseId) === undefined) {
+                    exercises.set(log.exerciseId, await getExercise(log.exerciseId));
+                }
+                log.exerciseObj = exercises.get(log.exerciseId)!;
+            }
+
+            out.push(log);
+        }
+    }
+
+    return out;
+};

package/src/services/workoutUnits.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { RepetitionUnit, RepetitionUnitAdapter } from "components/WorkoutRoutines/models/RepetitionUnit";
+import { WeightUnit, WeightUnitAdapter } from "components/WorkoutRoutines/models/WeightUnit";
+import { ApiSettingRepUnitType, ApiSettingWeightUnitType } from 'types';
+import { makeHeader, makeUrl } from "utils/url";
+import { ResponseType } from "./responseType";
+
+export const API_SETTING_REP_UNIT_PATH = 'setting-repetitionunit';
+export const API_SETTING_WEIGHT_UNIT_PATH = 'setting-weightunit';
+
+
+export const getRoutineRepUnits = async (): Promise<RepetitionUnit[]> => {
+    const url = makeUrl(API_SETTING_REP_UNIT_PATH);
+    const { data: receivedUnits } = await axios.get<ResponseType<ApiSettingRepUnitType>>(url, {
+        headers: makeHeader(),
+    });
+    const adapter = new RepetitionUnitAdapter();
+    return receivedUnits.results.map(l => adapter.fromJson(l));
+};
+
+export const getRoutineWeightUnits = async (): Promise<WeightUnit[]> => {
+    const url = makeUrl(API_SETTING_WEIGHT_UNIT_PATH);
+    const { data: receivedUnits } = await axios.get<ResponseType<ApiSettingWeightUnitType>>(url, {
+        headers: makeHeader(),
+    });
+    const adapter = new WeightUnitAdapter();
+    return receivedUnits.results.map(l => adapter.fromJson(l));
+};
+

package/src/setupTests.ts

@@ -0,0 +1,40 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { TextDecoder, TextEncoder } from 'util';
+
+// Mock the translations
+i18n.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+
+    // have a common namespace used around the full app
+    ns: ['translations'],
+    defaultNS: 'translations',
+
+    // debug: true,
+
+    interpolation: {
+        escapeValue: false, // not needed for react!!
+    },
+
+    resources: { en: { translations: {} } },
+});
+
+jest.mock('./config', () => {
+    return {
+        IS_PROD: false,
+        SERVER_URL: 'https://example.com',
+        VITE_API_SERVER: 'https://example.com',
+        VITE_API_KEY: '122333444455555666666'
+    };
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+global.TextEncoder = TextEncoder as any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+global.TextDecoder = TextDecoder as any;

package/src/state/exerciseSubmissionReducer.ts

@@ -0,0 +1,170 @@
+import { ImageFormData } from "components/Exercises/models/exercise";
+import { exerciseSubmissionInitialState, SetExerciseSubmissionState } from 'state';
+import { ExerciseSubmissionAction, ExerciseSubmissionState } from "state/exerciseSubmissionState";
+
+
+export const reset = (): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.RESET };
+};
+
+export const setNameEn = (name: string): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_NAME_EN, payload: name };
+};
+export const setDescriptionEn = (description: string): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_DESCRIPTION_EN, payload: description };
+};
+export const setNotesEn = (notes: string[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_NOTES_EN, payload: notes };
+};
+export const setAlternativeNamesEn = (names: string[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_ALIASES_EN, payload: names };
+};
+
+export const setNameI18n = (name: string): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_NAME_I18N, payload: name };
+};
+export const setDescriptionI18n = (description: string): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_DESCRIPTION_I18N, payload: description };
+};
+export const setNotesI18n = (notes: string[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_NOTES_I18N, payload: notes };
+};
+export const setAlternativeNamesI18n = (names: string[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_ALIASES_I18N, payload: names };
+};
+export const setCategory = (id: number | null): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_CATEGORY, payload: id };
+};
+export const setEquipment = (ids: number[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_EQUIPMENT, payload: ids };
+};
+export const setPrimaryMuscles = (ids: number[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_PRIMARY_MUSCLES, payload: ids };
+};
+export const setSecondaryMuscles = (ids: number[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_MUSCLES_SECONDARY, payload: ids };
+};
+export const setVariationId = (id: number | null): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_VARIATION_ID, payload: id };
+};
+export const setNewBaseVariationId = (id: number | null): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_NEW_VARIATION_BASE_ID, payload: id };
+};
+export const setLanguageId = (id: number | null): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_LANGUAGE, payload: id };
+};
+export const setImages = (images: ImageFormData[]): ExerciseSubmissionAction => {
+    return { type: SetExerciseSubmissionState.SET_IMAGES, payload: images };
+};
+
+
+export const exerciseSubmissionReducer = (state: ExerciseSubmissionState, action: ExerciseSubmissionAction): ExerciseSubmissionState => {
+
+    if (action === undefined) {
+        return state;
+    }
+
+    switch (action.type) {
+        case SetExerciseSubmissionState.RESET:
+            return exerciseSubmissionInitialState;
+
+        case SetExerciseSubmissionState.SET_NAME_EN:
+            return {
+                ...state,
+                nameEn: action.payload as string
+            };
+
+        case SetExerciseSubmissionState.SET_DESCRIPTION_EN:
+            return {
+                ...state,
+                descriptionEn: action.payload as string
+            };
+
+        case SetExerciseSubmissionState.SET_NOTES_EN:
+            return {
+                ...state,
+                notesEn: action.payload as string[]
+            };
+
+        case SetExerciseSubmissionState.SET_ALIASES_EN:
+            return {
+                ...state,
+                alternativeNamesEn: action.payload as string[]
+            };
+
+        case SetExerciseSubmissionState.SET_CATEGORY:
+            return {
+                ...state,
+                category: action.payload as number
+            };
+
+        case SetExerciseSubmissionState.SET_EQUIPMENT:
+            return {
+                ...state,
+                equipment: action.payload as number[]
+            };
+
+        case SetExerciseSubmissionState.SET_PRIMARY_MUSCLES:
+            return {
+                ...state,
+                muscles: action.payload as number[]
+            };
+
+        case SetExerciseSubmissionState.SET_MUSCLES_SECONDARY:
+            return {
+                ...state,
+                musclesSecondary: action.payload as number[]
+            };
+
+        case SetExerciseSubmissionState.SET_VARIATION_ID:
+            return {
+                ...state,
+                variationId: action.payload as number
+            };
+
+        case SetExerciseSubmissionState.SET_NEW_VARIATION_BASE_ID:
+            return {
+                ...state,
+                newVariationExerciseId: action.payload as number
+            };
+
+        case SetExerciseSubmissionState.SET_LANGUAGE:
+            return {
+                ...state,
+                languageId: action.payload as number
+            };
+
+        case SetExerciseSubmissionState.SET_NAME_I18N:
+            return {
+                ...state,
+                nameI18n: action.payload as string
+            };
+
+        case SetExerciseSubmissionState.SET_DESCRIPTION_I18N:
+            return {
+                ...state,
+                descriptionI18n: action.payload as string
+            };
+
+        case SetExerciseSubmissionState.SET_NOTES_I18N:
+            return {
+                ...state,
+                notesI18n: action.payload as string[]
+            };
+
+        case SetExerciseSubmissionState.SET_ALIASES_I18N:
+            return {
+                ...state,
+                alternativeNamesI18n: action.payload as string[]
+            };
+
+        case SetExerciseSubmissionState.SET_IMAGES:
+            return {
+                ...state,
+                images: action.payload as ImageFormData[]
+            };
+
+        default:
+            return state;
+    }
+};

package/src/state/exerciseSubmissionState.tsx

@@ -0,0 +1,75 @@
+import { ImageFormData } from "components/Exercises/models/exercise";
+import React, { createContext, useContext, useReducer } from "react";
+import { exerciseSubmissionReducer } from "state/exerciseSubmissionReducer";
+import { SetExerciseSubmissionState } from "state/stateTypes";
+
+export type ExerciseSubmissionAction = {
+    type: SetExerciseSubmissionState,
+    payload?: number | number[] | string | string[] | null | ImageFormData[],
+}
+
+export type ExerciseSubmissionState = {
+    nameEn: string;
+    descriptionEn: string;
+    alternativeNamesEn: string[];
+    notesEn: string[];
+
+    languageId: number | null;
+    nameI18n: string;
+    alternativeNamesI18n: string[];
+    descriptionI18n: string;
+    notesI18n: string[];
+
+    category: number | null;
+    muscles: number[];
+    musclesSecondary: number[];
+    equipment: number[];
+    variationId: number | null;
+    newVariationExerciseId: number | null;
+
+    images: ImageFormData[];
+}
+
+export const exerciseSubmissionInitialState: ExerciseSubmissionState = {
+    category: null,
+    muscles: [],
+    musclesSecondary: [],
+    variationId: null,
+    newVariationExerciseId: null,
+    languageId: null,
+    equipment: [],
+
+    nameEn: "",
+    descriptionEn: "",
+    alternativeNamesEn: [],
+    notesEn: [],
+
+    nameI18n: "",
+    alternativeNamesI18n: [],
+    descriptionI18n: "",
+    notesI18n: [],
+
+    images: [],
+};
+
+
+export const ExerciseSubmissionStateContext = createContext<[ExerciseSubmissionState, React.Dispatch<ExerciseSubmissionAction>]>([
+    exerciseSubmissionInitialState,
+    () => exerciseSubmissionInitialState
+]);
+
+type StateProp = {
+    children: React.ReactElement
+};
+
+export const ExerciseSubmissionStateProvider: React.FC<StateProp> = ({ children }: StateProp) => {
+    const [state, dispatch] = useReducer(exerciseSubmissionReducer, exerciseSubmissionInitialState);
+
+    return (
+        <ExerciseSubmissionStateContext.Provider value={[state, dispatch]}>
+            {children}
+        </ExerciseSubmissionStateContext.Provider>
+    );
+};
+
+export const useExerciseSubmissionStateValue = () => useContext(ExerciseSubmissionStateContext);

package/src/state/index.ts

@@ -0,0 +1,15 @@
+export {
+    notificationReducer,
+    setNotification
+} from 'state/notificationReducer';
+export { NotificationStateProvider, useWeightStateValue } from 'state/notificationState';
+export type { NotificationState } from 'state/notificationState';
+export { SetNotificationState, SetExerciseSubmissionState } from 'state/stateTypes';
+
+
+export type { ExerciseSubmissionState } from 'state/exerciseSubmissionState';
+export {
+    ExerciseSubmissionStateProvider, useExerciseSubmissionStateValue, exerciseSubmissionInitialState
+} from 'state/exerciseSubmissionState';
+
+

package/src/state/notificationReducer.ts

@@ -0,0 +1,29 @@
+import { NotificationState } from 'state';
+import { Notification } from "types";
+import { SetNotificationState } from "./stateTypes";
+
+export type WeightAction = {
+    type: SetNotificationState,
+    payload: Notification
+}
+
+
+export const setNotification = (notification: Notification): WeightAction => {
+    return { type: SetNotificationState.SET_NOTIFICATION, payload: notification };
+};
+
+
+export const notificationReducer = (state: NotificationState, action: WeightAction): NotificationState => {
+
+    switch (action.type) {
+
+        case SetNotificationState.SET_NOTIFICATION:
+            return {
+                ...state,
+                notification: action.payload as Notification
+            };
+
+        default:
+            return state;
+    }
+};

package/src/state/notificationState.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useReducer } from "react";
+import { notificationReducer, WeightAction } from "state/notificationReducer";
+import { Notification } from "types";
+
+export type NotificationState = {
+    notification: Notification
+};
+
+const initialState: NotificationState = {
+    notification: { notify: false, message: "", severity: undefined, title: "", type: undefined }
+};
+
+export const WeightStateContext = createContext<[NotificationState, React.Dispatch<WeightAction>]>([
+    initialState,
+    () => initialState
+]);
+
+type StateProp = {
+    children: React.ReactElement
+};
+
+export const NotificationStateProvider: React.FC<StateProp> = ({ children }: StateProp) => {
+    const [state, dispatch] = useReducer(notificationReducer, initialState);
+
+    return (
+        <WeightStateContext.Provider value={[state, dispatch]}>
+            {children}
+        </WeightStateContext.Provider>
+    );
+};
+
+export const useWeightStateValue = () => useContext(WeightStateContext);

package/src/state/stateTypes.ts

@@ -0,0 +1,24 @@
+export enum SetNotificationState {
+    SET_NOTIFICATION
+}
+
+export enum SetExerciseSubmissionState {
+    RESET,
+
+    SET_NAME_EN,
+    SET_ALIASES_EN,
+    SET_DESCRIPTION_EN,
+    SET_NOTES_EN,
+    SET_CATEGORY,
+    SET_EQUIPMENT,
+    SET_PRIMARY_MUSCLES,
+    SET_MUSCLES_SECONDARY,
+    SET_VARIATION_ID,
+    SET_NEW_VARIATION_BASE_ID,
+    SET_LANGUAGE,
+    SET_NAME_I18N,
+    SET_ALIASES_I18N,
+    SET_DESCRIPTION_I18N,
+    SET_NOTES_I18N,
+    SET_IMAGES
+}

package/src/tests/api/ingredientInfoEndpoint.ts

@@ -0,0 +1,72 @@
+export const INGREDIENT_API_RESPONSE = {
+    "count": 1,
+    "next": null,
+    "previous": null,
+    "results": [
+
+        {
+            "id": 59197,
+            "uuid": "c85abb5d-2325-42fa-b497-a0a73f38bc1e",
+            "remote_id": "4250241203517",
+            "source_name": "Open Food Facts",
+            "source_url": "https://world.openfoodfacts.org/api/v0/product/4250241203517.json",
+            "code": "4250241203517",
+            "name": "10 Fischstäbchen",
+            "created": "2020-12-20T09:00:00+09:00",
+            "last_update": "2025-09-24T05:31:30.074337+09:00",
+            "last_imported": "2020-12-20T22:47:01.477000+09:00",
+            "energy": 195,
+            "protein": "13.000",
+            "carbohydrates": "18.000",
+            "carbohydrates_sugar": "0.800",
+            "fat": "7.700",
+            "fat_saturated": "0.600",
+            "fiber": "0.800",
+            "sodium": "0.356",
+            "weight_units": [],
+            "language": {
+                "id": 1,
+                "short_name": "de",
+                "full_name": "Deutsch",
+                "full_name_en": "German"
+            },
+            "license": {
+                "id": 5,
+                "full_name": "Open Data Commons Open Database License",
+                "short_name": "ODbL",
+                "url": "https://opendatacommons.org/licenses/odbl/"
+            },
+            "license_title": "",
+            "license_object_url": "",
+            "license_author": "Open Food Facts",
+            "license_author_url": "",
+            "license_derivative_source_url": "",
+            "image": {
+                "id": 1,
+                "uuid": "7f4120cd-a5c1-4a3a-b31b-974e62478222",
+                "ingredient_id": 59197,
+                "ingredient_uuid": "c85abb5d-2325-42fa-b497-a0a73f38bc1e",
+                "image": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg",
+                "created": "2025-09-24T05:31:30.059629+09:00",
+                "last_update": "2025-09-24T05:31:30.062273+09:00",
+                "size": 304802,
+                "width": 2050,
+                "height": 993,
+                "license": 1,
+                "license_title": "Photo",
+                "license_object_url": "https://world.openfoodfacts.org/cgi/product_image.pl?code=4250241203517&id=2",
+                "license_author": "kiliweb",
+                "license_author_url": "https://world.openfoodfacts.org/photographer/kiliweb",
+                "license_derivative_source_url": ""
+            },
+            "thumbnails": {
+                "small": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.200x200_q85.jpg",
+                "small_cropped": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.200x200_q85_crop-smart.jpg",
+                "medium": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.400x400_q85.jpg",
+                "medium_cropped": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.400x400_q85_crop-smart.jpg",
+                "large": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.800x800_q90.jpg",
+                "large_cropped": "http://localhost:8000/media/ingredients/59197/7f4120cd-a5c1-4a3a-b31b-974e62478222.jpg.800x800_q90_crop-smart.jpg"
+            }
+        }
+    ]
+};