Make ingredient autocompleter work with new search API

Note that this is a workaround, ideally we would properly support the new results
and not just convert them.

See wger-project/wger#1724

Author: rolandgeider

package.json

@@ -37,6 +37,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.6",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",

src/components/Nutrition/widgets/IngredientAutcompleter.tsx

@@ -51,11 +51,10 @@ export function IngredientAutocompleter({ callback, initialIngredient }: Ingredi
     const [t, i18n] = useTranslation();
 
     const fetchName = useMemo(
-        () =>
-            throttle(
-                (request: string) => searchIngredient(request, i18n.language, searchEnglish).then(res => setOptions(res)),
-                200,
-            ),
+        () => throttle(
+            (request: string) => searchIngredient(request, i18n.language, searchEnglish).then(res => setOptions(res)),
+            200,
+        ),
         [i18n.language, searchEnglish],
     );
 
@@ -88,6 +87,7 @@ export function IngredientAutocompleter({ callback, initialIngredient }: Ingredi
             noOptionsText={t('noResults')}
             isOptionEqualToValue={(option, value) => option.value === value.value}
             onChange={(event: any, newValue: IngredientSearchResponse | null) => {
+
                 setOptions(newValue ? [newValue, ...options] : options);
                 setValue(newValue);
                 callback(newValue);

src/services/ingredient.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { Ingredient, IngredientAdapter } from "components/Nutrition/models/Ingredient";
-import { IngredientSearchResponse, IngredientSearchType } from "services/responseType";
+import { IngredientSearchResponse } from "services/responseType";
 import { ApiIngredientType } from 'types';
 import { ApiPath, LANGUAGE_SHORT_ENGLISH } from "utils/consts";
 import { fetchPaginated } from "utils/requests";
@@ -9,7 +9,7 @@ import { makeHeader, makeUrl } from "utils/url";
 
 export const getIngredient = async (id: number): Promise<Ingredient> => {
     const { data: receivedIngredient } = await axios.get<ApiIngredientType>(
-        makeUrl(ApiPath.INGREDIENT_PATH, { id: id }),
+        makeUrl(ApiPath.INGREDIENTINFO_PATH, { id: id }),
         { headers: makeHeader() },
     );
 
@@ -25,7 +25,7 @@ export const getIngredients = async (ids: number[]): Promise<Ingredient[]> => {
     }
 
     // eslint-disable-next-line camelcase
-    const url = makeUrl(ApiPath.INGREDIENT_PATH, { query: { id__in: ids.join(',') } });
+    const url = makeUrl(ApiPath.INGREDIENTINFO_PATH, { query: { id__in: ids.join(',') } });
     const adapter = new IngredientAdapter();
     const out: Ingredient[] = [];
 
@@ -41,16 +41,32 @@ export const getIngredients = async (ids: number[]): Promise<Ingredient[]> => {
 
 
 export const searchIngredient = async (name: string, languageCode: string, searchEnglish: boolean = true): Promise<IngredientSearchResponse[]> => {
+    // TODO: this currently only converts the results from the new API to the old format
+    //       but this should be properly converted.
+    //       See also https://github.com/wger-project/wger/pull/1724
+
+
     const languages = [languageCode];
     if (languageCode !== LANGUAGE_SHORT_ENGLISH && searchEnglish) {
         languages.push(LANGUAGE_SHORT_ENGLISH);
     }
 
     const url = makeUrl(
-        ApiPath.INGREDIENT_SEARCH_PATH,
-        { query: { term: name, language: languages.join(',') } }
+        ApiPath.INGREDIENTINFO_PATH,
+        { query: { name__search: name, language__codes: languages.join(',') } }
     );
 
-    const { data } = await axios.get<IngredientSearchType>(url);
-    return data.suggestions;
+    const { data } = await axios.get(url);
+
+    return data.results.map((entry: any) => (
+        {
+            value: entry.name,
+            data: {
+                id: entry.id,
+                name: entry.name,
+                image: entry.image?.image,
+                image_thumbnail: entry.image?.image,
+            }
+        }
+    ));
 };

src/services/responseType.ts

@@ -30,7 +30,3 @@ export interface IngredientSearchResponse {
         image_thumbnail: string | null,
     }
 }
-
-export interface IngredientSearchType {
-    suggestions: IngredientSearchResponse[];
-}

src/utils/consts.ts

@@ -52,7 +52,7 @@ export enum ApiPath {
     MEAL = 'meal',
     MEAL_ITEM = 'mealitem',
     NUTRITIONAL_DIARY = 'nutritiondiary',
-    INGREDIENT_PATH = 'ingredientinfo',
+    INGREDIENTINFO_PATH = 'ingredientinfo',
     INGREDIENT_SEARCH_PATH = 'ingredient/search',
     INGREDIENT_WEIGHT_UNIT = 'ingredientweightunit'
 }

yarn.lock

@@ -2312,6 +2312,11 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543"
+  integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==
+
 "@types/luxon@^3.4.2":
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"