@wger-project/react-components 25.11.17 → 25.12.5

package/src/components/WorkoutRoutines/Detail/WorkoutStats.tsx

@@ -30,7 +30,7 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { getLanguageByShortName } from "services";
 import { generateChartColors } from "utils/colors";
 import { makeLink, WgerLink } from "utils/url";

package/src/components/WorkoutRoutines/widgets/forms/DayTypeSelect.tsx

@@ -10,8 +10,7 @@ interface DayTypeSelectProps {
 
 export const DayTypeSelect = (props: DayTypeSelectProps) => {
     const { t } = useTranslation();
-    const [field, meta] = useField(props.fieldName);
-
+    const [field] = useField(props.fieldName);
     const options = [
         {
             value: 'custom',

package/src/components/WorkoutRoutines/widgets/forms/SlotForm.tsx

@@ -10,10 +10,6 @@ export const SlotForm = (props: { slot: Slot, routineId: number }) => {
     const editSlotQuery = useEditSlotQuery(props.routineId);
     const [slotComment, setSlotComment] = useState<string>(props.slot.comment);
 
-    const handleChange = (value: string) => {
-        setSlotComment(value);
-    };
-
     const handleBlur = () => {
         editSlotQuery.mutate(Slot.clone(props.slot, { comment: slotComment }));
     };

package/src/index.tsx

@@ -4,9 +4,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
-import { NutritionCard } from "components/Dashboard/NutritionCard";
-import { RoutineCard } from "components/Dashboard/RoutineCard";
-import { WeightCard } from "components/Dashboard/WeightCard";
 import { IngredientSearch } from "components/Nutrition/components/IngredientSearch";
 import React, { Suspense } from 'react';
 import { createRoot } from "react-dom/client";
@@ -123,49 +120,6 @@ renderComponentShadowDom('react-page');
 /*
  * Components used in the wger django app, don't change the IDs here
  */
-const weightDashboard = document.getElementById("react-weight-dashboard");
-if (weightDashboard) {
-    const root = createRoot(weightDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <WeightCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const nutritionDashboard = document.getElementById('react-nutrition-dashboard');
-if (nutritionDashboard) {
-    const root = createRoot(nutritionDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <NutritionCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-const routineDashboard = document.getElementById('react-routine-dashboard');
-if (routineDashboard) {
-    const root = createRoot(routineDashboard);
-    root.render(
-        <Suspense fallback={<LoadingWidget />}>
-            <ThemeProvider theme={theme}>
-                <QueryClientProvider client={queryClient}>
-                    <RoutineCard />
-                </QueryClientProvider>
-            </ThemeProvider>
-        </Suspense>
-    );
-}
-
-
 const ingredientSearchBox = document.getElementById("react-ingredient-search");
 if (ingredientSearchBox) {
     const root = createRoot(ingredientSearchBox);

package/src/routes.tsx

@@ -1,4 +1,4 @@
-import { Dashboard } from "components/Dashboard/Dashboard";
+import { ConfigurableDashboard } from "components/Dashboard/ConfigurableDashboard";
 import { ExerciseOverview } from "components/Exercises/ExerciseOverview";
 import { MeasurementCategoryDetail } from "components/Measurements/Screens/MeasurementCategoryDetail";
 import { MeasurementCategoryOverview } from "components/Measurements/Screens/MeasurementCategoryOverview";
@@ -42,96 +42,99 @@ import { Route, Routes } from "react-router-dom";
  * See also src/utils/url.ts
  */
 export const WgerRoutes = () => {
-    return <Routes>
-        <Route path="/:lang">
+    return (
+        <Routes>
+            <Route path="/:lang">
+                <Route path="routine">
+                    <Route index element={<RoutineOverview />} />
+                    <Route path="overview" element={<RoutineOverview />} />
+                    <Route path="calendar" element={<Calendar />} />
+                    <Route path="add" element={<RoutineAdd />} />
 
-            <Route path="routine">
-                <Route index element={<RoutineOverview />} />
-                <Route path="overview" element={<RoutineOverview />} />
-                <Route path="calendar" element={<Calendar />} />
-                <Route path="add" element={<RoutineAdd />} />
+                    <Route path=":routineId">
+                        <Route path="day/:dayId">
+                            <Route path="add-logs" element={<SessionAdd />} />
+                        </Route>
+                        <Route path="edit">
+                            <Route index element={<RoutineEdit />} />
+                            <Route path="progression/:slotId" element={<SlotProgressionEdit />} />
+                        </Route>
 
-                <Route path=":routineId">
-                    <Route path="day/:dayId">
-                        <Route path="add-logs" element={<SessionAdd />} />
-                    </Route>
-                    <Route path="edit">
-                        <Route index element={<RoutineEdit />} />
-                        <Route path="progression/:slotId" element={<SlotProgressionEdit />} />
+                        <Route path="view" element={<RoutineDetail />} />
+                        <Route path="table" element={<RoutineDetailsTable />} />
+                        <Route path="logs" element={<WorkoutLogs />} />
+                        <Route path="statistics" element={<WorkoutStats />} />
                     </Route>
 
-                    <Route path="view" element={<RoutineDetail />} />
-                    <Route path="table" element={<RoutineDetailsTable />} />
-                    <Route path="logs" element={<WorkoutLogs />} />
-                    <Route path="statistics" element={<WorkoutStats />} />
-                </Route>
-
-                <Route path="templates">
-                    <Route path=":routineId">
-                        <Route path="view" element={<TemplateDetail />} />
+                    <Route path="templates">
+                        <Route path=":routineId">
+                            <Route path="view" element={<TemplateDetail />} />
+                        </Route>
+                        <Route path="overview">
+                            <Route path="private" element={<PrivateTemplateOverview />} />
+                            <Route path="public" element={<PublicTemplateOverview />} />
+                        </Route>
                     </Route>
-                    <Route path="overview">
-                        <Route path="private" element={<PrivateTemplateOverview />} />
-                        <Route path="public" element={<PublicTemplateOverview />} />
+                </Route>
+                <Route path="measurement">
+                    <Route index element={<MeasurementCategoryOverview />} />
+                    <Route path="overview" element={<MeasurementCategoryOverview />} />
+                    <Route path="category/:categoryId" element={<MeasurementCategoryDetail />}></Route>
+                </Route>
+                <Route path="exercise">
+                    <Route index element={<ExerciseOverview />} />
+                    <Route path="overview" element={<ExerciseOverview />} />
+                    <Route path=":exerciseId" element={<ExerciseDetailPage />}>
+                        <Route path="view" element={<ExerciseDetailPage />}>
+                            <Route path=":slug" element={<ExerciseDetailPage />} />
+                        </Route>
                     </Route>
+                    <Route path="contribute" element={<AddExercise />} />
                 </Route>
-
-            </Route>
-            <Route path="measurement">
-                <Route index element={<MeasurementCategoryOverview />} />
-                <Route path="overview" element={<MeasurementCategoryOverview />} />
-                <Route path="category/:categoryId" element={<MeasurementCategoryDetail />}>
+                <Route path="weight">
+                    <Route path="overview" element={<WeightOverview />} />
+                    <Route path="add" element={<AddWeight />} />
                 </Route>
-            </Route>
-            <Route path="exercise">
-                <Route index element={<ExerciseOverview />} />
-                <Route path="overview" element={<ExerciseOverview />} />
-                <Route path=":exerciseId" element={<ExerciseDetailPage />}>
-                    <Route path="view" element={<ExerciseDetailPage />}>
-                        <Route path=":slug" element={<ExerciseDetailPage />} />
+                <Route path="nutrition">
+                    <Route path="overview" element={<PlansOverview />} />
+                    <Route path=":planId">
+                        <Route path="view" element={<PlanDetail />} />
+                        <Route path=":date" element={<NutritionDiaryOverview />} />
+                        <Route path="diary" element={<NutritionDiaryOverview />} />
+                    </Route>
+                    <Route path="calculator">
+                        <Route path="bmi" element={<BmiCalculator />} />
+                        <Route path="calories" element={<CaloriesCalculator />} />
+                    </Route>
+                    <Route path="ingredient">
+                        <Route path="overview" element={<Ingredients />} />
                     </Route>
                 </Route>
-                <Route path="contribute" element={<AddExercise />} />
-            </Route>
-            <Route path="weight">
-                <Route path="overview" element={<WeightOverview />} />
-                <Route path="add" element={<AddWeight />} />
-            </Route>
-            <Route path="nutrition">
-                <Route path="overview" element={<PlansOverview />} />
-                <Route path=":planId">
-                    <Route path="view" element={<PlanDetail />} />
-                    <Route path=":date" element={<NutritionDiaryOverview />} />
-                    <Route path="diary" element={<NutritionDiaryOverview />} />
+                <Route path="software">
+                    <Route path="about-us" element={<About />} />
+                    <Route path="api" element={<ApiPage />} />
+                    <Route path="equipment" element={<Equipments />} />
                 </Route>
-                <Route path="calculator">
-                    <Route path="bmi" element={<BmiCalculator />} />
-                    <Route path="calories" element={<CaloriesCalculator />} />
+                <Route path="login" element={<Login />} />
+                <Route path="user">
+                    <Route path="preferences" element={<Preferences />} />
                 </Route>
-                <Route path="ingredient">
-                    <Route path="overview" element={<Ingredients />} />
+                <Route path="dashboard">
+                    <Route index element={<ConfigurableDashboard />} />
+                    <Route path="" element={<ConfigurableDashboard />} />
                 </Route>
             </Route>
-            <Route path="software">
-                <Route path="about-us" element={<About />} />
-                <Route path="api" element={<ApiPage />} />
-                <Route path="equipment" element={<Equipments />} />
-            </Route>
-            <Route path="login" element={<Login />} />
-            <Route path="user">
-                <Route path="preferences" element={<Preferences />} />
-            </Route>
-        </Route>
-        <Route path="/" element={<Dashboard />} />
+            <Route path="/" element={<ConfigurableDashboard />} />
 
-        {/* This route matches when no other route match, so a 404 */}
-        <Route
-            path="*"
-            element={
-                <main style={{ padding: "1rem" }}>
-                    <p>404, Page NOT FOUND</p>
-                </main>
-            }
-        />
-    </Routes>;
-};
+            {/* This route matches when no other route match, so a 404 */}
+            <Route
+                path="*"
+                element={
+                    <main style={{ padding: "1rem" }}>
+                        <p>404, Page NOT FOUND</p>
+                    </main>
+                }
+            />
+        </Routes>
+    );
+};

package/src/services/exerciseTranslation.ts

@@ -14,7 +14,6 @@ export const EXERCISE_TRANSLATION_PATH = 'exercise-translation';
  */
 export const getExerciseTranslations = async (id: number): Promise<Translation[]> => {
     const url = makeUrl(EXERCISE_PATH, { query: { exercise: id } });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { data } = await axios.get<ResponseType<Translation>>(url, {
         headers: makeHeader(),
     });
@@ -26,7 +25,7 @@ export const getExerciseTranslations = async (id: number): Promise<Translation[]
 /*
  * Search for exercises by name using the exerciseinfo endpoint
  */
-export const searchExerciseTranslations = async (name: string,languageCode: string = ENGLISH_LANGUAGE_CODE,searchEnglish: boolean = true): Promise<Exercise[]> => {
+export const searchExerciseTranslations = async (name: string, languageCode: string = ENGLISH_LANGUAGE_CODE, searchEnglish: boolean = true): Promise<Exercise[]> => {
     const languages = [languageCode];
     if (languageCode !== LANGUAGE_SHORT_ENGLISH && searchEnglish) {
         languages.push(LANGUAGE_SHORT_ENGLISH);
@@ -34,19 +33,19 @@ export const searchExerciseTranslations = async (name: string,languageCode: stri
 
     const url = makeUrl('exerciseinfo', {
         query: {
-            name__search: name,
-            language__code: languages.join(','),
+            "name__search": name,
+            "language__code": languages.join(','),
             limit: 50,
         }
     });
 
     try {
         const { data } = await axios.get<ResponseType<Exercise>>(url);
-        
+
         if (!data || !data.results || !Array.isArray(data.results)) {
             return [];
         }
-        
+
         const adapter = new ExerciseAdapter();
         return data.results.map((item: unknown) => adapter.fromJson(item));
     } catch {

package/src/services/measurements.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { MeasurementCategory, MeasurementCategoryAdapter } from "components/Measurements/models/Category";
 import { MeasurementEntry, MeasurementEntryAdapter } from "components/Measurements/models/Entry";
 import { ApiMeasurementCategoryType } from 'types';
+import { API_MAX_PAGE_SIZE } from "utils/consts";
 import { dateToYYYYMMDD } from "utils/date";
 import { fetchPaginated } from 'utils/requests';
 import { makeHeader, makeUrl } from "utils/url";
@@ -20,8 +21,14 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
     const adapter = new MeasurementCategoryAdapter();
     const entryAdapter = new MeasurementEntryAdapter();
     const categories: MeasurementCategory[] = [];
+    const categoryUrl = makeUrl(API_MEASUREMENTS_CATEGORY_PATH, {
+        query: {
+            limit: API_MAX_PAGE_SIZE,
+            ...filtersetQueryCategories
+        }
+    });
 
-    for await (const page of fetchPaginated(makeUrl(API_MEASUREMENTS_CATEGORY_PATH, { query: { ...filtersetQueryCategories } }), makeHeader())) {
+    for await (const page of fetchPaginated(categoryUrl, makeHeader())) {
         for (const catData of page) {
             categories.push(adapter.fromJson(catData));
         }
@@ -30,7 +37,13 @@ export const getMeasurementCategories = async (options?: MeasurementQueryOptions
     // Load entries for each category
     const entryResponses = categories.map(async (category) => {
         const out: MeasurementEntry[] = [];
-        const url = makeUrl(API_MEASUREMENTS_ENTRY_PATH, { query: { category: category.id, ...filtersetQueryEntries } });
+        const url = makeUrl(API_MEASUREMENTS_ENTRY_PATH, {
+            query: {
+                category: category.id,
+                limit: API_MAX_PAGE_SIZE,
+                ...filtersetQueryEntries,
+            }
+        });
 
         // Collect all pages of entries
         for await (const page of fetchPaginated(url, makeHeader())) {

package/src/services/video.test.ts

@@ -11,17 +11,17 @@ describe("Exercise video service API tests", () => {
             id: 1,
             uuid: "b1c934fa-c4f8-4d84-8cb4-7802be0d284c",
             exercise: 258,
-            exercise_uuid: "6260e3aa-e46b-4b4b-8ada-58bfd0922d3a",
+            "exercise_uuid": "6260e3aa-e46b-4b4b-8ada-58bfd0922d3a",
             video: "http://localhost:8000/media/exercise-video/258/b1c934fa-c4f8-4d84-8cb4-7802be0d284c.mp4",
-            is_main: false,
+            "is_main": false,
             size: 0,
             duration: "0.00",
             width: 0,
             height: 0,
             codec: "",
-            codec_long: "",
+            "codec_long": "",
             license: 2,
-            license_author: null,
+            "license_author": null,
         };
 
         const video = new ExerciseVideo(

package/src/tests/exerciseTestdata.ts

@@ -46,16 +46,16 @@ export const testEquipment = [
     testEquipmentRocks,
 ];
 
-export const testExerciseSquats = new Exercise(
-    345,
-    "c788d643-150a-4ac7-97ef-84643c6419bf",
-    testCategoryLegs,
-    [testEquipmentBarbell, testEquipmentRocks],
-    [testMuscleBiggus, testMuscleRectusAbdominis],
-    [],
-    [],
-    null,
-    [
+export const testExerciseSquats = new Exercise({
+    id: 345,
+    uuid: "c788d643-150a-4ac7-97ef-84643c6419bf",
+    category: testCategoryLegs,
+    equipment: [testEquipmentBarbell, testEquipmentRocks],
+    muscles: [testMuscleBiggus, testMuscleRectusAbdominis],
+    musclesSecondary: [],
+    images: [],
+    variationId: null,
+    translations: [
         new Translation(111,
             '583281c7-2362-48e7-95d5-8fd6c455e0fb',
             'Squats',
@@ -74,18 +74,18 @@ export const testExerciseSquats = new Exercise(
             ]
         )
     ]
-);
+});
 
-export const testExerciseBenchPress = new Exercise(
-    2,
-    "abcdef-150a-4ac7-97ef-84643c6419bf",
-    testCategoryLegs,
-    [testEquipmentBarbell, testEquipmentRocks],
-    [testMuscleDacttilaris, testMuscleDeltoid],
-    [],
-    [],
-    1,
-    [
+export const testExerciseBenchPress = new Exercise({
+    id: 2,
+    uuid: "abcdef-150a-4ac7-97ef-84643c6419bf",
+    category: testCategoryLegs,
+    equipment: [testEquipmentBarbell, testEquipmentRocks],
+    muscles: [testMuscleDacttilaris, testMuscleDeltoid],
+    musclesSecondary: [],
+    images: [],
+    variationId: 1,
+    translations: [
         new Translation(111,
             '583281c7-2362-48e7-95d5-8fd6c455e0fb',
             'Benchpress',
@@ -93,17 +93,19 @@ export const testExerciseBenchPress = new Exercise(
             2
         ),
     ]
-);
-export const testExerciseCurls = new Exercise(
-    3,
-    "abcdef-150a-4ac7-97ef-84643c6419bf",
-    testCategoryArms,
-    [testEquipmentDumbbell],
-    [testMuscleBiggus, testMuscleDacttilaris],
-    [],
-    [],
-    1,
-    [
+});
+
+export const testExerciseCurls = new Exercise({
+    id: 3,
+    uuid: "abcdef-150a-4ac7-97ef-84643c6419bf",
+    lastUpdateGlobal: new Date(),
+    category: testCategoryArms,
+    equipment: [testEquipmentDumbbell],
+    muscles: [testMuscleBiggus, testMuscleDacttilaris],
+    musclesSecondary: [],
+    images: [],
+    variationId: 1,
+    translations: [
         new Translation(111,
             '583281c7-2362-48e7-95d5-8fd6c455e0fb',
             'Curls',
@@ -111,17 +113,19 @@ export const testExerciseCurls = new Exercise(
             2
         ),
     ]
-);
-export const testExerciseCrunches = new Exercise(
-    4,
-    "abcdef-150a-4ac7-97ef-84643c6419bf",
-    testCategoryChest,
-    [testEquipmentRocks],
-    [testMuscleDeltoid],
-    [],
-    [],
-    null,
-    [
+});
+
+export const testExerciseCrunches = new Exercise({
+    id: 4,
+    uuid: "abcdef-150a-4ac7-97ef-84643c6419bf",
+    lastUpdateGlobal: new Date(),
+    category: testCategoryChest,
+    equipment: [testEquipmentRocks],
+    muscles: [testMuscleDeltoid],
+    musclesSecondary: [],
+    images: [],
+    variationId: null,
+    translations: [
         new Translation(111,
             '583281c7-2362-48e7-95d5-8fd6c455e0fb',
             'Crunches',
@@ -129,17 +133,19 @@ export const testExerciseCrunches = new Exercise(
             2
         ),
     ]
-);
-export const testExerciseSkullCrusher = new Exercise(
-    5,
-    "abcdef-150a-4ac7-97ef-84643c6419bf",
-    testCategoryArms,
-    [testEquipmentBarbell],
-    [testMuscleRectusAbdominis],
-    [],
-    [],
-    2,
-    [
+});
+
+export const testExerciseSkullCrusher = new Exercise({
+    id: 5,
+    uuid: "abcdef-150a-4ac7-97ef-84643c6419bf",
+    lastUpdateGlobal: new Date(),
+    category: testCategoryArms,
+    equipment: [testEquipmentBarbell],
+    muscles: [testMuscleRectusAbdominis],
+    musclesSecondary: [],
+    images: [],
+    variationId: 2,
+    translations: [
         new Translation(111,
             '583281c7-2362-48e7-95d5-8fd6c455e0fb',
             'Skull crusher',
@@ -147,7 +153,7 @@ export const testExerciseSkullCrusher = new Exercise(
             2
         ),
     ]
-);
+});
 
 export const testExercises = [
     testExerciseSquats,

package/src/tests/exercises/searchResponse.ts

@@ -1,18 +1,19 @@
-import { Exercise } from "components/Exercises/models/exercise";
 import { Category } from "components/Exercises/models/category";
+import { Exercise } from "components/Exercises/models/exercise";
 import { Translation } from "components/Exercises/models/translation";
 
 export const searchResponse: Exercise[] = [
-    new Exercise(
-        998, // id
-        "uuid-998", // uuid
-        new Category(8, "Bauch"), // category
-        [], // equipment
-        [], // muscles
-        [], // musclesSecondary
-        [], // images
-        null, // variationId
-        [
+    new Exercise({
+        id: 998,
+        uuid: "uuid-998",
+        lastUpdateGlobal: new Date(),
+        category: new Category(8, "Bauch"),
+        equipment: [],
+        muscles: [],
+        musclesSecondary: [],
+        images: [],
+        variationId: null,
+        translations: [
             new Translation(
                 1149, // id
                 "uuid-1149", // uuid
@@ -20,20 +21,21 @@ export const searchResponse: Exercise[] = [
                 "", // description
                 1 // language (German)
             )
-        ], // translations
-        [], // videos
-        [] // authors
-    ),
-    new Exercise(
-        979, // id
-        "uuid-979", // uuid
-        new Category(11, "Brust"), // category
-        [], // equipment
-        [], // muscles
-        [], // musclesSecondary
-        [], // images
-        null, // variationId
-        [
+        ],
+        videos: [],
+        authors: []
+    }),
+    new Exercise({
+        id: 979,
+        uuid: "uuid-979",
+        lastUpdateGlobal: new Date(),
+        category: new Category(11, "Brust"),
+        equipment: [],
+        muscles: [],
+        musclesSecondary: [],
+        images: [],
+        variationId: null,
+        translations: [
             new Translation(
                 1213, // id
                 "uuid-1213", // uuid
@@ -41,8 +43,8 @@ export const searchResponse: Exercise[] = [
                 "", // description
                 1 // language (German)
             )
-        ], // translations
-        [], // videos
-        [] // authors
-    )
+        ],
+        videos: [],
+        authors: []
+    })
 ];