diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx index 05231d6f5f479ae6cdf8bf1d21a037481cf99906..f7e15f5e913a69c269894fa4e97c6b65e2902e87 100644 --- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx +++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx @@ -8,26 +8,18 @@ import { } from '@/redux/search/search.selectors'; import { getSearchData } from '@/redux/search/search.thunks'; import Image from 'next/image'; -import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'; +import { ChangeEvent, KeyboardEvent, useState } from 'react'; import { useSelector } from 'react-redux'; -import { useRouter } from 'next/router'; 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, setSearchValue] = useState<string>(''); const dispatch = useAppDispatch(); - const { query } = useRouter(); - - useEffect(() => { - if (!searchValue && query.searchValue) { - setSearchValue(String(query.searchValue)); - } - }, [searchValue, query]); const openSearchDrawerIfClosed = (defaultSearchTab: string): void => { if (!isDrawerOpen) { @@ -35,8 +27,9 @@ export const SearchBar = (): JSX.Element => { } }; - const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void => + const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void => { setSearchValue(event.target.value); + }; const onSearchClick = (): void => { const searchValues = getSearchValuesArrayAndTrimToSeven(searchValue); diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts index 6580ded53c7165fd1a104b3e10344e3ce0762d09..0c2079d04320fc6daf02b194402aa5b2bbddb32b 100644 --- a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts +++ b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts @@ -1,5 +1,7 @@ /* eslint-disable no-magic-numbers */ import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors'; +import { searchedChemicalsBioEntitesOfCurrentMapSelector } from '@/redux/chemicals/chemicals.selectors'; +import { searchedDrugsBioEntitesOfCurrentMapSelector } from '@/redux/drugs/drugs.selectors'; import { usePointToProjection } from '@/utils/map/usePointToProjection'; import BaseLayer from 'ol/layer/Base'; import VectorLayer from 'ol/layer/Vector'; @@ -11,11 +13,17 @@ import { getBioEntitiesFeatures } from './getBioEntitiesFeatures'; export const useOlMapPinsLayer = (): BaseLayer => { const pointToProjection = usePointToProjection(); const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap); + const chemicalsBioEntities = useSelector(searchedChemicalsBioEntitesOfCurrentMapSelector); + const drugsBioEntities = useSelector(searchedDrugsBioEntitesOfCurrentMapSelector); const bioEntityFeatures = useMemo( () => - [getBioEntitiesFeatures(contentBioEntites, { pointToProjection, type: 'bioEntity' })].flat(), - [contentBioEntites, pointToProjection], + [ + getBioEntitiesFeatures(contentBioEntites, { pointToProjection, type: 'bioEntity' }), + getBioEntitiesFeatures(chemicalsBioEntities, { pointToProjection, type: 'chemicals' }), + getBioEntitiesFeatures(drugsBioEntities, { pointToProjection, type: 'drugs' }), + ].flat(), + [contentBioEntites, drugsBioEntities, chemicalsBioEntities, pointToProjection], ); const vectorSource = useMemo(() => { diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.test.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.test.ts index f188b5fc5828b89f43f98e6f590a05da7c66bbbd..2cb880c6e384ee7522d63240a0467be5cbd650b8 100644 --- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.test.ts +++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.test.ts @@ -1,4 +1,3 @@ -import { FIRST } from '@/constants/common'; import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener'; import { handleDataReset } from './handleDataReset'; @@ -6,10 +5,17 @@ describe('handleDataReset', () => { const { store } = getReduxStoreWithActionsListener(); const { dispatch } = store; - it('should dispatch resetReactionsData action', () => { + it('should dispatch reset actions', () => { dispatch(handleDataReset); const actions = store.getActions(); - expect(actions[FIRST].type).toBe('reactions/resetReactionsData'); + const actionsTypes = [ + 'reactions/resetReactionsData', + 'search/clearSearchData', + 'drugs/clearDrugsData', + 'chemicals/clearChemicalsData', + ]; + + expect(actions.map(a => a.type)).toStrictEqual(actionsTypes); }); }); diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts index 4d3e1d6d526ee22725aff6b92ccbf273eec5ff79..3e52a72560d501ba6726c32d9e6dd5f9aa40b8d4 100644 --- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts +++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleDataReset.ts @@ -1,6 +1,17 @@ +import { clearChemicalsData } from '@/redux/chemicals/chemicals.slice'; +import { clearDrugsData } from '@/redux/drugs/drugs.slice'; import { resetReactionsData } from '@/redux/reactions/reactions.slice'; +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/models/targetSchema.ts b/src/models/targetSchema.ts index bda0bfcaac652d98c5086c59a11687f4e792e1d8..015626e16f4e06ce2276a5e9a597701b63c7a031 100644 --- a/src/models/targetSchema.ts +++ b/src/models/targetSchema.ts @@ -1,6 +1,6 @@ import { z } from 'zod'; +import { bioEntitySchema } from './bioEntitySchema'; import { referenceSchema } from './referenceSchema'; -import { targetElementSchema } from './targetElementSchema'; import { targetParticipantSchema } from './targetParticipantSchema'; export const targetSchema = z.object({ @@ -9,7 +9,7 @@ export const targetSchema = z.object({ /** list of target references */ references: z.array(referenceSchema), /** list of elements on the map associated with this target */ - targetElements: z.array(targetElementSchema), + targetElements: z.array(bioEntitySchema), /** list of identifiers associated with this target */ targetParticipants: z.array(targetParticipantSchema), }); diff --git a/src/redux/chemicals/chemicals.reducers.test.ts b/src/redux/chemicals/chemicals.reducers.test.ts index 0a990dc596369385d33b4149fe72e5212a5726cb..59a87b20f784e059d63c5ea030274275b2562a6b 100644 --- a/src/redux/chemicals/chemicals.reducers.test.ts +++ b/src/redux/chemicals/chemicals.reducers.test.ts @@ -1,17 +1,17 @@ +import { DEFAULT_ERROR } from '@/constants/errors'; import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture'; import { apiPath } from '@/redux/apiPath'; -import { DEFAULT_ERROR } from '@/constants/errors'; import { ToolkitStoreWithSingleSlice, createStoreInstanceUsingSliceReducer, } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { mockNetworkResponse } from '@/utils/mockNetworkResponse'; +import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse'; import { HttpStatusCode } from 'axios'; import chemicalsReducer from './chemicals.slice'; import { getChemicals } from './chemicals.thunks'; import { ChemicalsState } from './chemicals.types'; -const mockedAxiosClient = mockNetworkResponse(); +const mockedAxiosClient = mockNetworkNewAPIResponse(); const SEARCH_QUERY = 'Corticosterone'; const INITIAL_STATE: ChemicalsState = { diff --git a/src/redux/chemicals/chemicals.reducers.ts b/src/redux/chemicals/chemicals.reducers.ts index 5f7603f6ad3ffe21ac980e9c85b4f4c0eaa7b076..1034ead8fca8535dae1481714de1e1db14644734 100644 --- a/src/redux/chemicals/chemicals.reducers.ts +++ b/src/redux/chemicals/chemicals.reducers.ts @@ -1,5 +1,5 @@ -import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; import { DEFAULT_ERROR } from '@/constants/errors'; +import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; import { getChemicals, getMultiChemicals } from './chemicals.thunks'; import { ChemicalsState } from './chemicals.types'; @@ -43,3 +43,8 @@ export const getMultiChemicalsReducer = ( // TODO: error management to be discussed in the team }); }; + +export const clearChemicalsDataReducer = (state: ChemicalsState): void => { + state.data = []; + state.loading = 'idle'; +}; diff --git a/src/redux/chemicals/chemicals.selectors.ts b/src/redux/chemicals/chemicals.selectors.ts index 09f59c724e9b9b47567276f8c0273ad1562ab828..f2d10808719aa1f04fac0a93bba36bc68812407d 100644 --- a/src/redux/chemicals/chemicals.selectors.ts +++ b/src/redux/chemicals/chemicals.selectors.ts @@ -1,9 +1,10 @@ import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common'; import { rootSelector } from '@/redux/root/root.selectors'; -import { Chemical } from '@/types/models'; -import { createSelector } from '@reduxjs/toolkit'; import { MultiSearchData } from '@/types/fetchDataState'; +import { BioEntity, Chemical } from '@/types/models'; +import { createSelector } from '@reduxjs/toolkit'; import { currentSelectedSearchElement } from '../drawer/drawer.selectors'; +import { currentModelIdSelector } from '../models/models.selectors'; export const chemicalsSelector = createSelector(rootSelector, state => state.chemicals); @@ -16,6 +17,24 @@ export const chemicalsForSelectedSearchElementSelector = createSelector( ), ); +export const searchedChemicalsBioEntitesOfCurrentMapSelector = createSelector( + chemicalsSelector, + currentSelectedSearchElement, + currentModelIdSelector, + (chemicalsState, currentSearchElement, currentModelId): BioEntity[] => { + return (chemicalsState?.data || []) + .filter(({ searchQueryElement }) => + currentSearchElement ? searchQueryElement === currentSearchElement : true, + ) + .map(({ data }) => data || []) + .flat() + .map(({ targets }) => targets.map(({ targetElements }) => targetElements)) + .flat() + .flat() + .filter(bioEntity => bioEntity.model === currentModelId); + }, +); + export const loadingChemicalsStatusSelector = createSelector( chemicalsForSelectedSearchElementSelector, state => state?.loading, diff --git a/src/redux/chemicals/chemicals.slice.ts b/src/redux/chemicals/chemicals.slice.ts index 2528d4f2aa642b003f5d41ee746b50f343cf12d8..6de994ae33b31d87b6c4a22ad209fb7b1c1bdcba 100644 --- a/src/redux/chemicals/chemicals.slice.ts +++ b/src/redux/chemicals/chemicals.slice.ts @@ -1,6 +1,10 @@ import { ChemicalsState } from '@/redux/chemicals/chemicals.types'; import { createSlice } from '@reduxjs/toolkit'; -import { getChemicalsReducer, getMultiChemicalsReducer } from './chemicals.reducers'; +import { + clearChemicalsDataReducer, + getChemicalsReducer, + getMultiChemicalsReducer, +} from './chemicals.reducers'; const initialState: ChemicalsState = { data: [], @@ -11,11 +15,15 @@ const initialState: ChemicalsState = { export const chemicalsSlice = createSlice({ name: 'chemicals', initialState, - reducers: {}, + reducers: { + clearChemicalsData: clearChemicalsDataReducer, + }, extraReducers: builder => { getChemicalsReducer(builder); getMultiChemicalsReducer(builder); }, }); +export const { clearChemicalsData } = chemicalsSlice.actions; + export default chemicalsSlice.reducer; diff --git a/src/redux/chemicals/chemicals.thunks.test.ts b/src/redux/chemicals/chemicals.thunks.test.ts index 93945477c94dd25afcf561a04ac592ce57d12f2e..88926792155e930d39ae396f25733fcb4e1fe099 100644 --- a/src/redux/chemicals/chemicals.thunks.test.ts +++ b/src/redux/chemicals/chemicals.thunks.test.ts @@ -4,13 +4,13 @@ import { ToolkitStoreWithSingleSlice, createStoreInstanceUsingSliceReducer, } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { mockNetworkResponse } from '@/utils/mockNetworkResponse'; +import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse'; import { HttpStatusCode } from 'axios'; import chemicalsReducer from './chemicals.slice'; import { getChemicals } from './chemicals.thunks'; import { ChemicalsState } from './chemicals.types'; -const mockedAxiosClient = mockNetworkResponse(); +const mockedAxiosClient = mockNetworkNewAPIResponse(); const SEARCH_QUERY = 'Corticosterone'; describe('chemicals thunks', () => { diff --git a/src/redux/chemicals/chemicals.thunks.ts b/src/redux/chemicals/chemicals.thunks.ts index 848ee24d55f5d52d7f4cd4b929fdfc296a513bec..0afc94db5f8f686b845e8e514082866b18219908 100644 --- a/src/redux/chemicals/chemicals.thunks.ts +++ b/src/redux/chemicals/chemicals.thunks.ts @@ -1,6 +1,6 @@ import { chemicalSchema } from '@/models/chemicalSchema'; import { apiPath } from '@/redux/apiPath'; -import { axiosInstance } from '@/services/api/utils/axiosInstance'; +import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance'; import { Chemical } from '@/types/models'; import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema'; import { createAsyncThunk } from '@reduxjs/toolkit'; @@ -9,7 +9,7 @@ import { z } from 'zod'; export const getChemicals = createAsyncThunk( 'project/getChemicals', async (searchQuery: string): Promise<Chemical[] | undefined> => { - const response = await axiosInstance.get<Chemical[]>( + const response = await axiosInstanceNewAPI.get<Chemical[]>( apiPath.getChemicalsStringWithQuery(searchQuery), ); diff --git a/src/redux/drugs/drugs.reducers.test.ts b/src/redux/drugs/drugs.reducers.test.ts index b0db33c10f7deba0eee6e2a617a310473d49e154..3ad034db1d614a691017c221f541dfc39e4b6fcf 100644 --- a/src/redux/drugs/drugs.reducers.test.ts +++ b/src/redux/drugs/drugs.reducers.test.ts @@ -1,17 +1,17 @@ -import { HttpStatusCode } from 'axios'; +import { DEFAULT_ERROR } from '@/constants/errors'; import { drugsFixture } from '@/models/fixtures/drugFixtures'; -import { mockNetworkResponse } from '@/utils/mockNetworkResponse'; +import { apiPath } from '@/redux/apiPath'; import { ToolkitStoreWithSingleSlice, createStoreInstanceUsingSliceReducer, } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { DEFAULT_ERROR } from '@/constants/errors'; -import { apiPath } from '@/redux/apiPath'; -import { getDrugs } from './drugs.thunks'; +import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse'; +import { HttpStatusCode } from 'axios'; import drugsReducer from './drugs.slice'; +import { getDrugs } from './drugs.thunks'; import { DrugsState } from './drugs.types'; -const mockedAxiosClient = mockNetworkResponse(); +const mockedAxiosClient = mockNetworkNewAPIResponse(); const SEARCH_QUERY = 'aspirin'; const INITIAL_STATE: DrugsState = { diff --git a/src/redux/drugs/drugs.reducers.ts b/src/redux/drugs/drugs.reducers.ts index 4dcd353fb5b7333e0abcedf15d41980ed08fff36..a3f834644c319dc7f31a40a7b318c30ef8f57b53 100644 --- a/src/redux/drugs/drugs.reducers.ts +++ b/src/redux/drugs/drugs.reducers.ts @@ -1,7 +1,7 @@ import { DEFAULT_ERROR } from '@/constants/errors'; import { ActionReducerMapBuilder } from '@reduxjs/toolkit'; -import { DrugsState } from './drugs.types'; import { getDrugs, getMultiDrugs } from './drugs.thunks'; +import { DrugsState } from './drugs.types'; export const getDrugsReducer = (builder: ActionReducerMapBuilder<DrugsState>): void => { builder.addCase(getDrugs.pending, (state, action) => { @@ -41,3 +41,8 @@ export const getMultiDrugsReducer = (builder: ActionReducerMapBuilder<DrugsState // TODO: error management to be discussed in the team }); }; + +export const clearDrugsDataReducer = (state: DrugsState): void => { + state.data = []; + state.loading = 'idle'; +}; diff --git a/src/redux/drugs/drugs.selectors.ts b/src/redux/drugs/drugs.selectors.ts index 91cd36888dc7af0eeb1914ff2cefa38a745a6662..6790c081e1303eaec49e5b8dc3045ba4a8d4a0be 100644 --- a/src/redux/drugs/drugs.selectors.ts +++ b/src/redux/drugs/drugs.selectors.ts @@ -1,9 +1,10 @@ import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common'; import { rootSelector } from '@/redux/root/root.selectors'; -import { createSelector } from '@reduxjs/toolkit'; import { MultiSearchData } from '@/types/fetchDataState'; -import { Drug } from '@/types/models'; +import { BioEntity, Drug } from '@/types/models'; +import { createSelector } from '@reduxjs/toolkit'; import { currentSelectedSearchElement } from '../drawer/drawer.selectors'; +import { currentModelIdSelector } from '../models/models.selectors'; export const drugsSelector = createSelector(rootSelector, state => state.drugs); @@ -29,3 +30,21 @@ export const numberOfDrugsSelector = createSelector( return state.data.length && state?.data.map(e => e.targets.length)?.reduce((a, b) => a + b); }, ); + +export const searchedDrugsBioEntitesOfCurrentMapSelector = createSelector( + drugsSelector, + currentSelectedSearchElement, + currentModelIdSelector, + (drugsState, currentSearchElement, currentModelId): BioEntity[] => { + return (drugsState?.data || []) + .filter(({ searchQueryElement }) => + currentSearchElement ? searchQueryElement === currentSearchElement : true, + ) + .map(({ data }) => data || []) + .flat() + .map(({ targets }) => targets.map(({ targetElements }) => targetElements)) + .flat() + .flat() + .filter(bioEntity => bioEntity.model === currentModelId); + }, +); diff --git a/src/redux/drugs/drugs.slice.ts b/src/redux/drugs/drugs.slice.ts index 5d1a16e7379ef4019d52a741271b52438ea52a68..d7e8660d14e8f66967e094ecadb1dfb73a05479c 100644 --- a/src/redux/drugs/drugs.slice.ts +++ b/src/redux/drugs/drugs.slice.ts @@ -1,6 +1,6 @@ -import { createSlice } from '@reduxjs/toolkit'; import { DrugsState } from '@/redux/drugs/drugs.types'; -import { getDrugsReducer, getMultiDrugsReducer } from './drugs.reducers'; +import { createSlice } from '@reduxjs/toolkit'; +import { clearDrugsDataReducer, getDrugsReducer, getMultiDrugsReducer } from './drugs.reducers'; const initialState: DrugsState = { data: [], @@ -11,11 +11,15 @@ const initialState: DrugsState = { export const drugsSlice = createSlice({ name: 'drugs', initialState, - reducers: {}, + reducers: { + clearDrugsData: clearDrugsDataReducer, + }, extraReducers: builder => { getDrugsReducer(builder); getMultiDrugsReducer(builder); }, }); +export const { clearDrugsData } = drugsSlice.actions; + export default drugsSlice.reducer; diff --git a/src/redux/drugs/drugs.thunks.test.ts b/src/redux/drugs/drugs.thunks.test.ts index 514ffccfe9f8b57d1f698a98e48640f35186c130..bb18ddf134667e1c33c4d6d29388a511df9ecc97 100644 --- a/src/redux/drugs/drugs.thunks.test.ts +++ b/src/redux/drugs/drugs.thunks.test.ts @@ -1,16 +1,16 @@ -import { HttpStatusCode } from 'axios'; import { drugsFixture } from '@/models/fixtures/drugFixtures'; -import { mockNetworkResponse } from '@/utils/mockNetworkResponse'; +import { apiPath } from '@/redux/apiPath'; import { ToolkitStoreWithSingleSlice, createStoreInstanceUsingSliceReducer, } from '@/utils/createStoreInstanceUsingSliceReducer'; -import { apiPath } from '@/redux/apiPath'; -import { getDrugs } from './drugs.thunks'; +import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse'; +import { HttpStatusCode } from 'axios'; import drugsReducer from './drugs.slice'; +import { getDrugs } from './drugs.thunks'; import { DrugsState } from './drugs.types'; -const mockedAxiosClient = mockNetworkResponse(); +const mockedAxiosClient = mockNetworkNewAPIResponse(); const SEARCH_QUERY = 'aspirin'; describe('drugs thunks', () => { diff --git a/src/redux/drugs/drugs.thunks.ts b/src/redux/drugs/drugs.thunks.ts index 1f3258be999a25a219bf55ebbc01513a43cb6c8a..30074e33d6ee751c2f8886e3793050ba84e1d41f 100644 --- a/src/redux/drugs/drugs.thunks.ts +++ b/src/redux/drugs/drugs.thunks.ts @@ -1,15 +1,17 @@ -import { z } from 'zod'; -import { createAsyncThunk } from '@reduxjs/toolkit'; -import { axiosInstance } from '@/services/api/utils/axiosInstance'; -import { Drug } from '@/types/models'; import { drugSchema } from '@/models/drugSchema'; -import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema'; import { apiPath } from '@/redux/apiPath'; +import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance'; +import { Drug } from '@/types/models'; +import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema'; +import { createAsyncThunk } from '@reduxjs/toolkit'; +import { z } from 'zod'; export const getDrugs = createAsyncThunk( 'project/getDrugs', async (searchQuery: string): Promise<Drug[] | undefined> => { - const response = await axiosInstance.get<Drug[]>(apiPath.getDrugsStringWithQuery(searchQuery)); + const response = await axiosInstanceNewAPI.get<Drug[]>( + apiPath.getDrugsStringWithQuery(searchQuery), + ); const isDataValid = validateDataUsingZodSchema(response.data, z.array(drugSchema)); diff --git a/src/redux/search/search.constants.ts b/src/redux/search/search.constants.ts new file mode 100644 index 0000000000000000000000000000000000000000..962778465db9e927729e9369e826702d72b1a166 --- /dev/null +++ b/src/redux/search/search.constants.ts @@ -0,0 +1,7 @@ +import { SearchState } from './search.types'; + +export const SEARCH_INITIAL_STATE: SearchState = { + searchValue: [''], + perfectMatch: false, + loading: 'idle', +}; diff --git a/src/redux/search/search.reducers.ts b/src/redux/search/search.reducers.ts index d4e555cda88fb3bf7281cfb9f5be985efed1a56e..1a08e168bb29a35eaf38f11231f82fe09704d2e7 100644 --- a/src/redux/search/search.reducers.ts +++ b/src/redux/search/search.reducers.ts @@ -2,6 +2,7 @@ import { getSearchData } from '@/redux/search/search.thunks'; 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) => { @@ -21,3 +22,8 @@ export const getSearchDataReducer = (builder: ActionReducerMapBuilder<SearchStat export const setPerfectMatchReducer = (state: SearchState, action: SetPerfectMatchAction): void => { state.perfectMatch = 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.slice.ts b/src/redux/search/search.slice.ts index 08223dc6fe578d1b3abfe7e1129f4821c87253e9..8856ebfb71b08570552a445878635da9aac3e5bf 100644 --- a/src/redux/search/search.slice.ts +++ b/src/redux/search/search.slice.ts @@ -1,24 +1,23 @@ -import { getSearchDataReducer, setPerfectMatchReducer } from '@/redux/search/search.reducers'; -import { SearchState } from '@/redux/search/search.types'; +import { + clearSearchDataReducer, + getSearchDataReducer, + setPerfectMatchReducer, +} from '@/redux/search/search.reducers'; import { createSlice } from '@reduxjs/toolkit'; - -const initialState: SearchState = { - searchValue: [''], - perfectMatch: false, - loading: 'idle', -}; +import { SEARCH_INITIAL_STATE } from './search.constants'; export const searchSlice = createSlice({ name: 'search', - initialState, + initialState: SEARCH_INITIAL_STATE, reducers: { setPerfectMatch: setPerfectMatchReducer, + clearSearchData: clearSearchDataReducer, }, extraReducers(builder) { getSearchDataReducer(builder); }, }); -export const { setPerfectMatch } = searchSlice.actions; +export const { setPerfectMatch, clearSearchData } = searchSlice.actions; export default searchSlice.reducer;