chore: adding loading

frontend/src/components/AutocompleteClientLocation/index.tsx

@@ -8,7 +8,6 @@ import {
   ForestClientLocation 
 } from "../../services/OpeningClientLocationService";
 
-
 interface AutocompleteProps {
   id: string,
   label: string,
@@ -65,7 +64,8 @@ export const fetchValues = async (query: string, key: string) => {
 };
 
 const AutocompleteClientLocation: React.ForwardRefExoticComponent<AutocompleteComponentProps & React.RefAttributes<AutocompleteComponentRefProps>> = forwardRef<AutocompleteComponentRefProps, AutocompleteComponentProps>(
-  ({ setValue }, ref) => {
+  ({ setValue }, ref) => 
+    {
   const { options, fetchOptions, setOptions } = useAutocomplete();
   const [isActive, setIsActive] = useState(false);
   const [location, setLocation] = useState<AutocompleteProps | null>(null);
@@ -107,6 +107,7 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent<AutocompleteCo
       clearLocation();
     }
   };
+
   useImperativeHandle(ref, () => ({
     reset: clearLocation
   }));
@@ -116,23 +117,23 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent<AutocompleteCo
       <ComboBox
         id="client-name"
         className="flex-fill"
-        allowCustomValue
+        allowCustomValue={false}
         selectedItem={client}
-        onInputChange={(e: string) => fetchOptions(e, "clients")}
+        onInputChange={(value: string) => fetchOptions(value, "clients")}
         onChange={handleClientChange}
+        itemToElement={(item: AutocompleteProps) => item.label}
         helperText="Search by client name, number or acronym"
         items={options["clients"] || []}
-        titleText="Client"
-        typeahead />
+        titleText="Client" />
 
       <ComboBox
         disabled={!isActive}
         id="client-location"
         className="flex-fill"
-        allowCustomValue
         selectedItem={location}
-        onChange={handleLocationSelection}        
-        items={options["locations"] || []}
+        onChange={handleLocationSelection}
+        itemToElement={(item: AutocompleteProps) => item.label}
+        items={options["locations"] || [{ id: "", label: "No results found" }]}
         titleText="Location code"
         typeahead />
       </div>

frontend/src/contexts/AutocompleteProvider.tsx

@@ -1,8 +1,7 @@
 import { createContext, useContext, ReactNode, useState, useRef, useEffect } from "react";
+import { InlineLoading } from "@carbon/react";
 import { debounce, DebouncedFunc } from "lodash";
 
-// TODO: test this
-
 interface AutocompleteProviderProps {
   fetchOptions: (query: string, key: string) => Promise<any[]>;
   skipConditions?: Record<string, (query: string) => boolean>;
@@ -17,6 +16,13 @@ interface AutocompleteContextType {
   setOptions: (key: string, items: any[]) => void;
 }
 
+const searchingForItems = [{
+  id: "",
+  label: (<InlineLoading status="active" iconDescription="Loading" description="Loading data..." />)
+}];
+
+const noDataFound = [{ id: "", label: "No results found" }];
+
 const AutocompleteContext = createContext<AutocompleteContextType | undefined>(undefined);
 
 export const AutocompleteProvider = ({ fetchOptions, skipConditions, children }: AutocompleteProviderProps) => {
@@ -39,8 +45,9 @@ export const AutocompleteProvider = ({ fetchOptions, skipConditions, children }:
         if (skipConditions && skipConditions[key] && skipConditions[key](query)) {
           return;
         }
+        setOptions(key, searchingForItems);
         const fetchedOptions = await fetchOptions(query, key);
-        setOptions(key, fetchedOptions);
+        setOptions(key, fetchedOptions.length ? fetchedOptions : noDataFound);
       } catch (fetchError) {
         setError("Error fetching options");
       } finally {
@@ -49,8 +56,16 @@ export const AutocompleteProvider = ({ fetchOptions, skipConditions, children }:
     }, 450);
   };
 
-  const fetchAndSetOptions = (query: string, key: string) => {
-    setLoading(true);
+  const fetchAndSetOptions = async (query: string, key: string) => {
+    if(!key || !query) return;
+    if (skipConditions && skipConditions[key] && skipConditions[key](query)) {
+      return;
+    }
+    /*setLoading(true);
+    setOptions(key, searchingForItems);
+    const fetchedOptions = await fetchOptions(query, key);
+    setOptions(key, fetchedOptions.length ? fetchedOptions : noDataFound);
+    setLoading(false);*/
     if (!debouncedFetchMap.current.has(key)) {
       debouncedFetchMap.current.set(key, createDebouncedFetch(key));
     }