Fix #1127: Move exercise search to new endpoint

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';
@@ -134,12 +134,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 (

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;
@@ -60,7 +60,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}
@@ -69,13 +69,10 @@ export function NameAutocompleter({ callback, loadExercise }: NameAutocompleterP
                 filterSelectedOptions
                 value={value}
                 noOptionsText={t("noResults")}
-                isOptionEqualToValue={(option, value) => option.value === value.value}
-                onChange={async (event: any, newValue: ExerciseSearchResponse | null) => {
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                onChange={async (event: any, 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) => {
@@ -101,34 +98,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>

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';
 
 
 /*
@@ -23,19 +23,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<any>>(url);
+
+        if (!data || !data.results || !Array.isArray(data.results)) {
+            return [];
+        }
+
+        const adapter = new ExerciseAdapter();
+        return data.results.map((item: any) => adapter.fromJson(item));
+    } catch (error) {
+        return [];
+    }
 };