@wger-project/react-components 25.11.17 → 25.11.22

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "25.11.17",
+  "version": "25.11.22",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {
@@ -39,7 +39,7 @@
     "luxon": "^3.7.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-i18next": "^16.0.0",
+    "react-i18next": "^16.3.3",
     "react-is": "^19.2.0",
     "react-responsive": "^10.0.1",
     "react-router-dom": "^7.9.4",

package/src/components/Exercises/Add/Step1Basics.test.tsx

@@ -127,7 +127,10 @@ describe("<Step1Basics />", () => {
         expect(setSecondaryMuscles).toHaveBeenNthCalledWith(2, [4]);
         expect(setNameEn).toHaveBeenCalledWith('Biceps enlarger');
         expect(setCategory).toHaveBeenCalledWith(1);
-        expect(setAlternativeNamesEn).toHaveBeenCalledWith(['Biceps enlarger 2000', 'Arms exploder']);
+        expect(setAlternativeNamesEn).toHaveBeenCalledWith([
+            { 'alias': 'Biceps enlarger 2000' },
+            { 'alias': 'Arms exploder' }
+        ]);
         expect(setEquipment).toHaveBeenCalledWith([42]);
     });
 });

package/src/components/Exercises/Detail/ExerciseDetailEdit.tsx

@@ -67,7 +67,17 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
     }, [exerciseQuery.data]);
 
 
-    if (exerciseQuery.isLoading || musclesQuery.isLoading || exerciseQuery.isLoading || profileQuery.isLoading || addImagePermissionQuery.isLoading || deleteImagePermissionQuery.isLoading || addVideoPermissionQuery.isLoading || deleteVideoPermissionQuery.isLoading || editExercisePermissionQuery.isLoading) {
+    if (
+        exerciseQuery.isLoading
+        || musclesQuery.isLoading
+        || exerciseQuery.isLoading
+        || profileQuery.isLoading
+        || addImagePermissionQuery.isLoading
+        || deleteImagePermissionQuery.isLoading
+        || addVideoPermissionQuery.isLoading
+        || deleteVideoPermissionQuery.isLoading
+        || editExercisePermissionQuery.isLoading
+    ) {
         return <LoadingWidget />;
     }
 
@@ -89,7 +99,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
         <Formik
             initialValues={{
                 name: exerciseTranslation.name,
-                alternativeNames: exerciseTranslation.aliases.map(a => a.alias),
+                alternativeNames: exerciseTranslation.aliases.map(a => ({ id: a.id, alias: a.alias })),
                 description: exerciseTranslation.description,
             }}
             enableReinitialize
@@ -114,24 +124,24 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                         author: profileQuery.data!.username
                     });
 
-                // Edit aliases (this is currently really hacky)
-                // Since we only get the string from the form, we need to compare them to the list of
-                // current aliases and decide which stay the same and which will be updated (which we
-                // can't directly do, so the old one gets deleted and a new one created)
+                // Alias handling
+                const aliasOrig = (exerciseTranslation.aliases).map(a => ({ id: a.id, alias: a.alias }));
+                const aliasNew = values.alternativeNames ?? [];
 
-                // https://stackoverflow.com/questions/1187518/
-                const aliasOrig = exerciseTranslation.aliases.map(a => a.alias);
-                const aliasNew = values.alternativeNames;
-                const aliasToCreate = aliasNew.filter(x => !aliasOrig.includes(x));
-                const aliasToDelete = aliasOrig.filter(x => !aliasNew.includes(x));
+                const aliasToCreate = aliasNew.filter(n => !aliasOrig.some(o => o.alias === n.alias));
+                const aliasToDelete = aliasOrig.filter(o => !aliasNew.some(n => n.alias === o.alias));
 
-                aliasToCreate.forEach(alias => {
-                    postAlias(translation.id!, alias);
-                });
+                // Create new aliases
+                for (const a of aliasToCreate) {
+                    await postAlias(translation.id!, a.alias);
+                }
 
-                aliasToDelete.forEach(alias => {
-                    deleteAlias(exerciseTranslation.aliases.find(a => a.alias === alias)!.id);
-                });
+                // Delete removed aliases
+                for (const a of aliasToDelete) {
+                    if (a.id) {
+                        await deleteAlias(a.id);
+                    }
+                }
 
                 // Notify the user
                 setAlertIsVisible(true);
@@ -161,11 +171,14 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                             <PaddingBox />
                         </Grid>}
 
+                    <Grid size={12}>
+                        <Typography variant={'h5'}>{t('translation')}</Typography>
+                    </Grid>
                     <Grid size={6}>
-                        <Typography variant={'h5'}>{t('English')}</Typography>
+                        <Typography variant={'h6'}>{t('English')}</Typography>
                     </Grid>
                     <Grid size={6}>
-                        <Typography variant={'h5'}>
+                        <Typography variant={'h6'}>
                             {language.nameLong} ({language.nameShort})
                         </Typography>
                     </Grid>
@@ -206,6 +219,9 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                         <Grid size={12}>
                             <PaddingBox />
                         </Grid>
+                        <Grid size={12}>
+                            <Typography variant={'h5'}>{t('nutrition.others')}</Typography>
+                        </Grid>
                         <Grid size={{ xs: 12, md: 6 }}>
                             <EditExerciseCategory exerciseId={exercise.id!} initial={exercise.category.id} />
                         </Grid>
@@ -256,7 +272,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
 
         {/* Images */}
         <PaddingBox />
-        <Typography variant={'h6'}>{t('images')}</Typography>
+        <Typography variant={'h5'}>{t('images')}</Typography>
         <Grid container spacing={2} mt={2}>
             {addImagePermissionQuery.data && <Grid key={'add'} size={{ md: 3 }}>
                 <AddImageCard exerciseId={exercise.id!} />
@@ -275,7 +291,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
 
         {/* Videos */}
         <PaddingBox />
-        <Typography variant={'h6'}>{t('videos')}</Typography>
+        <Typography variant={'h5'}>{t('videos')}</Typography>
         <Grid container spacing={2} mt={2}>
             {addVideoPermissionQuery.data
                 && <Grid key={'add'} size={{ md: 3 }}>
@@ -285,7 +301,8 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
 
             {exercise.videos.map(video => (
                 <Grid key={video.id} size={{ md: 3 }}>
-                    <VideoEditCard exerciseId={exercise.id!} video={video} canDelete={deleteVideoPermissionQuery.data!} />
+                    <VideoEditCard exerciseId={exercise.id!} video={video}
+                                   canDelete={deleteVideoPermissionQuery.data!} />
                 </Grid>
             ))}
         </Grid>
@@ -294,9 +311,8 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
         {editExercisePermissionQuery.data
             && <>
                 <PaddingBox />
-                <Typography variant={'h6'}>{t('exercises.muscles')}</Typography>
+                <Typography variant={'h5'}>{t('exercises.muscles')}</Typography>
                 <Grid container spacing={1} mt={2}>
-
                     <Grid size={{ xs: 12, md: 6 }}>
                         <EditExerciseMuscle
                             exerciseId={exercise.id!}
@@ -305,8 +321,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                             blocked={secondaryMuscles}
                             isMain
                         />
-                    </Grid>
-                    <Grid size={{ xs: 12, md: 6 }}>
+                        <Box sx={{ mt: 2 }} />
                         <EditExerciseMuscle
                             exerciseId={exercise.id!}
                             value={secondaryMuscles}
@@ -315,7 +330,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                             isMain={false}
                         />
                     </Grid>
-                    <Grid size={{ sm: 6 }} offset={{ md: 3 }}>
+                    <Grid size={{ xs: 12, md: 6 }}>
                         <Grid container>
                             <Grid display="flex" justifyContent={"center"} size={6}>
                                 <MuscleOverview
@@ -333,6 +348,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => {
                             </Grid>
                         </Grid>
                     </Grid>
+
                 </Grid>
             </>
         }

package/src/components/Exercises/Detail/ExerciseDetailView.tsx

@@ -11,6 +11,7 @@ import { MuscleOverview } from "components/Muscles/MuscleOverview";
 import { useCanContributeExercises } from "components/User/queries/contribute";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { dateTimeToLocale } from "utils/date";
 
 
 const TranslateExerciseBanner = ({ setEditMode }: { setEditMode: (mode: boolean) => void }) => {
@@ -60,6 +61,15 @@ export const ExerciseDetailView = ({
     const currentTranslation = exercise.getTranslation(language);
     const isNewTranslation = language && language.id !== currentTranslation.language;
 
+    const muscleLegendStyle = {
+        height: '17px',
+        width: '17px',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        borderRadius: 4,
+        opacity: 0.8,
+    };
+
     return (
         <Grid container>
             {isNewTranslation
@@ -92,8 +102,7 @@ export const ExerciseDetailView = ({
                     </>}
 
                 <Typography variant="h5">{t("exercises.description")}</Typography>
-                <div
-                    dangerouslySetInnerHTML={{ __html: currentTranslation?.description! }} />
+                <div dangerouslySetInnerHTML={{ __html: currentTranslation?.description! }} />
                 <PaddingBox />
 
                 {currentTranslation?.notes.length > 0 && <Typography variant="h5">{t("exercises.notes")}</Typography>}
@@ -124,7 +133,12 @@ export const ExerciseDetailView = ({
                             xs: 6,
                             md: 3
                         }}>
-                        <h3>{t("exercises.primaryMuscles")}</h3>
+                        <div>
+                            <div style={{ ...muscleLegendStyle, backgroundColor: '#fc0000' }}></div>
+                            <b style={{ marginLeft: 8, verticalAlign: 'middle' }}>
+                                {t("exercises.primaryMuscles")}
+                            </b>
+                        </div>
                         <ul>
                             {exercise.muscles.map((m: Muscle) => (
                                 <li key={m.id}>{m.getName()}</li>
@@ -152,7 +166,13 @@ export const ExerciseDetailView = ({
                             xs: 6,
                             md: 3
                         }}>
-                        <h3>{t("exercises.secondaryMuscles")}</h3>
+                        <div>
+                            <div style={{ ...muscleLegendStyle, backgroundColor: '#f57900' }}></div>
+                            <b style={{ marginLeft: 8, verticalAlign: 'middle' }}>
+                                {t("exercises.secondaryMuscles")}
+                            </b>
+                        </div>
+
                         <ul>
                             {exercise.musclesSecondary.map((m: Muscle) => (
                                 <li key={m.id}>{m.getName()}</li>
@@ -197,19 +217,19 @@ export const ExerciseDetailView = ({
                             */}
 
                 {/* This gallery only displays on medium screens upwards */}
-                <SideGallery
-                    mainImage={exercise.mainImage}
-                    sideImages={exercise.sideImages}
-                />
-
-                <PaddingBox />
-                <SideVideoGallery videos={exercise.videos} />
+                <Box sx={{ pl: 1 }}>
+                    <SideGallery
+                        mainImage={exercise.mainImage}
+                        sideImages={exercise.sideImages}
+                    />
+                    <PaddingBox />
+                    <SideVideoGallery videos={exercise.videos} />
+                </Box>
             </Grid>
 
 
             <Grid order={{ xs: 3 }} size={12}>
 
-                <Divider />
                 <PaddingBox />
 
                 {variations.length > 0 && <Typography variant={"h5"}>{t('exercises.variations')}</Typography>}
@@ -230,11 +250,31 @@ export const ExerciseDetailView = ({
                     )}
                 </Grid>
             </Grid>
-            <Grid order={{ xs: 4 }} size={12}>
-                <Typography variant="caption" display="block" mt={2}>
-                    The text on this page is available under the <a
-                    href="https://creativecommons.org/licenses/by-sa/4.0/deed">CC BY-SA 4
-                    License</a>.
+            <Grid order={{ xs: 4, }} sx={{ mt: 3 }} size={12}>
+
+                <Divider />
+                <Typography
+                    variant="caption"
+                    display="block"
+                    mt={1}
+                    sx={{ display: "flex", alignItems: "center", gap: 1 }}
+                >
+                    <i className="fa-brands fa-creative-commons" style={{ fontSize: 20 }}></i>
+                    The content on this page is available under the
+                    <a href="https://creativecommons.org/licenses/by-sa/4.0/deed">
+                        CC BY-SA 4 License
+                    </a>.
+                </Typography>
+
+                <Typography
+                    variant="caption"
+                    display="block" mt={1}
+                    sx={{ display: "flex", alignItems: "center", gap: 1 }}
+                >
+                    <>
+                        Authors: {exercise.authors.join(", ")}<br />
+                        Last update: {dateTimeToLocale(exercise.lastUpdateGlobal)}
+                    </>
                 </Typography>
             </Grid>
         </Grid>

package/src/components/Exercises/Detail/OverviewCard.test.tsx

@@ -27,17 +27,13 @@ describe("Test the exercise overview card component", () => {
     const category = new Category(10, "Abs");
     const equipment1 = new Equipment(10, "Kettlebell");
     const equipment2 = new Equipment(1, "Test 123");
-    const exercise = new Exercise(
-        345,
-        "c788d643-150a-4ac7-97ef-84643c6419bf",
-        category,
-        [equipment1, equipment2],
-        [],
-        [],
-        [],
-        null,
-        [exerciseTranslation1, exerciseTranslation2]
-    );
+    const exercise = new Exercise({
+        id: 345,
+        uuid: "c788d643-150a-4ac7-97ef-84643c6419bf",
+        category: category,
+        equipment: [equipment1, equipment2],
+        translations: [exerciseTranslation1, exerciseTranslation2]
+    });
 
     test("Render the overview card, no language selected -> use english", () => {
         // Act

package/src/components/Exercises/ExerciseOverview.tsx

@@ -7,6 +7,7 @@ import { MuscleFilter, MuscleFilterDropdown } from "components/Exercises/Filter/
 import { NameAutocompleter } from "components/Exercises/Filter/NameAutcompleter";
 import { Category } from "components/Exercises/models/category";
 import { Equipment } from "components/Exercises/models/equipment";
+import { Exercise } from "components/Exercises/models/exercise";
 import { Muscle } from "components/Exercises/models/muscle";
 import { ExerciseGrid } from "components/Exercises/Overview/ExerciseGrid";
 import { ExerciseGridSkeleton } from "components/Exercises/Overview/ExerciseGridLoadingSkeleton";
@@ -15,7 +16,6 @@ import { useExercisesQuery } from "components/Exercises/queries";
 import React, { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { Exercise } from "components/Exercises/models/exercise";
 import { makeLink, WgerLink } from "utils/url";
 import { ExerciseFiltersContext } from './Filter/ExerciseFiltersContext';
 import { FilterDrawer } from './Filter/FilterDrawer';
@@ -73,7 +73,7 @@ const NoResultsBanner = () => {
 };
 
 export const ExerciseOverviewList = () => {
-    const basesQuery = useExercisesQuery();
+    const exerciseQuery = useExercisesQuery();
     const [t, i18n] = useTranslation();
     const navigate = useNavigate();
     const { selectedCategories, selectedEquipment, selectedMuscles } = useContext(ExerciseFiltersContext);
@@ -91,7 +91,7 @@ export const ExerciseOverviewList = () => {
     };
 
     const filteredExercises = useMemo(() => {
-        let filteredExercises = basesQuery.data || [];
+        let filteredExercises = exerciseQuery.data || [];
 
         // Filter exercise bases by categories
         if (selectedCategories.length > 0) {
@@ -123,7 +123,7 @@ export const ExerciseOverviewList = () => {
         }
 
         return filteredExercises;
-    }, [basesQuery.data, selectedCategories, selectedEquipment, selectedMuscles]);
+    }, [exerciseQuery.data, selectedCategories, selectedEquipment, selectedMuscles]);
 
     // Should be a multiple of three, since there are three columns in the grid
     const ITEMS_PER_PAGE = 21;
@@ -140,7 +140,7 @@ export const ExerciseOverviewList = () => {
             return;
         }
 
-        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exercise.id }));
+        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exercise.id! }));
     };
 
     return (
@@ -251,7 +251,7 @@ export const ExerciseOverviewList = () => {
                         xs: 12,
                         sm: 9
                     }}>
-                    {basesQuery.isLoading
+                    {exerciseQuery.isLoading
                         ? <ExerciseGridSkeleton />
                         : <>
                             <ExerciseGrid exercises={paginatedExercises} />

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