From 600023613bfc0ec979405b399d783c7044b14b84 Mon Sep 17 00:00:00 2001 From: Imen Chermiti Date: Thu, 29 Aug 2024 15:09:53 +0200 Subject: [PATCH] fix order search result --- src/client/src/components/Search/Search.js | 3 ++ src/client/src/containers/Search/Search.js | 8 ++-- .../src/services/Store/actions/search.js | 6 +++ .../services/Store/constants/ActionTypes.js | 1 + src/client/src/services/Store/hooks/search.js | 6 +++ .../src/services/Store/reducers/search.js | 10 +++++ src/client/src/utils/search-table/hooks.js | 38 +++++++++---------- 7 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/client/src/components/Search/Search.js b/src/client/src/components/Search/Search.js index e952b909..aa5217f4 100644 --- a/src/client/src/components/Search/Search.js +++ b/src/client/src/components/Search/Search.js @@ -35,6 +35,7 @@ const Search = ({ searchTerm, setSearchTerm, resetSearch, + resetSort, handlePageChange, addFilter, removeFilter, @@ -105,6 +106,7 @@ const Search = ({ })} onClick={(e) => { e.preventDefault(); + resetSort(); sendRequest(searchTerm, options); }} > @@ -257,6 +259,7 @@ Search.propTypes = { removeFilter: PropTypes.func.isRequired, removeFilters: PropTypes.func.isRequired, resetSearch: PropTypes.func.isRequired, + resetSort: PropTypes.func.isRequired, results: PropTypes.array, searchTerm: PropTypes.string.isRequired, sendRequest: PropTypes.func.isRequired, diff --git a/src/client/src/containers/Search/Search.js b/src/client/src/containers/Search/Search.js index b191a829..f8defa23 100644 --- a/src/client/src/containers/Search/Search.js +++ b/src/client/src/containers/Search/Search.js @@ -8,6 +8,7 @@ import SearchView from "../../components/Search"; import Http from "../../services/Http"; import { useResetSearch, + useResetSort, useSearchFilters, useSearchPage, useSearchQuery, @@ -60,6 +61,7 @@ const Search = () => { const { data, loading, error, makeQuery, query } = useSearchQuery(); const resetSearch = useResetSearch(); + const resetSort = useResetSort(); useEffect(() => { if (searchQuery) { onSearch(); @@ -67,10 +69,7 @@ const Search = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - if (sortField && sortDirection) { - onSearch(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps + onSearch(); }, [sortField, sortDirection]); const downloadQuery = async () => { @@ -141,6 +140,7 @@ const Search = () => { searchTerm={searchQuery || ""} setSearchTerm={setSearchQuery} resetSearch={resetSearch} + resetSort={resetSort} handlePageChange={handlePageChange} addFilter={addFilter} removeFilter={removeFilter} diff --git a/src/client/src/services/Store/actions/search.js b/src/client/src/services/Store/actions/search.js index 9cde6ef9..37c3b073 100644 --- a/src/client/src/services/Store/actions/search.js +++ b/src/client/src/services/Store/actions/search.js @@ -45,3 +45,9 @@ export const resetSearch = () => (dispatch) => { type: types.RESET_SEARCH, }); }; + +export const resetSort = () => (dispatch) => { + dispatch({ + type: types.RESET_SORT, + }); +}; diff --git a/src/client/src/services/Store/constants/ActionTypes.js b/src/client/src/services/Store/constants/ActionTypes.js index e0654210..1709f2c8 100644 --- a/src/client/src/services/Store/constants/ActionTypes.js +++ b/src/client/src/services/Store/constants/ActionTypes.js @@ -6,3 +6,4 @@ export const SET_SEARCH_FILTERS = "SET_SEARCH_FILTERS"; export const SET_SEARCH_SORT = "SET_SEARCH_SORT"; export const SET_SEARCH_RESULTS = "SET_SEARCH_RESULTS"; export const RESET_SEARCH = "RESET_SEARCH"; +export const RESET_SORT = "RESET_SORT"; diff --git a/src/client/src/services/Store/hooks/search.js b/src/client/src/services/Store/hooks/search.js index ea064a1f..9a363f8a 100644 --- a/src/client/src/services/Store/hooks/search.js +++ b/src/client/src/services/Store/hooks/search.js @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import { useElasticQuery } from "../../Elastic/elastic"; import { resetSearch, + resetSort, setSearchFilters, setSearchPage as setSearchPageAction, setSearchResults, @@ -117,3 +118,8 @@ export const useResetSearch = () => { return () => dispatch(resetSearch()); }; +export const useResetSort = () => { + const dispatch = useDispatch(); + + return () => dispatch(resetSort()); +}; diff --git a/src/client/src/services/Store/reducers/search.js b/src/client/src/services/Store/reducers/search.js index 01f8554d..10d97204 100644 --- a/src/client/src/services/Store/reducers/search.js +++ b/src/client/src/services/Store/reducers/search.js @@ -1,5 +1,6 @@ import { RESET_SEARCH, + RESET_SORT, SET_SEARCH_FILTERS, SET_SEARCH_PAGE, SET_SEARCH_RESULTS, @@ -52,6 +53,15 @@ const search = (state = initialState, action) => { sortField: action.sortField, }, }; + case RESET_SORT: + return { + ...state, + sort: { + ...state.sort, + sortField: null, + sortOrder: null, + }, + }; case SET_SEARCH_PAGE: return { diff --git a/src/client/src/utils/search-table/hooks.js b/src/client/src/utils/search-table/hooks.js index 8137d3a6..c8c20236 100644 --- a/src/client/src/utils/search-table/hooks.js +++ b/src/client/src/utils/search-table/hooks.js @@ -43,33 +43,29 @@ export const useSort = () => { const toggleSortField = (field) => { if (field !== sortField) { + // Set a new sort field and default direction to "desc" setSortField(field); setSearchSortField(field); - - addFilter("sortField", field); - addFilter("sortDirection", "desc"); - setSortDirection("desc"); - setSearchSortOrder("desc"); - return; - } - - if (sortDirection === "desc") { - setSortDirection("asc"); - setSearchSortOrder("asc"); - addFilter("sortDirection", "asc"); - - return; - } - if (sortDirection === "asc") { setSortDirection("desc"); setSearchSortOrder("desc"); + addFilter("sortField", field); addFilter("sortDirection", "desc"); - - return; + } else { + // Toggling sort direction if field is the same + if (sortDirection === "desc") { + setSortDirection("asc"); + setSearchSortOrder("asc"); + addFilter("sortDirection", "asc"); + } else if (sortDirection === "asc") { + // Reset on the third click + setSortField(null); + setSortDirection(null); + setSearchSortField(null); + setSearchSortOrder(null); + addFilter("sortField", null); + addFilter("sortDirection", null); + } } - - setSortField(null); - setSortDirection(null); }; return {