feat: add provider loadsuggestions & del useless code

src/Autocomplete.tsx

@@ -14,11 +14,6 @@ import ReactTooltip from 'react-tooltip';
 import { OptionTypeBase } from 'react-select/src/types';
 import AsyncSelect from 'react-select/async';
 
-// import { showErrorMessage } from '@jupyterlab/apputils';
-// import { URLExt } from '@jupyterlab/coreutils';
-// import { ServerConnection } from '@jupyterlab/services';
-// import { EODAG_SERVER_ADRESS } from './config';
-// import { map } from 'lodash';
 import { IOptionTypeBase } from './FormComponent';
 
 function NoOptionsMessage(props: any) {

src/FormComponent.tsx

@@ -12,7 +12,6 @@
   UseFormReturn
 } from 'react-hook-form';
 import { showErrorMessage } from '@jupyterlab/apputils';
-import { map } from 'lodash';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'isomorphic-fetch';
@@ -20,7 +19,7 @@
 import SearchService from './SearchService';
 import { ChangeEvent } from 'react';
 import MapExtentComponent from './MapExtentComponent';
 import _ from 'lodash';
 import { IFormInput } from './types';
 import {
   CodiconOpenPreview,
@@ -33,8 +32,7 @@
 } from './icones.js';
 import ReactTooltip from 'react-tooltip';
 import { ThreeDots } from 'react-loader-spinner';
-import { useFetchData } from './hooks/useFetchData';
-import { useFetchSuggestions } from './hooks/useFetchSuggestions';
+import { useFetchProduct, useFetchProvider } from './hooks/useFetchData';
 
 export interface IProps {
   handleShowFeature: any;
@@ -48,12 +46,12 @@
   [key: string]: any;
 }
 
-interface IProduct {
+export interface IProduct {
   ID: string;
   abstract: string;
 }
 
-interface IProvider {
+export interface IProvider {
   provider: string;
   description: string;
 }
@@ -74,8 +72,8 @@
   const [cloud, setCloud] = useState(100);
   const [isLoadingSearch, setIsLoadingSearch] = useState(false);
   const [openModal, setOpenModal] = useState(true);
-  const [providersValue, setProvidersValue] = useState(null);
-  const [productTypesValue, setProductTypesValue] = useState(null);
+  const [providerValue, setProviderValue] = useState(null);
+  const [productTypeValue, setProductTypeValue] = useState(null);
 
   const {
     control,
@@ -93,36 +91,24 @@
   });
 
   useEffect(() => {
-    useFetchData<IProduct>({
-      queryParams: providersValue
-        ? `product-types?provider=${providersValue}`
-        : 'product-types',
-      onSuccess: (products: IProduct[]) => {
-        const productTypeList: IOptionTypeBase[] = map(products, product => ({
-          value: product.ID,
-          label: product.ID,
-          description: product.abstract
-        }));
-        setProductTypes(productTypeList);
-      }
-    });
-  }, [providersValue]);
+    const fetchData = async () => {
+      const fetchProduct = useFetchProduct();
+      const productList = await fetchProduct(providerValue);
+      setProductTypes(productList);
+    };
+
+    fetchData();
+  }, [providerValue]);
 
   useEffect(() => {
-    useFetchData<IProvider>({
-      queryParams: productTypesValue
-        ? `providers?product_type=${productTypesValue}`
-        : 'providers/',
-      onSuccess: (providers: IProvider[]) => {
-        const providersList: IOptionTypeBase[] = map(providers, provider => ({
-          value: provider.provider,
-          label: provider.provider,
-          description: provider.description
-        }));
-        setProviders(providersList);
-      }
-    });
-  }, [productTypesValue]);
+    const fetchData = async () => {
+      const fetchProvider = useFetchProvider();
+      const providerList = await fetchProvider(productTypeValue);
+      setProviders(providerList);
+    };
+
+    fetchData();
+  }, [productTypeValue]);
 
   const onSubmit: SubmitHandler<IFormInput> = data => {
     if (!isNotebookCreated()) {
@@ -163,7 +149,8 @@
     commands.execute('settingeditor:open', { query: 'EODAG' });
   };
 
-  const loadProductTypesSuggestions = useFetchSuggestions();
+  const loadProductTypesSuggestions = useFetchProduct();
+  const loadProviderSuggestions = useFetchProvider();
 
   return (
     <div className="jp-EodagWidget-wrapper">
@@ -189,9 +176,12 @@
                 placeholder="Any"
                 suggestions={providers}
                 value={value}
+                loadSuggestions={(inputValue: string) =>
+                  loadProviderSuggestions(null, inputValue)
+                }
                 handleChange={(e: IOptionTypeBase | null) => {
                   onChange(e?.value);
-                  setProvidersValue(e?.value);
+                  setProviderValue(e?.value);
                 }}
               />
             )}
@@ -208,11 +198,11 @@
                 placeholder="S2_..."
                 value={value}
                 loadSuggestions={(inputValue: string) =>
-                  loadProductTypesSuggestions(providersValue, inputValue)
+                  loadProductTypesSuggestions(providerValue, inputValue)
                 }
                 handleChange={(e: IOptionTypeBase | null) => {
                   onChange(e?.value);
-                  setProductTypesValue(e?.value);
+                  setProductTypeValue(e?.value);
                 }}
               />
             )}
@@ -332,7 +322,7 @@
                     type="submit"
                     color="primary"
                     className={
-                      !productTypesValue
+                      !productTypeValue
                         ? 'jp-EodagWidget-buttons-button jp-EodagWidget-buttons-button__disabled'
                         : 'jp-EodagWidget-buttons-button'
                     }
@@ -347,7 +337,7 @@
                       <br />
                       Results
                     </p>
-                    {!productTypesValue && (
+                    {!productTypeValue && (
                       <ReactTooltip
                         id="btn-preview-results"
                         className="jp-Eodag-tooltip"
@@ -363,7 +353,7 @@
                     type="submit"
                     color="primary"
                     className={
-                      !productTypesValue
+                      !productTypeValue
                         ? 'jp-EodagWidget-buttons-button jp-EodagWidget-buttons-button__disabled'
                         : 'jp-EodagWidget-buttons-button'
                     }
@@ -378,7 +368,7 @@
                       <br />
                       Code
                     </p>
-                    {!productTypesValue && (
+                    {!productTypeValue && (
                       <ReactTooltip
                         id="btn-generate-value"
                         className="jp-Eodag-tooltip"
@@ -423,7 +413,7 @@
 }: Partial<UseFormReturn<IFormInput>>) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const { fields, append, remove, update } = useFieldArray({
     control,
     name: 'additionnalParameters'
   });

src/hooks/useFetchData.ts

@@ -1,44 +1,100 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
-
 import { EODAG_SERVER_ADRESS } from './../config';
+import { IOptionTypeBase, IProduct, IProvider } from './../FormComponent';
 
-interface IUseFetchDataProps<T> {
+interface IFetchDataProps<T> {
   queryParams: string;
-  onSuccess: (data: T[]) => void;
+  onSuccess: (data: T[]) => Promise<IOptionTypeBase[]>;
 }
 
-const useFetchData = <T>({
+const fetchData = async <T>({
   queryParams,
   onSuccess
-}: IUseFetchDataProps<T>): void => {
-  const fetchData = async () => {
-    const serverSettings = ServerConnection.makeSettings();
-    const eodagServer = URLExt.join(
-      serverSettings.baseUrl,
-      `${EODAG_SERVER_ADRESS}`
+}: IFetchDataProps<T>): Promise<IOptionTypeBase[]> => {
+  const serverSettings = ServerConnection.makeSettings();
+  const eodagServer = URLExt.join(
+    serverSettings.baseUrl,
+    `${EODAG_SERVER_ADRESS}`
+  );
+
+  try {
+    const response = await fetch(URLExt.join(eodagServer, queryParams), {
+      credentials: 'same-origin'
+    });
+    if (response.status >= 400) {
+      throw new Error('Bad response from server');
+    }
+    const data = await response.json();
+    return onSuccess(data);
+  } catch (error) {
+    showErrorMessage(
+      `Unable to contact the EODAG server. Are you sure the address is ${eodagServer}/ ?`,
+      {}
     );
-    // const slug = queryParams ? `${queryParams}/` : '';
-
-    try {
-      const response = await fetch(URLExt.join(eodagServer, queryParams), {
-        credentials: 'same-origin'
-      });
-      if (response.status >= 400) {
-        throw new Error('Bad response from server');
-      }
-      const data = await response.json();
-      onSuccess(data);
-    } catch (error) {
-      showErrorMessage(
-        `Unable to contact the EODAG server. Are you sure the address is ${eodagServer}/ ?`,
-        {}
-      );
+    return Promise.reject(error);
+  }
+};
+
+const useFetchProduct = () => {
+  const fetchProduct = async (
+    providerValue: string,
+    inputValue?: string
+  ): Promise<IOptionTypeBase[]> => {
+    let queryParams = 'guess-product-type?';
+
+    if (inputValue) {
+      queryParams += `keywords=${inputValue}`;
+    }
+
+    if (providerValue) {
+      queryParams += queryParams.includes('keywords') ? '&' : '';
+      queryParams += `provider=${providerValue}`;
+    }
+    return fetchData<IProduct>({
+      queryParams,
+      onSuccess: data =>
+        Promise.resolve(
+          data.map((d: IProduct) => ({
+            value: d.ID,
+            label: d.ID,
+            description: d.abstract
+          }))
+        )
+    });
+  };
+
+  return fetchProduct;
+};
+
+const useFetchProvider = () => {
+  const fetchProvider = async (
+    productTypeValue: string,
+    inputValue?: string
+  ): Promise<IOptionTypeBase[]> => {
+    let queryParams = 'providers?';
+
+    if (inputValue) {
+      queryParams += `keywords=${inputValue}`;
+    }
+    if (productTypeValue) {
+      queryParams += `product_type=${productTypeValue}`;
     }
+    return fetchData<IProvider>({
+      queryParams,
+      onSuccess: data =>
+        Promise.resolve(
+          data.map((d: IProvider) => ({
+            value: d.provider,
+            label: d.provider,
+            description: d.description
+          }))
+        )
+    });
   };
 
-  fetchData();
+  return fetchProvider;
 };
 
-export { useFetchData };
+export { fetchData, useFetchProduct, useFetchProvider };