include drug and chemical autocomplete

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx

-import { autocompleteSearchSelector } from '@/redux/autocomplete/autocomplete.selectors';
+import {
+  autocompleteChemicalSelector,
+  autocompleteDrugSelector,
+  autocompleteSearchSelector,
+} from '@/redux/autocomplete/autocomplete.selectors';
 import {
   currentSelectedSearchElement,
   searchDrawerOpenSelector,
@@ -37,6 +41,8 @@ export const SearchBar = (): JSX.Element => {
   const isPerfectMatch = useSelector(perfectMatchSelector);
   const searchValueState = useSelector(searchValueSelector);
   const searchAutocompleteState = useSelector(autocompleteSearchSelector);
+  const drugAutocompleteState = useSelector(autocompleteDrugSelector);
+  const chemicalAutocompleteState = useSelector(autocompleteChemicalSelector);
   const dispatch = useAppDispatch();
   const router = useRouter();
   const currentTab = useSelector(currentSelectedSearchElement);
@@ -87,11 +93,12 @@ export const SearchBar = (): JSX.Element => {
     openSearchDrawerIfClosed(currentTab);
   };
 
-  // eslint-disable-next-line no-console
-  console.log(searchAutocompleteState.searchValues);
-  const suggestions = searchAutocompleteState.searchValues.map(entry => {
-    return { name: entry };
-  });
+  const suggestions = searchAutocompleteState.searchValues
+    .concat(drugAutocompleteState.searchValues, chemicalAutocompleteState.searchValues)
+    .map(entry => {
+      return { name: entry };
+    })
+    .sort((a: Suggestion, b: Suggestion) => a.name.localeCompare(b.name));
 
   const getSuggestions = (value: string): Suggestion[] => {
     const inputValue = value.trim().toLowerCase();

src/components/FunctionalArea/TopBar/TopBar.component.test.tsx

@@ -119,6 +119,8 @@ describe('TopBar - component', () => {
       map: initialMapStateFixture,
       search: SEARCH_STATE_INITIAL_MOCK,
       autocompleteSearch: AUTOCOMPLETE_INITIAL_STATE,
+      autocompleteDrug: AUTOCOMPLETE_INITIAL_STATE,
+      autocompleteChemical: AUTOCOMPLETE_INITIAL_STATE,
       backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
     });
 
@@ -136,6 +138,8 @@ describe('TopBar - component', () => {
       user: USER_INITIAL_STATE_MOCK,
       search: SEARCH_STATE_INITIAL_MOCK,
       autocompleteSearch: AUTOCOMPLETE_INITIAL_STATE,
+      autocompleteDrug: AUTOCOMPLETE_INITIAL_STATE,
+      autocompleteChemical: AUTOCOMPLETE_INITIAL_STATE,
       drawer: initialStateFixture,
       project: {
         ...PROJECT_STATE_INITIAL_MOCK,

src/redux/apiPath.ts

@@ -112,4 +112,6 @@ export const apiPath = {
 
   getSearchAutocomplete: (): string =>
     `projects/${PROJECT_ID}/models/*/bioEntities/suggestedQueryList`,
+  getDrugAutocomplete: (): string => `projects/${PROJECT_ID}/drugs/suggestedQueryList`,
+  getChemicalAutocomplete: (): string => `projects/${PROJECT_ID}/chemicals/suggestedQueryList`,
 };

src/redux/autocomplete/autocomplete.reducers.ts

 import { AutocompleteState } from '@/redux/autocomplete/autocomplete.types';
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
-import { getSearchAutocomplete } from '@/redux/autocomplete/autocomplete.thunks';
+import {
+  getChemicalAutocomplete,
+  getDrugAutocomplete,
+  getSearchAutocomplete,
+} from '@/redux/autocomplete/autocomplete.thunks';
 
 export const getSearchAutocompleteReducer = (
   builder: ActionReducerMapBuilder<AutocompleteState>,
@@ -17,3 +21,35 @@ export const getSearchAutocompleteReducer = (
     // TODO: error management to be discussed in the team
   });
 };
+
+export const getDrugAutocompleteReducer = (
+  builder: ActionReducerMapBuilder<AutocompleteState>,
+): void => {
+  builder.addCase(getDrugAutocomplete.pending, state => {
+    state.loading = 'pending';
+  });
+  builder.addCase(getDrugAutocomplete.fulfilled, (state, action) => {
+    state.searchValues = action.payload ? action.payload : [];
+    state.loading = 'succeeded';
+  });
+  builder.addCase(getDrugAutocomplete.rejected, state => {
+    state.loading = 'failed';
+    // TODO: error management to be discussed in the team
+  });
+};
+
+export const getChemicalAutocompleteReducer = (
+  builder: ActionReducerMapBuilder<AutocompleteState>,
+): void => {
+  builder.addCase(getChemicalAutocomplete.pending, state => {
+    state.loading = 'pending';
+  });
+  builder.addCase(getChemicalAutocomplete.fulfilled, (state, action) => {
+    state.searchValues = action.payload ? action.payload : [];
+    state.loading = 'succeeded';
+  });
+  builder.addCase(getChemicalAutocomplete.rejected, state => {
+    state.loading = 'failed';
+    // TODO: error management to be discussed in the team
+  });
+};

src/redux/autocomplete/autocomplete.selectors.ts

@@ -5,3 +5,13 @@ export const autocompleteSearchSelector = createSelector(
   rootSelector,
   state => state.autocompleteSearch,
 );
+
+export const autocompleteDrugSelector = createSelector(
+  rootSelector,
+  state => state.autocompleteDrug,
+);
+
+export const autocompleteChemicalSelector = createSelector(
+  rootSelector,
+  state => state.autocompleteChemical,
+);

src/redux/autocomplete/autocomplete.slice.ts

 import { createSlice } from '@reduxjs/toolkit';
 import { AUTOCOMPLETE_INITIAL_STATE } from '@/redux/autocomplete/autocomplete.constants';
-import { getSearchAutocompleteReducer } from '@/redux/autocomplete/autocomplete.reducers';
+import {
+  getChemicalAutocompleteReducer,
+  getDrugAutocompleteReducer,
+  getSearchAutocompleteReducer,
+} from '@/redux/autocomplete/autocomplete.reducers';
 
 export const autocompleteSearchSlice = createSlice({
-  name: 'autocomplete',
+  name: 'autocompleteSearch',
   initialState: AUTOCOMPLETE_INITIAL_STATE,
   reducers: {},
   extraReducers(builder) {
@@ -12,3 +16,25 @@ export const autocompleteSearchSlice = createSlice({
 });
 
 export const autocompleteSearchReducer = autocompleteSearchSlice.reducer;
+
+export const autocompleteDrugSlice = createSlice({
+  name: 'autocompleteDrug',
+  initialState: AUTOCOMPLETE_INITIAL_STATE,
+  reducers: {},
+  extraReducers(builder) {
+    getDrugAutocompleteReducer(builder);
+  },
+});
+
+export const autocompleteDrugReducer = autocompleteDrugSlice.reducer;
+
+export const autocompleteChemicalSlice = createSlice({
+  name: 'autocompleteChemical',
+  initialState: AUTOCOMPLETE_INITIAL_STATE,
+  reducers: {},
+  extraReducers(builder) {
+    getChemicalAutocompleteReducer(builder);
+  },
+});
+
+export const autocompleteChemicalReducer = autocompleteChemicalSlice.reducer;

src/redux/autocomplete/autocomplete.thunks.ts

@@ -26,3 +26,43 @@ export const getSearchAutocomplete = createAsyncThunk<
     }
   },
 );
+
+export const getDrugAutocomplete = createAsyncThunk<
+  string[] | undefined,
+  void,
+  { state: RootState } & ThunkConfig
+>(
+  'project/getDrugAutocomplete',
+  // eslint-disable-next-line consistent-return
+  async () => {
+    try {
+      const response = await axiosInstance.get<string[]>(apiPath.getDrugAutocomplete());
+
+      const isDataValid = validateDataUsingZodSchema(response.data, autocompleteSchema);
+
+      return isDataValid ? response.data : undefined;
+    } catch (error) {
+      return Promise.reject(getError({ error }));
+    }
+  },
+);
+
+export const getChemicalAutocomplete = createAsyncThunk<
+  string[] | undefined,
+  void,
+  { state: RootState } & ThunkConfig
+>(
+  'project/getChemicalAutocomplete',
+  // eslint-disable-next-line consistent-return
+  async () => {
+    try {
+      const response = await axiosInstance.get<string[]>(apiPath.getChemicalAutocomplete());
+
+      const isDataValid = validateDataUsingZodSchema(response.data, autocompleteSchema);
+
+      return isDataValid ? response.data : undefined;
+    } catch (error) {
+      return Promise.reject(getError({ error }));
+    }
+  },
+);

src/redux/root/init.thunks.ts

@@ -7,7 +7,11 @@ import { PluginsManager } from '@/services/pluginsManager';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ZERO } from '@/constants/common';
 import { getConstant } from '@/redux/constant/constant.thunks';
-import { getSearchAutocomplete } from '@/redux/autocomplete/autocomplete.thunks';
+import {
+  getChemicalAutocomplete,
+  getDrugAutocomplete,
+  getSearchAutocomplete,
+} from '@/redux/autocomplete/autocomplete.thunks';
 import { getAllBackgroundsByProjectId } from '../backgrounds/backgrounds.thunks';
 import { getConfiguration, getConfigurationOptions } from '../configuration/configuration.thunks';
 import {
@@ -89,6 +93,8 @@ export const fetchInitialAppData = createAsyncThunk<
 
   // autocomplete
   dispatch(getSearchAutocomplete());
+  dispatch(getDrugAutocomplete());
+  dispatch(getChemicalAutocomplete());
 
   /** Trigger search */
   if (queryData.searchValue) {

src/redux/root/root.fixtures.ts

@@ -32,6 +32,8 @@ import { USER_INITIAL_STATE_MOCK } from '../user/user.mock';
 
 export const INITIAL_STORE_STATE_MOCK: RootState = {
   autocompleteSearch: AUTOCOMPLETE_INITIAL_STATE,
+  autocompleteDrug: AUTOCOMPLETE_INITIAL_STATE,
+  autocompleteChemical: AUTOCOMPLETE_INITIAL_STATE,
   search: SEARCH_STATE_INITIAL_MOCK,
   project: PROJECT_STATE_INITIAL_MOCK,
   projects: PROJECTS_STATE_INITIAL_MOCK,

src/redux/store.ts

@@ -18,7 +18,11 @@ import projectsReducer from '@/redux/projects/projects.slice';
 import reactionsReducer from '@/redux/reactions/reactions.slice';
 import searchReducer from '@/redux/search/search.slice';
 import userReducer from '@/redux/user/user.slice';
-import { autocompleteSearchReducer } from '@/redux/autocomplete/autocomplete.slice';
+import {
+  autocompleteChemicalReducer,
+  autocompleteDrugReducer,
+  autocompleteSearchReducer,
+} from '@/redux/autocomplete/autocomplete.slice';
 import {
   AnyAction,
   ListenerEffectAPI,
@@ -40,6 +44,8 @@ import statisticsReducer from './statistics/statistics.slice';
 
 export const reducers = {
   autocompleteSearch: autocompleteSearchReducer,
+  autocompleteDrug: autocompleteDrugReducer,
+  autocompleteChemical: autocompleteChemicalReducer,
   search: searchReducer,
   project: projectReducer,
   projects: projectsReducer,