@wger-project/react-components 25.10.24 → 25.11.22

package/src/components/Exercises/Filter/NameAutcompleter.tsx

@@ -12,25 +12,25 @@ import {
     Switch,
     TextField,
 } from "@mui/material";
+import { Exercise } from "components/Exercises/models/exercise";
 import { SERVER_URL } from "config";
 import debounce from "lodash/debounce";
 import * as React from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { getExercise, searchExerciseTranslations } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
+import { searchExerciseTranslations } from "services";
 import { LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 
 type NameAutocompleterProps = {
-    callback: (exerciseResponse: ExerciseSearchResponse | null) => void;
+    callback: (exercise: Exercise | null) => void;
     loadExercise?: boolean;
 };
 
 export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterProps) {
-    const [value, setValue] = React.useState<ExerciseSearchResponse | null>(null);
+    const [value, setValue] = React.useState<Exercise | null>(null);
     const [inputValue, setInputValue] = React.useState("");
     const [searchEnglish, setSearchEnglish] = useState<boolean>(true);
-    const [options, setOptions] = React.useState<readonly ExerciseSearchResponse[]>([]);
+    const [options, setOptions] = React.useState<readonly Exercise[]>([]);
     const [t, i18n] = useTranslation();
 
     loadExercise = loadExercise === undefined ? false : loadExercise;
@@ -61,7 +61,7 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
         <>
             <Autocomplete
                 id="exercise-name-autocomplete"
-                getOptionLabel={(option) => option.value}
+                getOptionLabel={(option) => option.getTranslation().name}
                 data-testid="autocomplete"
                 filterOptions={(x) => x}
                 options={options}
@@ -70,13 +70,10 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
                 filterSelectedOptions
                 value={value}
                 noOptionsText={t("noResults")}
-                isOptionEqualToValue={(option, value) => option.value === value.value}
-                onChange={async (event: React.SyntheticEvent, newValue: ExerciseSearchResponse | null) => {
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                onChange={async (event: React.SyntheticEvent, newValue: Exercise | null) => {
                     setOptions(newValue ? [newValue, ...options] : options);
                     setValue(newValue);
-                    if (loadExercise && newValue !== null) {
-                        newValue.exercise = await getExercise(newValue.data.base_id);
-                    }
                     callback(newValue);
                 }}
                 onInputChange={(event, newInputValue) => {
@@ -102,34 +99,39 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
                         }}
                     />
                 )}
-                renderOption={(props, option, state) => (
-                    <li
-                        {...props}
-                        key={`exercise-${state.index}-${option.data.id}`}
-                        data-testid={`autocompleter-result-${option.data.base_id}`}
-                    >
-                        <ListItem disablePadding component="div">
-                            <ListItemIcon>
-                                {option.data.image ? (
-                                    <Avatar alt="" src={`${SERVER_URL}${option.data.image}`} variant="rounded" />
-                                ) : (
-                                    <PhotoIcon fontSize="large" />
-                                )}
-                            </ListItemIcon>
-                            <ListItemText
-                                primary={option.value}
-                                slotProps={{
-                                    primary: {
-                                        whiteSpace: "nowrap",
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                    },
-                                }}
-                                secondary={option.data.category}
-                            />
-                        </ListItem>
-                    </li>
-                )}
+                renderOption={(props, option, state) => {
+                    const translation = option.getTranslation();
+                    const mainImage = option.mainImage;
+                    
+                    return (
+                        <li
+                            {...props}
+                            key={`exercise-${state.index}-${option.id}`}
+                            data-testid={`autocompleter-result-${option.id}`}
+                        >
+                            <ListItem disablePadding component="div">
+                                <ListItemIcon>
+                                    {mainImage ? (
+                                        <Avatar alt="" src={`${SERVER_URL}${mainImage.url}`} variant="rounded" />
+                                    ) : (
+                                        <PhotoIcon fontSize="large" />
+                                    )}
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={translation.name}
+                                    slotProps={{
+                                        primary: {
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        },
+                                    }}
+                                    secondary={option.category.name}
+                                />
+                            </ListItem>
+                        </li>
+                    );
+                }}
             />
             {i18n.language !== LANGUAGE_SHORT_ENGLISH && (
                 <FormGroup>

package/src/components/Exercises/Filter/NameAutocompleter.test.tsx

@@ -3,6 +3,7 @@ import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter"
 import React from 'react';
 import { searchExerciseTranslations } from "services";
 import { searchResponse } from "tests/exercises/searchResponse";
+import { Exercise } from "components/Exercises/models/exercise"; 
 
 jest.mock("services");
 const mockCallback = jest.fn();
@@ -71,6 +72,6 @@ describe("Test the NameAutocompleter component", () => {
         });
 
         // Assert
-        expect(mockCallback).toHaveBeenLastCalledWith(searchResponse[0]);
+        expect(mockCallback).toHaveBeenCalledWith(expect.any(Exercise));
     });
 });

package/src/components/Exercises/Overview/ExerciseGrid.tsx

@@ -15,8 +15,7 @@ export const ExerciseGrid = ({ exercises }: ExerciseGridProps) => {
 
     const languageQuery = useLanguageQuery();
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [t, i18n] = useTranslation();
+    const { i18n } = useTranslation();
 
     let currentUserLanguage: Language | undefined;
     if (languageQuery.isSuccess) {

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

@@ -1,37 +1,94 @@
-import { Autocomplete, Chip, TextField } from "@mui/material";
+import { Autocomplete, Chip, InputAdornment, TextField } from "@mui/material";
 import { useField } from "formik";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
+type AliasItem = { id?: number; alias: string };
+
 export function ExerciseAliases(props: { fieldName: string }) {
     const [t] = useTranslation();
-    const [field, meta, helpers] = useField(props.fieldName);
+    const [field, meta, helpers] = useField<AliasItem[]>(props.fieldName);
+
+    const normalize = (items: (AliasItem | string)[] | null | undefined): AliasItem[] =>
+        (items || []).map(item =>
+            typeof item === "string" ? { alias: item } : ("alias" in item ? (item as AliasItem) : { alias: String(item) })
+        );
+
+    /**
+     * Extract a human-readable error string from the Yup alias validator, which
+     * returns a list of errors.
+     */
+    const formatError = (err: unknown): string | undefined => {
+        if (!err) return undefined;
+        if (typeof err === "string") return err;
+
+        if (typeof err === "object") {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const o = err as any;
+            if (typeof o.alias === "string") return o.alias;
+            if (typeof o.message === "string") return o.message;
+
+            for (const k of Object.keys(o)) {
+                const v = o[k];
+                if (typeof v === "string") return v;
+                if (v && typeof v === "object") {
+                    if (typeof v.alias === "string") return v.alias;
+                    if (typeof v.message === "string") return v.message;
+                }
+            }
+        }
+
+        return String(err);
+    };
 
     return <Autocomplete
         multiple
         freeSolo
         id={props.fieldName}
-        value={field.value}
-        options={field.value}
-        onChange={(event, newValue) => {
-            helpers.setValue(newValue);
+        value={field.value || []}
+        options={[]}
+        getOptionLabel={(opt) => (typeof opt === "string" ? opt : opt.alias)}
+        isOptionEqualToValue={(option, value) => option.alias === value.alias && (option.id === value.id || option.id === undefined || value.id === undefined)}
+        onChange={(_, newValue) => {
+            helpers.setValue(normalize(newValue));
         }}
-        renderValue={(value: readonly string[], getTagProps) => {
-            return value.map((option: string, index: number) => (
-                <Chip label={option} {...getTagProps({ index })} key={index} />
+        onBlur={field.onBlur}
+        renderInput={(params) => {
+            const chips = (field.value || []).map((option, index) => (
+                <Chip
+                    label={option.alias}
+                    onDelete={() => {
+                        const newVal = [...(field.value || [])];
+                        newVal.splice(index, 1);
+                        helpers.setValue(newVal);
+                    }}
+                    key={option.id ?? `${option.alias}-${index}`}
+                />
             ));
+
+            return (
+                <TextField
+                    {...params}
+                    id="exerciseAliases"
+                    variant="standard"
+                    label={t("exercises.alternativeNames")}
+                    error={meta.touched && Boolean(meta.error)}
+                    helperText={meta.touched ? formatError(meta.error) : undefined}
+                    slotProps={{
+                        input: {
+                            startAdornment: (
+                                <InputAdornment
+                                    position="start"
+                                    sx={{ display: "flex", gap: 0.5, alignItems: "center" }}
+                                >
+                                    {chips}
+                                    {/*{params.InputProps?.startAdornment}*/}
+                                </InputAdornment>
+                            ),
+                        },
+                    }}
+                />
+            );
         }}
-        onBlur={field.onBlur}
-        renderInput={params => (
-            <TextField
-                {...params}
-                id="exerciseAliases"
-                variant="standard"
-                label={t("exercises.alternativeNames")}
-                error={meta.touched && Boolean(meta.error)}
-                helperText={meta.touched && meta.error}
-                value={field.value}
-            />
-        )}
     />;
 }

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

@@ -20,10 +20,13 @@ export const alternativeNameValidator = () => yup
     .ensure()
     .compact()
     .of(
-        yup
-            .string()
-            .min(MIN_CHAR_NAME, i18n.t("forms.minLength", { 'chars': MIN_CHAR_NAME }))
-            .max(MAX_CHAR_NAME, i18n.t("forms.maxLength", { 'chars': MAX_CHAR_NAME }))
+        yup.object({
+            id: yup.number().nullable(),
+            alias: yup.string()
+                .min(MIN_CHAR_NAME, i18n.t("forms.minLength", { 'chars': MIN_CHAR_NAME }))
+                .max(MAX_CHAR_NAME, i18n.t("forms.maxLength", { 'chars': MAX_CHAR_NAME }))
+                .required()
+        })
     );
 
 export const descriptionValidator = () => yup

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

@@ -8,42 +8,53 @@ import { ExerciseVideo, ExerciseVideoAdapter } from "components/Exercises/models
 import { Adapter } from "utils/Adapter";
 import { ENGLISH_LANGUAGE_ID } from "utils/consts";
 
+export type ExerciseConstructorParams = {
+    id: number | null;
+    uuid: string | null;
+    category: Category;
+    equipment?: Equipment[];
+    muscles?: Muscle[];
+    musclesSecondary?: Muscle[];
+    images?: ExerciseImage[];
+    variationId?: number | null;
+    lastUpdateGlobal?: Date;
+    translations?: Translation[];
+    videos?: ExerciseVideo[];
+    authors?: string[];
+};
+
 export class Exercise {
-    translations: Translation[] = [];
+    id: number | null;
+    uuid: string | null;
+    variationId: number | null;
+    category: Category;
+    lastUpdateGlobal: Date;
+
+    muscles: Muscle[] = [];
+    musclesSecondary: Muscle[] = [];
+    images: ExerciseImage[] = [];
     videos: ExerciseVideo[] = [];
+    equipment: Equipment[] = [];
     authors: string[] = [];
+    translations: Translation[] = [];
 
-    constructor(
-        public id: number | null,
-        public uuid: string | null,
-        public category: Category,
-        public equipment: Equipment[],
-        public muscles: Muscle[],
-        public musclesSecondary: Muscle[],
-        public images: ExerciseImage[],
-        public variationId: number | null,
-        translations?: Translation[],
-        videos?: ExerciseVideo[],
-        authors?: string[]
-        /*
-            license: number,
-            licenseAuthorS: string[],
-         */
-    ) {
-        if (translations) {
-            this.translations = translations;
-        }
-
-        if (videos) {
-            this.videos = videos;
-        }
-
-        if (authors) {
-            this.authors = authors;
-        }
+    constructor(init: ExerciseConstructorParams) {
+        this.id = init.id;
+        this.uuid = init.uuid;
+        this.category = init.category;
+        this.variationId = init.variationId ?? null;
+        this.lastUpdateGlobal = init.lastUpdateGlobal ?? new Date();
+
+        this.muscles = init.muscles ?? [];
+        this.musclesSecondary = init.musclesSecondary ?? [];
+        this.images = init.images ?? [];
+        this.videos = init.videos ?? [];
+        this.equipment = init.equipment ?? [];
+        this.authors = init.authors ?? [];
+        this.translations = init.translations ?? [];
     }
 
-    // Returns the users translation or english as a fallback
+    // Returns the users' translation or English as a fallback
     //
     // Note that we still check for the case that no english translation can be
     // found. While this can't happen for the "regular" wger server, other local
@@ -97,25 +108,26 @@ export class ExerciseAdapter implements Adapter<Exercise> {
         const translationAdapter = new TranslationAdapter();
         const videoAdapter = new ExerciseVideoAdapter();
 
-        const exercise = new Exercise(
-            item.id,
-            item.uuid,
-            categoryAdapter.fromJson(item.category),
+        const exercise = new Exercise({
+            id: item.id,
+            uuid: item.uuid,
+            category: categoryAdapter.fromJson(item.category),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.equipment.map((e: any) => (equipmentAdapter.fromJson(e))),
+            equipment: item.equipment.map((e: any) => equipmentAdapter.fromJson(e)),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.muscles.map((m: any) => (muscleAdapter.fromJson(m))),
+            muscles: item.muscles.map((m: any) => muscleAdapter.fromJson(m)),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.muscles_secondary.map((m: any) => (muscleAdapter.fromJson(m))),
+            musclesSecondary: item.muscles_secondary.map((m: any) => muscleAdapter.fromJson(m)),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.images.map((i: any) => (imageAdapter.fromJson(i))),
-            item.variations,
+            images: item.images.map((i: any) => imageAdapter.fromJson(i)),
+            variationId: item.variations,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.translations.map((t: any) => translationAdapter.fromJson(t)),
+            translations: item.translations.map((t: any) => translationAdapter.fromJson(t)),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            item.videos.map((t: any) => videoAdapter.fromJson(t)),
-            item.author_history
-        );
+            videos: item.videos.map((t: any) => videoAdapter.fromJson(t)),
+            authors: item.total_authors_history,
+            lastUpdateGlobal: new Date(item.last_update_global),
+        });
 
         if (!exercise.translations.some(t => t.language === ENGLISH_LANGUAGE_ID)) {
             console.info(`No english translation found for exercise base ${exercise.uuid}!`);

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

@@ -52,15 +52,17 @@ describe("Test the MeasurementCategoryDetail component", () => {
             </QueryClientProvider>
         );
 
+        screen.logTestingPlaygroundURL();
+
         // Assert
         expect(useMeasurementsQuery).toHaveBeenCalled();
         expect(screen.getByText('Biceps')).toBeInTheDocument();
 
-        expect(screen.getByText('10cm')).toBeInTheDocument();
+        expect(screen.getByRole('gridcell', { name: /10cm/i })).toBeInTheDocument();
         expect(screen.getByText(/Feb 1, 2023/i)).toBeInTheDocument();
         expect(screen.getByText('test note')).toBeInTheDocument();
 
-        expect(screen.getByText('20cm')).toBeInTheDocument();
+        expect(screen.getByRole('gridcell', { name: /20cm/i })).toBeInTheDocument();
         expect(screen.getByText(/Feb 2, 2023/i)).toBeInTheDocument();
         expect(screen.getByText('important note')).toBeInTheDocument();
     });

package/src/components/Measurements/widgets/MeasurementChart.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { MeasurementCategory } from "components/Measurements/models/Category";
 import React from "react";
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import { theme } from "theme";
 import { dateToLocale } from "utils/date";
 
@@ -19,34 +19,31 @@ export const MeasurementChart = (props: { category: MeasurementCategory }) => {
 
 
     return <Box alignItems={'center'} display={'flex'} flexDirection={'column'}>
-        <ResponsiveContainer width="90%" height={200}>
-
-            <LineChart data={entryData}>
-                <Line
-                    type="monotone"
-                    dataKey="value"
-                    stroke={theme.palette.secondary.main}
-                    strokeWidth={2}
-                    dot={entryData.length > NR_OF_ENTRIES_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
-                    activeDot={{
-                        stroke: 'black',
-                        strokeWidth: 1,
-                        r: 6,
-                        //onClick: handleClick
-                    }} />
-                <CartesianGrid
-                    stroke="#ccc"
-                    strokeDasharray="5 5" />
-                <XAxis
-                    dataKey="date"
-                    type={'number'}
-                    domain={['dataMin', 'dataMax']}
-                    tickFormatter={timeStr => dateToLocale(new Date(timeStr))!}
-                    tickCount={10}
-                />
-                <YAxis domain={['auto', 'auto']} unit={props.category.unit} />
-                {/*<Tooltip content={<CustomTooltip />} />*/}
-            </LineChart>
-        </ResponsiveContainer>
+        <LineChart data={entryData} responsive width="90%" height={200}>
+            <Line
+                type="monotone"
+                dataKey="value"
+                stroke={theme.palette.secondary.main}
+                strokeWidth={2}
+                dot={entryData.length > NR_OF_ENTRIES_CHART_DOT ? false : { strokeWidth: 1, r: 4 }}
+                activeDot={{
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    r: 6,
+                    //onClick: handleClick
+                }} />
+            <CartesianGrid
+                stroke="#ccc"
+                strokeDasharray="5 5" />
+            <XAxis
+                dataKey="date"
+                type={'number'}
+                domain={['dataMin', 'dataMax']}
+                tickFormatter={timeStr => dateToLocale(new Date(timeStr))!}
+                tickCount={10}
+            />
+            <YAxis domain={['auto', 'auto']} unit={props.category.unit} />
+            {/*<Tooltip content={<CustomTooltip />} />*/}
+        </LineChart>
     </Box>;
 };

package/src/components/Nutrition/components/BmiCalculator.tsx

@@ -6,7 +6,7 @@ import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
 import { useProfileQuery } from "components/User/queries/profile";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Area, AreaChart, CartesianGrid, ReferenceDot, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Area, AreaChart, CartesianGrid, ReferenceDot, Tooltip, XAxis, YAxis, } from "recharts";
 
 const bmiRanges = [
     { range: "obese", color: "#FF5733", min: 30, max: 100 },
@@ -128,48 +128,46 @@ export const BmiCalculator = () => {
                         {t('bmi.result', { value: bmi.toFixed(1) })}
                     </Typography>
                     }
-                    <ResponsiveContainer width="100%" height={400}>
-                        <AreaChart data={chartData}>
-                            <XAxis
-                                dataKey="height"
-                                type="number"
-                                domain={[140, 220]}
-                                unit="cm"
-                            />
-                            <YAxis
-                                domain={[40, 150]}
-                                tickFormatter={(value) => Math.round(value).toString()} // Format as integers
-                                unit="kg"
+                    <AreaChart data={chartData} responsive width="100%" height={400}>
+                        <XAxis
+                            dataKey="height"
+                            type="number"
+                            domain={[140, 220]}
+                            unit="cm"
+                        />
+                        <YAxis
+                            domain={[40, 150]}
+                            tickFormatter={(value) => Math.round(value).toString()} // Format as integers
+                            unit="kg"
+                        />
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <Tooltip
+                            // @ts-ignore
+                            formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
+                        />
+
+                        {bmiRanges.map((range) => (
+                            <Area
+                                key={range.range}
+                                type="monotone"
+                                dataKey={range.range}
+                                stroke={"black"}
+                                // stroke={range.color}
+                                fill={range.color}
+                                fillOpacity={0.8}
                             />
-                            <CartesianGrid strokeDasharray="3 3" />
-                            <Tooltip
-                                // @ts-ignore
-                                formatter={(value, name) => [Math.round(value as number), t('bmi.' + (name as string))]}
-                            />
-
-                            {bmiRanges.map((range) => (
-                                <Area
-                                    key={range.range}
-                                    type="monotone"
-                                    dataKey={range.range}
-                                    stroke={"black"}
-                                    // stroke={range.color}
-                                    fill={range.color}
-                                    fillOpacity={0.8}
-                                />
-                            ))}
-
-                            {bmi !== null &&
-                                <ReferenceDot
-                                    x={height!}
-                                    y={weight!}
-                                    r={8}
-                                    fill="black"
-                                    stroke="none"
-                                />}
-
-                        </AreaChart>
-                    </ResponsiveContainer>
+                        ))}
+
+                        {bmi !== null &&
+                            <ReferenceDot
+                                x={height!}
+                                y={weight!}
+                                r={8}
+                                fill="black"
+                                stroke="none"
+                            />}
+
+                    </AreaChart>
                     <Stack direction={"row"} justifyContent="center">
                         <Box
                             height={20}

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

@@ -1,7 +1,7 @@
 import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Cell, Legend, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { Cell, Legend, Pie, PieChart } from 'recharts';
 import { generateChartColors } from "utils/colors";
 import { numberGramLocale } from "utils/numbers";
 
@@ -45,22 +45,20 @@ export const MacrosPieChart = (props: { data: NutritionalValues }) => {
     };
 
 
-    return <ResponsiveContainer width={"100%"} height={300}>
-        <PieChart>
-            <Pie
-                data={data}
-                labelLine={false}
-                // outerRadius={80}
-                label={renderCustomizedLabel}
-                fill="#8884d8"
-                dataKey="value"
-            >
-                {data.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
-                ))}
-            </Pie>
-            {/*<Tooltip />*/}
-            <Legend />
-        </PieChart>
-    </ResponsiveContainer>;
+    return <PieChart responsive width={"100%"} height={300}>
+        <Pie
+            data={data}
+            labelLine={false}
+            // outerRadius={80}
+            label={renderCustomizedLabel}
+            fill="#8884d8"
+            dataKey="value"
+        >
+            {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
+            ))}
+        </Pie>
+        {/*<Tooltip />*/}
+        <Legend />
+    </PieChart>;
 };