diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx index cecb66129e4e2127dea368b311f86579f719036e..f7e15f5e913a69c269894fa4e97c6b65e2902e87 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -5,22 +5,20 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { isPendingSearchStatusSelector, perfectMatchSelector, - searchInputSelector, } from '@/redux/search/search.selectors'; -import { setSearchInput } from '@/redux/search/search.slice'; import { getSearchData } from '@/redux/search/search.thunks'; import Image from 'next/image'; -import { ChangeEvent, KeyboardEvent } from 'react'; +import { ChangeEvent, KeyboardEvent, useState } from 'react'; import { useSelector } from 'react-redux'; import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils'; const ENTER_KEY_CODE = 'Enter'; export const SearchBar = (): JSX.Element => { + const [searchValue, setSearchValue] = useState<string>(''); const isPendingSearchStatus = useSelector(isPendingSearchStatusSelector); const isDrawerOpen = useSelector(isDrawerOpenSelector); const isPerfectMatch = useSelector(perfectMatchSelector); - const searchValue = useSelector(searchInputSelector); const dispatch = useAppDispatch(); const openSearchDrawerIfClosed = (defaultSearchTab: string): void => { @@ -30,7 +28,7 @@ export const SearchBar = (): JSX.Element => { }; const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void => { - dispatch(setSearchInput(event.target.value)); + setSearchValue(event.target.value); }; const onSearchClick = (): void => { diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts index 1bc13bd160a0514668f7faf05a7224e7315ce3b7..3e52a72560d501ba6726c32d9e6dd5f9aa40b8d4 100644 --- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts +++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts @@ -5,8 +5,13 @@ import { clearSearchData } from '@/redux/search/search.slice'; import { AppDispatch } from '@/redux/store'; export const handleDataReset = (dispatch: AppDispatch): void => { + // Reset reactions list to prevent keeping the old selected reaction rendered dispatch(resetReactionsData()); + + // Reset search data to prevent invalid filtering of the click-search () dispatch(clearSearchData()); + + // Reset old pins data dispatch(clearDrugsData()); dispatch(clearChemicalsData()); }; diff --git a/src/redux/search/search.constants.ts b/src/redux/search/search.constants.ts index 9a7afe4d6738df81e0fa0f8a29f10fbac28991a2..962778465db9e927729e9369e826702d72b1a166 100644 --- a/src/redux/search/search.constants.ts +++ b/src/redux/search/search.constants.ts @@ -1,7 +1,6 @@ import { SearchState } from './search.types'; export const SEARCH_INITIAL_STATE: SearchState = { - searchInput: '', searchValue: [''], perfectMatch: false, loading: 'idle', diff --git a/src/redux/search/search.mock.ts b/src/redux/search/search.mock.ts index d5e7cc4a437b53b0c3b19d14de65cd1a001faee8..16f5498f21913e2f8baac144f58daf87ae1c5551 100644 --- a/src/redux/search/search.mock.ts +++ b/src/redux/search/search.mock.ts @@ -1,7 +1,6 @@ import { SearchState } from './search.types'; export const SEARCH_STATE_INITIAL_MOCK: SearchState = { - searchInput: '', searchValue: [''], perfectMatch: false, loading: 'idle', diff --git a/src/redux/search/search.reducers.test.ts b/src/redux/search/search.reducers.test.ts index 76a76b3c7a753ac1a1e2391358f094b7db94a9a2..51bab3d5ae4226133bdeefd65485c77190c0b64d 100644 --- a/src/redux/search/search.reducers.test.ts +++ b/src/redux/search/search.reducers.test.ts @@ -9,7 +9,6 @@ import searchReducer, { setPerfectMatch } from './search.slice'; const SEARCH_QUERY = ['Corticosterone']; const INITIAL_STATE: SearchState = { - searchInput: '', searchValue: [''], perfectMatch: false, loading: 'idle', diff --git a/src/redux/search/search.reducers.ts b/src/redux/search/search.reducers.ts index 4835372100f606dfe1db39d3aa690791e1793444..1a08e168bb29a35eaf38f11231f82fe09704d2e7 100644 --- a/src/redux/search/search.reducers.ts +++ b/src/redux/search/search.reducers.ts @@ -1,16 +1,11 @@ // updating state import { getSearchData } from '@/redux/search/search.thunks'; -import { - SearchState, - SetPerfectMatchAction, - SetSearchInputAction, -} from '@/redux/search/search.types'; +import { SearchState, SetPerfectMatchAction } from '@/redux/search/search.types'; import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; import { SEARCH_INITIAL_STATE } from './search.constants'; export const getSearchDataReducer = (builder: ActionReducerMapBuilder<SearchState>): void => { builder.addCase(getSearchData.pending, (state, action) => { - state.searchInput = action.meta.arg.searchQueries.join(';'); state.searchValue = action.meta.arg.searchQueries; state.perfectMatch = action.meta.arg.isPerfectMatch; state.loading = 'pending'; @@ -28,10 +23,6 @@ export const setPerfectMatchReducer = (state: SearchState, action: SetPerfectMat state.perfectMatch = action.payload; }; -export const setSearchInputReducer = (state: SearchState, action: SetSearchInputAction): void => { - state.searchInput = action.payload; -}; - export const clearSearchDataReducer = (state: SearchState): void => { state.searchValue = SEARCH_INITIAL_STATE.searchValue; state.loading = SEARCH_INITIAL_STATE.loading; diff --git a/src/redux/search/search.selectors.ts b/src/redux/search/search.selectors.ts index 0add08e0eef29a62899e6e34b2bc249ab9fdb590..f2c3b256db453d8093dd6c37bccd74425f311529 100644 --- a/src/redux/search/search.selectors.ts +++ b/src/redux/search/search.selectors.ts @@ -15,5 +15,3 @@ export const isPendingSearchStatusSelector = createSelector( ); export const perfectMatchSelector = createSelector(searchSelector, state => state.perfectMatch); - -export const searchInputSelector = createSelector(searchSelector, state => state.searchInput); diff --git a/src/redux/search/search.slice.ts b/src/redux/search/search.slice.ts index f746f06e1bed6a8dfa49e3859ee32b48abf5420f..8856ebfb71b08570552a445878635da9aac3e5bf 100644 --- a/src/redux/search/search.slice.ts +++ b/src/redux/search/search.slice.ts @@ -2,7 +2,6 @@ import { clearSearchDataReducer, getSearchDataReducer, setPerfectMatchReducer, - setSearchInputReducer, } from '@/redux/search/search.reducers'; import { createSlice } from '@reduxjs/toolkit'; import { SEARCH_INITIAL_STATE } from './search.constants'; @@ -12,7 +11,6 @@ export const searchSlice = createSlice({ initialState: SEARCH_INITIAL_STATE, reducers: { setPerfectMatch: setPerfectMatchReducer, - setSearchInput: setSearchInputReducer, clearSearchData: clearSearchDataReducer, }, extraReducers(builder) { @@ -20,6 +18,6 @@ export const searchSlice = createSlice({ }, }); -export const { setPerfectMatch, setSearchInput, clearSearchData } = searchSlice.actions; +export const { setPerfectMatch, clearSearchData } = searchSlice.actions; export default searchSlice.reducer; diff --git a/src/redux/search/search.types.ts b/src/redux/search/search.types.ts index dfb8685452ab0d24b434815491e19e681b391a3a..9525aa08ce6afc6ce7623fe462c95d3ab3fe13fc 100644 --- a/src/redux/search/search.types.ts +++ b/src/redux/search/search.types.ts @@ -2,7 +2,6 @@ import { Loading } from '@/types/loadingState'; import { PayloadAction } from '@reduxjs/toolkit'; export interface SearchState { - searchInput: string; searchValue: string[]; perfectMatch: boolean; loading: Loading; @@ -10,6 +9,3 @@ export interface SearchState { export type SetPerfectMatchPayload = boolean; export type SetPerfectMatchAction = PayloadAction<SetPerfectMatchPayload>; - -export type SetSearchInputPayload = string; -export type SetSearchInputAction = PayloadAction<SetSearchInputPayload>;