Merge pull request #1143 from FilipCuper/fix/exercise-search-endpoint-1127

rolandgeider · web-flow · commit b6112d7a3db4 · 2025-11-17T22:30:12.000+01:00
Fix #1127: Move exercise search to new endpoint
diff --git a/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx b/src/components/Exercises/Detail/Head/ExerciseDeleteDialog.tsx
@@ -24,7 +24,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { deleteExercise, deleteExerciseTranslation, getExercise } from "services";
-import { ExerciseSearchResponse } from "services/responseType";
 
 export function ExerciseDeleteDialog(props: {
     onClose: () => void,
@@ -91,10 +90,10 @@ export function ExerciseDeleteDialog(props: {
             <p>{t('exercises.replacementsSearch')}</p>
 
             <NameAutocompleter
-                callback={(exercise: ExerciseSearchResponse | null) => {
+                callback={(exercise: Exercise | null) => {
                     if (exercise !== null) {
-                        setReplacementId(exercise.data.base_id);
-                        loadCurrentReplacement(exercise.data.base_id);
+                        setReplacementId(exercise.id!);
+                        loadCurrentReplacement(exercise.id!);
                     }
                 }}
             />
diff --git a/src/components/Exercises/ExerciseOverview.tsx b/src/components/Exercises/ExerciseOverview.tsx
@@ -15,7 +15,7 @@ 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 { ExerciseSearchResponse } from "services/responseType";
+import { Exercise } from "components/Exercises/models/exercise";
 import { makeLink, WgerLink } from "utils/url";
 import { ExerciseFiltersContext } from './Filter/ExerciseFiltersContext';
 import { FilterDrawer } from './Filter/FilterDrawer';
@@ -135,12 +135,12 @@ export const ExerciseOverviewList = () => {
         page * ITEMS_PER_PAGE
     );
 
-    const exerciseAdded = (exerciseResponse: ExerciseSearchResponse | null) => {
-        if (!exerciseResponse) {
+    const exerciseAdded = (exercise: Exercise | null) => {
+        if (!exercise) {
             return;
         }
 
-        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exerciseResponse.data.base_id }));
+        navigate(makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, { id: exercise.id }));
     };
 
     return (
diff --git a/src/components/Exercises/Filter/NameAutcompleter.tsx b/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>
diff --git a/src/components/Exercises/Filter/NameAutocompleter.test.tsx b/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));
     });
 });
diff --git a/src/components/WorkoutRoutines/widgets/DayDetails.tsx b/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,
diff --git a/src/components/WorkoutRoutines/widgets/SlotDetails.tsx b/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);
     };
 
diff --git a/src/components/WorkoutRoutines/widgets/forms/SessionLogsForm.tsx b/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;
diff --git a/src/services/exerciseTranslation.ts b/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 [];
+    }
 };
 
 
diff --git a/src/services/responseType.ts b/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,
-    }
-}
diff --git a/src/tests/exercises/searchResponse.ts b/src/tests/exercises/searchResponse.ts
