@wger-project/react-components 25.10.24 → 25.11.17

package/src/components/Nutrition/widgets/charts/NutritionDiaryChart.tsx

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { generateChartColors } from "utils/colors";
 import { numberLocale } from "utils/numbers";
 
@@ -50,46 +50,47 @@ export const NutritionDiaryChart = ({ showPlanned, planned, today, avg7Days }: N
     ];
 
     return (
-        <ResponsiveContainer width={"100%"} height={300}>
-            <BarChart
-                data={data}
-                margin={{
-                    top: 20,
-                    right: 30,
-                    left: 20,
-                    bottom: 5,
-                }}
-            >
-                <CartesianGrid strokeDasharray="3 4" />
-                <XAxis dataKey="name" />
-                <YAxis
-                    type="number"
-                    orientation="left"
-                    unit={t('nutrition.gramShort')}
-                />
-                <Tooltip formatter={(value: number) => numberLocale(value, i18n.language)} />
-                <Legend />
-                {showPlanned &&
-                    <Bar
-                        dataKey="planned"
-                        unit={t('nutrition.gramShort')}
-                        name={t('nutrition.planned')}
-                        fill={colorGenerator.next().value!}
-                    />
-                }
-                <Bar
-                    dataKey="today"
-                    unit={t('nutrition.gramShort')}
-                    name={t('nutrition.today')}
-                    fill={colorGenerator.next().value!}
-                />
+        <BarChart
+            data={data}
+            margin={{
+                top: 20,
+                right: 30,
+                left: 20,
+                bottom: 5,
+            }}
+            responsive
+            width={"100%"}
+            height={300}
+        >
+            <CartesianGrid strokeDasharray="3 4" />
+            <XAxis dataKey="name" />
+            <YAxis
+                type="number"
+                orientation="left"
+                unit={t('nutrition.gramShort')}
+            />
+            <Tooltip formatter={(value: number) => numberLocale(value, i18n.language)} />
+            <Legend />
+            {showPlanned &&
                 <Bar
-                    dataKey="avg7Days"
+                    dataKey="planned"
                     unit={t('nutrition.gramShort')}
-                    name={t('nutrition.7dayAvg')}
+                    name={t('nutrition.planned')}
                     fill={colorGenerator.next().value!}
                 />
-            </BarChart>
-        </ResponsiveContainer>
+            }
+            <Bar
+                dataKey="today"
+                unit={t('nutrition.gramShort')}
+                name={t('nutrition.today')}
+                fill={colorGenerator.next().value!}
+            />
+            <Bar
+                dataKey="avg7Days"
+                unit={t('nutrition.gramShort')}
+                name={t('nutrition.7dayAvg')}
+                fill={colorGenerator.next().value!}
+            />
+        </BarChart>
     );
 };

package/src/components/Nutrition/widgets/charts/NutritionalValuesDashboardChart.tsx

@@ -3,7 +3,7 @@ import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValue
 import { LinearPlannedLoggedChart } from "components/Nutrition/widgets/charts/LinearPlannedLoggedChart";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Cell, Pie, PieChart } from 'recharts';
 import { numberLocale } from "utils/numbers";
 
 
@@ -32,34 +32,32 @@ export const NutritionalValuesDashboardChart = (props: {
 
 
     return <Stack direction={'row'}>
-        <ResponsiveContainer width={'50%'} height={140}>
-            <PieChart>
-                <Pie
-                    // cx={0}
-                    // cy={'10'}
-                    height={100}
-                    data={data}
-                    startAngle={200}
-                    endAngle={-20}
-                    innerRadius={60}
-                    outerRadius={70}
-                    paddingAngle={2}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-                <g>
-                    <text x={'50%'} y={'45%'} fontSize="1.25em" textAnchor="middle">{/*fill="#333"*/}
-                        {t('nutrition.valueEnergyKcal', { value: numberLocale(energyDiff, i18n.language) })}
-                    </text>
-                    <text x={'50%'} y={'60%'} fontSize="1em" textAnchor="middle">
-                        {props.planned.energy > 0 && t(energyPercentage < 100 ? 'nutrition.valueRemaining' : 'nutrition.valueTooMany')}
-                    </text>
-                </g>
-            </PieChart>
-        </ResponsiveContainer>
+        <PieChart responsive width={'50%'} height={140}>
+            <Pie
+                // cx={0}
+                // cy={'10'}
+                height={100}
+                data={data}
+                startAngle={200}
+                endAngle={-20}
+                innerRadius={60}
+                outerRadius={70}
+                paddingAngle={2}
+                dataKey="value"
+            >
+                {data.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+            </Pie>
+            <g>
+                <text x={'50%'} y={'45%'} fontSize="1.25em" textAnchor="middle">{/*fill="#333"*/}
+                    {t('nutrition.valueEnergyKcal', { value: numberLocale(energyDiff, i18n.language) })}
+                </text>
+                <text x={'50%'} y={'60%'} fontSize="1em" textAnchor="middle">
+                    {props.planned.energy > 0 && t(energyPercentage < 100 ? 'nutrition.valueRemaining' : 'nutrition.valueTooMany')}
+                </text>
+            </g>
+        </PieChart>
         <Stack width={'50%'} spacing={1}>
             <LinearPlannedLoggedChart
                 title={t('nutrition.protein')}

package/src/components/Nutrition/widgets/charts/NutritionalValuesPlannedLoggedChart.tsx

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from 'react';
 import { useTranslation } from "react-i18next";
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 import { generateChartColors } from "utils/colors";
 
 
@@ -32,23 +32,24 @@ export const NutritionalValuesPlannedLoggedChart = (props: {
 
 
     return (
-        <ResponsiveContainer width={"100%"} height={150}>
-            <BarChart
-                data={data}
-                layout="vertical"
-                margin={{
-                    left: 60,
-                }}
-            >
-                <CartesianGrid strokeDasharray="3 4" />
-                <XAxis type={'number'} unit={'%'} />
-                <YAxis type={'category'} dataKey={'name'} />
-                <Bar
-                    dataKey="value"
-                    unit={'%'}
-                    fill={colorGenerator.next().value!}
-                />
-            </BarChart>
-        </ResponsiveContainer>
+        <BarChart
+            data={data}
+            layout="vertical"
+            margin={{
+                left: 60,
+            }}
+            responsive
+            width={"100%"}
+            height={150}
+        >
+            <CartesianGrid strokeDasharray="3 4" />
+            <XAxis type={'number'} unit={'%'} />
+            <YAxis type={'category'} dataKey={'name'} />
+            <Bar
+                dataKey="value"
+                unit={'%'}
+                fill={colorGenerator.next().value!}
+            />
+        </BarChart>
     );
 };

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

@@ -209,25 +209,23 @@ export const WorkoutStats = () => {
 
                 <Grid size={12}>
                     <Box width="100%" height={400}>
-                        <ResponsiveContainer width="100%" height="100%">
-                            <LineChart width={500} height={300}>
-                                <CartesianGrid strokeDasharray="3 3" />
-                                <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
-                                <YAxis dataKey="value" />
-                                <Tooltip
-                                    formatter={(value: number) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)} />
-                                <Legend
-                                    layout={"vertical"}
-                                    verticalAlign="middle"
-                                    align="right"
-                                    wrapperStyle={{ paddingLeft: "20px" }}
-                                />
-                                {chartData.map((s) => (
-                                    <Line dataKey="value" data={s.data} name={s.name} key={s.name}
-                                          stroke={colorGenerator.next()!.value!} />
-                                ))}
-                            </LineChart>
-                        </ResponsiveContainer>
+                        <LineChart width="100%" height="100%" responsive>
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <XAxis dataKey="category" type="category" allowDuplicatedCategory={false} />
+                            <YAxis dataKey="value" />
+                            <Tooltip
+                                formatter={(value: number) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)} />
+                            <Legend
+                                layout={"vertical"}
+                                verticalAlign="middle"
+                                align="right"
+                                wrapperStyle={{ paddingLeft: "20px" }}
+                            />
+                            {chartData.map((s) => (
+                                <Line dataKey="value" data={s.data} name={s.name} key={s.name}
+                                      stroke={colorGenerator.next()!.value!} />
+                            ))}
+                        </LineChart>
                     </Box>
                 </Grid>
 

package/src/components/WorkoutRoutines/widgets/DayDetails.tsx

@@ -24,6 +24,7 @@ import {
 import Grid from '@mui/material/Grid';
 import { LoadingPlaceholder, LoadingProgressIcon } from "components/Core/LoadingWidget/LoadingWidget";
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Exercise } from "components/Exercises/models/exercise";
 import { useProfileQuery } from "components/User/queries/profile";
 import { Day } from "components/WorkoutRoutines/models/Day";
 import { Slot } from "components/WorkoutRoutines/models/Slot";
@@ -43,7 +44,6 @@ import { SlotDetails } from "components/WorkoutRoutines/widgets/SlotDetails";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { ExerciseSearchResponse } from "services/responseType";
 import { SNACKBAR_AUTO_HIDE_DURATION, WEIGHT_UNIT_KG, WEIGHT_UNIT_LB } from "utils/consts";
 import { makeLink, WgerLink } from "utils/url";
 
@@ -381,13 +381,13 @@ export const DayDetails = (props: {
                                             && <Grid size={12}>
                                                 <Box height={20} />
                                                 <NameAutocompleter
-                                                    callback={(exercise: ExerciseSearchResponse | null) => {
+                                                    callback={(exercise: Exercise | null) => {
                                                         if (exercise === null) {
                                                             return;
                                                         }
                                                         addSlotEntryQuery.mutate(new SlotEntry({
                                                             slotId: slot.id!,
-                                                            exerciseId: exercise.data.base_id,
+                                                            exerciseId: exercise.id!,
                                                             type: 'normal',
                                                             order: slot.entries.length + 1,
                                                             weightUnitId: userProfileQuery.data!.useMetric ? WEIGHT_UNIT_KG : WEIGHT_UNIT_LB,

package/src/components/WorkoutRoutines/widgets/LogWidgets.tsx

@@ -27,7 +27,6 @@ import { useTranslation } from "react-i18next";
 import {
     CartesianGrid,
     Legend,
-    ResponsiveContainer,
     Scatter,
     ScatterChart,
     Tooltip,
@@ -292,43 +291,41 @@ export const TimeSeriesChart = (props: { data: WorkoutLog[] }) => {
 
     return (
         <Box>
-            <ResponsiveContainer width={"100%"} height={250}>
-                <ScatterChart>
-                    <XAxis
-                        dataKey="time"
-                        domain={["auto", "auto"]}
-                        name="Time"
-                        tickFormatter={unixTime => luxonDateTimeToLocale(DateTime.fromMillis(unixTime))}
-                        type="number"
-                    />
-                    <YAxis
-                        domain={["auto", "auto"]}
-                        dataKey="value"
-                        name="Value"
-                        unit="kg"
-                    />
-
-                    {Array.from(result).map(([key, value]) => {
-                            const color = colorGenerator.next().value!;
-                            const formattedData = formatData(value);
-
-                            return <Scatter
-                                key={key}
-                                data={formattedData}
-                                fill={color}
-                                line={{ stroke: color }}
-                                lineType="joint"
-                                lineJointType="monotoneX"
-                                name={key?.toString()}
-                            />;
-                        }
-                    )}
-
-                    <Tooltip content={<ExerciseLogTooltip />} />
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <Legend />
-                </ScatterChart>
-            </ResponsiveContainer>
+            <ScatterChart responsive width={"100%"} height={250}>
+                <XAxis
+                    dataKey="time"
+                    domain={["auto", "auto"]}
+                    name="Time"
+                    tickFormatter={unixTime => luxonDateTimeToLocale(DateTime.fromMillis(unixTime))}
+                    type="number"
+                />
+                <YAxis
+                    domain={["auto", "auto"]}
+                    dataKey="value"
+                    name="Value"
+                    unit="kg"
+                />
+
+                {Array.from(result).map(([key, value]) => {
+                        const color = colorGenerator.next().value!;
+                        const formattedData = formatData(value);
+
+                        return <Scatter
+                            key={key}
+                            data={formattedData}
+                            fill={color}
+                            line={{ stroke: color }}
+                            lineType="joint"
+                            lineJointType="monotoneX"
+                            name={key?.toString()}
+                        />;
+                    }
+                )}
+
+                <Tooltip content={<ExerciseLogTooltip />} />
+                <CartesianGrid strokeDasharray="3 3" />
+                <Legend />
+            </ScatterChart>
         </Box>
     );
 };

package/src/components/WorkoutRoutines/widgets/SlotDetails.tsx

@@ -4,6 +4,7 @@ import EditOffIcon from '@mui/icons-material/EditOff';
 import { Alert, AlertTitle, IconButton, Typography } from "@mui/material";
 import Grid from '@mui/material/Grid';
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Exercise } from "components/Exercises/models/exercise";
 import { useLanguageQuery } from "components/Exercises/queries";
 import { BaseConfig } from "components/WorkoutRoutines/models/BaseConfig";
 import { Slot } from "components/WorkoutRoutines/models/Slot";
@@ -21,7 +22,6 @@ import {
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { getLanguageByShortName } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
 
 /*
  * Converts a number to an alphabetic string, useful for counting
@@ -95,12 +95,12 @@ export const SlotEntryDetails = (props: {
 
     const isPending = editSlotEntryQuery.isPending || deleteSlotEntryQuery.isPending;
 
-    const handleExerciseChange = (searchResponse: ExerciseSearchResponse | null) => {
-        if (searchResponse === null) {
+    const handleExerciseChange = (exercise: Exercise | null) => {
+        if (exercise === null) {
             return;
         }
 
-        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { exerciseId: searchResponse.data.base_id }));
+        editSlotEntryQuery.mutate(SlotEntry.clone(props.slotEntry, { exerciseId: exercise.id! }));
         setEditExercise(false);
     };
 

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

@@ -6,6 +6,7 @@ import Grid from '@mui/material/Grid';
 import { WgerTextField } from "components/Common/forms/WgerTextField";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
+import { Exercise } from "components/Exercises/models/exercise";
 import { useLanguageQuery } from "components/Exercises/queries";
 import { RIR_VALUES_SELECT } from "components/WorkoutRoutines/models/BaseConfig";
 import { LogEntryForm } from "components/WorkoutRoutines/models/WorkoutLog";
@@ -15,7 +16,6 @@ import { DateTime } from "luxon";
 import React, { useState } from 'react';
 import { useTranslation } from "react-i18next";
 import { getLanguageByShortName } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
 import { REP_UNIT_REPETITIONS, SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
 import * as yup from "yup";
 
@@ -96,11 +96,11 @@ export const SessionLogsForm = ({ dayId, routineId, selectedDate }: SessionLogsF
         setSnackbarOpen(true);
     };
 
-    const handleCallback = async (exerciseResponse: ExerciseSearchResponse | null, formik: FormikProps<{
+    const handleCallback = async (exercise: Exercise | null, formik: FormikProps<{
         logs: LogEntryForm[]
     }>) => {
 
-        if (exerciseResponse === null) {
+        if (exercise === null) {
             return;
         }
 
@@ -115,7 +115,7 @@ export const SessionLogsForm = ({ dayId, routineId, selectedDate }: SessionLogsF
                     repetitionsTarget: '',
                     rir: '',
                     rirTarget: '',
-                    exercise: exerciseResponse.exercise!,
+                    exercise: exercise,
                 };
             }
             return log;

package/src/services/exerciseTranslation.ts

@@ -1,12 +1,12 @@
 import axios from 'axios';
+import { Exercise, ExerciseAdapter } from "components/Exercises/models/exercise";
 import { Translation, TranslationAdapter } from "components/Exercises/models/translation";
 import { ENGLISH_LANGUAGE_CODE, LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 import { makeHeader, makeUrl } from "utils/url";
-import { ExerciseSearchResponse, ExerciseSearchType, ResponseType } from "./responseType";
+import { ResponseType } from "./responseType";
 
 export const EXERCISE_PATH = 'exercise';
 export const EXERCISE_TRANSLATION_PATH = 'exercise-translation';
-export const EXERCISE_SEARCH_PATH = 'exercise/search';
 
 
 /*
@@ -15,7 +15,7 @@ export const EXERCISE_SEARCH_PATH = 'exercise/search';
 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<any>>(url, {
+    const { data } = await axios.get<ResponseType<Translation>>(url, {
         headers: makeHeader(),
     });
     const adapter = new TranslationAdapter();
@@ -24,19 +24,34 @@ export const getExerciseTranslations = async (id: number): Promise<Translation[]
 
 
 /*
- * Fetch all exercise translations for a given exercise base
+ * Search for exercises by name using the exerciseinfo endpoint
  */
-export const searchExerciseTranslations = async (name: string, languageCode: string = ENGLISH_LANGUAGE_CODE, searchEnglish: boolean = true,): Promise<ExerciseSearchResponse[]> => {
+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);
     }
 
+    const url = makeUrl('exerciseinfo', {
+        query: {
+            name__search: name,
+            language__code: languages.join(','),
+            limit: 50,
+        }
+    });
 
-    const url = makeUrl(EXERCISE_SEARCH_PATH, { query: { term: name, language: languages.join(',') } });
-
-    const { data } = await axios.get<ExerciseSearchType>(url);
-    return data.suggestions;
+    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 {
+        return [];
+    }
 };
 
 

package/src/services/responseType.ts

@@ -1,35 +1,9 @@
-import { Exercise } from "components/Exercises/models/exercise";
-
+/*
+ * Generic paginated response from the wger API
+ */
 export interface ResponseType<T> {
     count: number,
     next: number | null,
     previous: number | null,
     results: T[]
 }
-
-export interface ExerciseSearchResponse {
-    value: string,
-    data: {
-        id: number,
-        base_id: number,
-        name: string,
-        category: string,
-        image: string | null,
-        image_thumbnail: string | null,
-    },
-    exercise?: Exercise
-}
-
-export interface ExerciseSearchType {
-    suggestions: ExerciseSearchResponse[];
-}
-
-export interface IngredientSearchResponse {
-    value: string,
-    data: {
-        id: number,
-        name: string,
-        image: string | null,
-        image_thumbnail: string | null,
-    }
-}

package/src/tests/exercises/searchResponse.ts

@@ -1,23 +1,48 @@
-export const searchResponse = [
-    {
-        "value": "Crunches an Negativbank",
-        "data": {
-            "id": 1149,
-            "base_id": 998,
-            "name": "Crunches an Negativbank",
-            "category": "Bauch",
-            "image": null,
-            "image_thumbnail": null
-        }
-    }, {
-        "value": "Crunches am Seil",
-        "data": {
-            "id": 1213,
-            "base_id": 979,
-            "name": "Crunches am Seil",
-            "category": "Brust",
-            "image": null,
-            "image_thumbnail": null
-        }
-    }
+import { Exercise } from "components/Exercises/models/exercise";
+import { Category } from "components/Exercises/models/category";
+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 Translation(
+                1149, // id
+                "uuid-1149", // uuid
+                "Crunches an Negativbank", // name
+                "", // 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
+        [
+            new Translation(
+                1213, // id
+                "uuid-1213", // uuid
+                "Crunches am Seil", // name
+                "", // description
+                1 // language (German)
+            )
+        ], // translations
+        [], // videos
+        [] // authors
+    )
 ];