@wger-project/react-components 25.10.16 → 25.11.17

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

@@ -15,8 +15,9 @@ import LoadingButton from "@mui/material/Button";
 import Grid from '@mui/material/Grid';
 import { WgerTextField } from "components/Common/forms/WgerTextField";
 import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
-import { Day } from "components/WorkoutRoutines/models/Day";
+import { Day, DayType } from "components/WorkoutRoutines/models/Day";
 import { useDeleteDayQuery, useEditDayQuery } from "components/WorkoutRoutines/queries";
+import { DayTypeSelect } from "components/WorkoutRoutines/widgets/forms/DayTypeSelect";
 import { DefaultRoundingMenu } from "components/WorkoutRoutines/widgets/forms/RoutineForm";
 import { Form, Formik } from "formik";
 import React, { useState } from "react";
@@ -74,21 +75,25 @@ export const DayForm = (props: {
         description: Yup.string()
             .max(descriptionMaxLength, t('forms.maxLength', { chars: descriptionMaxLength })),
         isRest: Yup.boolean(),
-        needsLogsToAdvance: Yup.boolean()
+        needsLogsToAdvance: Yup.boolean(),
+        type: Yup.string(),
     });
 
     const handleSubmit = (values: Partial<{
         name: string,
         description: string,
         isRest: boolean,
-        needsLogsToAdvance: boolean
-    }>) => editDayQuery.mutate(Day.clone(
+        needsLogsToAdvance: boolean,
+        type: string
+    }>) =>
+        editDayQuery.mutate(Day.clone(
         props.day,
         {
             ...(values.name !== undefined && { name: values.name }),
             ...(values.description !== undefined && { description: values.description }),
             ...({ isRest: values.isRest }),
             ...(values.needsLogsToAdvance !== undefined && { needLogsToAdvance: values.needsLogsToAdvance }),
+                ...(values.type !== undefined && { type: values.type as DayType }),
         })
     );
 
@@ -98,7 +103,8 @@ export const DayForm = (props: {
                 name: props.day.name,
                 description: props.day.description,
                 isRest: props.day.isRest,
-                needsLogsToAdvance: props.day.needLogsToAdvance
+                needsLogsToAdvance: props.day.needLogsToAdvance,
+                type: props.day.type,
             }}
             validationSchema={validationSchema}
             onSubmit={(values, { setSubmitting }) => {
@@ -110,19 +116,25 @@ export const DayForm = (props: {
             {(formik) => (
                 <Form>
                     <Grid container spacing={2}>
-                        <Grid size={{ xs: 12, sm: 6 }}>
+                        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
                             <WgerTextField
                                 fieldName="name"
                                 title="Name"
                                 fieldProps={{ disabled: isRestDay }}
                             />
                         </Grid>
-                        <Grid size={{ xs: 6, sm: 2 }}>
+                        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+                            <DayTypeSelect
+                                fieldName="type"
+                                title="Type"
+                            />
+                        </Grid>
+                        <Grid size={{ xs: 12, sm: 6, md: 2 }}>
                             <FormControlLabel
                                 control={<Switch checked={isRestDay} onChange={handleRestDayChange} />}
                                 label={t('routines.restDay')} />
                         </Grid>
-                        <Grid size={{ xs: 6, sm: 4 }}>
+                        <Grid size={{ xs: 12, sm: 4, md: 3 }}>
                             <FormControlLabel
                                 disabled={isRestDay}
                                 control={<Switch
@@ -188,7 +200,7 @@ export const DayForm = (props: {
                     </Dialog>
 
                     <DeleteConfirmationModal
-                        title={t('deleteConfirmation', { name: props.day.getDisplayName() })}
+                        title={t('deleteConfirmation', { name: props.day.displayName })}
                         message={t('routines.deleteDayConfirmation')}
                         isOpen={openDeleteDialog}
                         closeFn={handleCancelDeleteDay}

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

@@ -0,0 +1,66 @@
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import { useField } from "formik";
+import { useTranslation } from "react-i18next";
+
+interface DayTypeSelectProps {
+    fieldName: string,
+    title: string,
+}
+
+export const DayTypeSelect = (props: DayTypeSelectProps) => {
+    const { t } = useTranslation();
+    const [field, meta] = useField(props.fieldName);
+
+    const options = [
+        {
+            value: 'custom',
+            label: t('routines.day.custom'),
+        },
+        {
+            value: 'enom',
+            label: t('routines.day.enom'),
+        },
+        {
+            value: 'amrap',
+            label: t('routines.day.amrap'),
+        },
+        {
+            value: 'hiit',
+            label: t('routines.day.hiit'),
+        },
+        {
+            value: 'tabata',
+            label: t('routines.day.tabata'),
+        },
+        {
+            value: 'edt',
+            label: t('routines.day.edt'),
+        },
+        {
+            value: 'rft',
+            label: t('routines.day.rft'),
+        },
+        {
+            value: 'afap',
+            label: t('routines.day.afap'),
+        }
+    ] as const;
+
+
+    return <>
+        <TextField
+            fullWidth
+            select
+            label={t('routines.set.type')}
+            variant="standard"
+            {...field}
+        >
+            {options!.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                    {option.value.toUpperCase()} - <small>{option.label}</small>
+                </MenuItem>
+            ))}
+        </TextField>
+    </>;
+};

package/src/components/WorkoutRoutines/widgets/forms/SessionForm.test.tsx

@@ -120,8 +120,6 @@ describe('SessionForm', () => {
             </BrowserRouter>
         );
 
-        screen.logTestingPlaygroundURL();
-
         // Assert
         await waitFor(() => {
             // screen.logTestingPlaygroundURL();

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/components/WorkoutRoutines/widgets/forms/SlotEntryForm.test.tsx

@@ -40,16 +40,18 @@ describe('SlotEntryTypeField', () => {
         const dropdown = screen.getByRole('combobox', { name: 'routines.set.type' });
         await user.click(dropdown);
 
-        expect(screen.queryAllByText('routines.set.normalSet')).toHaveLength(2); // One in the options menu, one in the selected value
-        expect(screen.getByText('routines.set.dropSet')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.myo')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.partial')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.forced')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.tut')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.iso')).toBeInTheDocument();
-        expect(screen.getByText('routines.set.jump')).toBeInTheDocument();
-
-        const myoOption = screen.getByRole('option', { name: 'routines.set.myo' });
+        // One in the options menu, one in the selected value
+        expect(screen.queryAllByText(/routines\.set\.normalSet/)).toHaveLength(2);
+        expect(screen.getByText(/routines\.set\.dropSet/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.myo/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.partial/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.forced/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.tut/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.iso/)).toBeInTheDocument();
+        expect(screen.getByText(/routines\.set\.jump/)).toBeInTheDocument();
+
+
+        const myoOption = screen.getByRole('option', { name: /routines\.set\.myo/ });
         await user.click(myoOption);
         expect(mockEditSlotEntry).toHaveBeenCalledWith(SlotEntry.clone(testDayLegs.slots[0].entries[0], { type: 'myo' }));
     });

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

@@ -55,6 +55,7 @@ export const SlotEntryTypeField = (props: { slotEntry: SlotEntry, routineId: num
         editQuery.mutate(SlotEntry.clone(props.slotEntry, { type: newValue as SlotEntryType }));
     };
 
+
     return <>
         <TextField
             fullWidth
@@ -67,7 +68,7 @@ export const SlotEntryTypeField = (props: { slotEntry: SlotEntry, routineId: num
         >
             {options!.map((option) => (
                 <MenuItem key={option.value} value={option.value}>
-                    {option.label}
+                    {option.value.toUpperCase()} - {option.label}
                 </MenuItem>
             ))}
         </TextField>

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

@@ -26,7 +26,7 @@ export const SlotForm = (props: { slot: Slot, routineId: number }) => {
             size={"small"}
             value={slotComment}
             disabled={editSlotQuery.isPending}
-            onChange={(e) => handleChange(e.target.value)}
+            onChange={(e) => setSlotComment(e.target.value)}
             onBlur={handleBlur}
             slotProps={{
                 input: { endAdornment: editSlotQuery.isPending && <LoadingProgressIcon /> }

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
+    )
 ];