From 629dd348702a69a2b807761e45932293cd1055a5 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 31 Mar 2023 17:26:11 +0200 Subject: [PATCH] change(ui) - search url improvements, using hook --- .../shared/SessionSearch/SessionSearch.tsx | 6 +- .../SessionSearchField/SessionSearchField.tsx | 1 - .../SessionSearchQueryParamHandler.tsx | 39 ------- .../SessionSearchQueryParamHandler/index.ts | 1 - .../app/hooks/useSessionSearchQueryHandler.ts | 36 +++++++ frontend/app/svg/ca-no-sessions-in-vault.svg | 100 +++++++----------- 6 files changed, 78 insertions(+), 105 deletions(-) delete mode 100644 frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx delete mode 100644 frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts create mode 100644 frontend/app/hooks/useSessionSearchQueryHandler.ts diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx index 84fb770a8..1d25974cf 100644 --- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx +++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx @@ -5,9 +5,9 @@ import SaveFilterButton from 'Shared/SaveFilterButton'; import { connect } from 'react-redux'; import { Button } from 'UI'; import { edit, addFilter, fetchSessions, updateFilter } from 'Duck/search'; -import SessionSearchQueryParamHandler from 'Shared/SessionSearchQueryParamHandler'; import { debounce } from 'App/utils'; +import useSessionSearchQueryHandler from 'App/hooks/useSessionSearchQueryHandler'; let debounceFetch: any = () => {} @@ -24,6 +24,9 @@ function SessionSearch(props: Props) { const { appliedFilter, saveRequestPayloads = false, metaLoading } = props; const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0; const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0; + + useSessionSearchQueryHandler({ appliedFilter, applyFilter: props.updateFilter }); + useEffect(() => { debounceFetch = debounce(() => props.fetchSessions(), 500); }, []) @@ -71,7 +74,6 @@ function SessionSearch(props: Props) { return !metaLoading && ( <> - {hasEvents || hasFilters ? (
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx index 84745c8ba..64904e358 100644 --- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx @@ -15,7 +15,6 @@ interface Props { fetchFilterSearch: (query: any) => void; addFilterByKeyAndValue: (key: string, value: string) => void; liveAddFilterByKeyAndValue: (key: string, value: string) => void; - filterSearchList: any; liveFetchFilterSearch: any; } function SessionSearchField(props: Props) { diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx deleted file mode 100644 index e38729b2a..000000000 --- a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useEffect } from 'react'; -import { useHistory } from 'react-router'; -import { connect } from 'react-redux'; -import { addFilterByKeyAndValue, addFilter } from 'Duck/search'; -import { updateFilter } from 'Duck/search'; -import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search'; - -interface Props { - appliedFilter: any; - updateFilter: any; - addFilterByKeyAndValue: typeof addFilterByKeyAndValue; - addFilter: typeof addFilter; -} -const SessionSearchQueryParamHandler = (props: Props) => { - const { appliedFilter } = props; - const history = useHistory(); - - const applyFilterFromQuery = () => { - const filter = getFiltersFromQuery(history.location.search, appliedFilter); - props.updateFilter(filter, true, false); - }; - - const generateUrlQuery = () => { - const search: any = createUrlQuery(appliedFilter); - history.replace({ search }); - }; - - useEffect(applyFilterFromQuery, []); - useEffect(generateUrlQuery, [appliedFilter]); - - return <>; -}; - -export default connect( - (state: any) => ({ - appliedFilter: state.getIn(['search', 'instance']), - }), - { addFilterByKeyAndValue, addFilter, updateFilter } -)(SessionSearchQueryParamHandler); diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts b/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts deleted file mode 100644 index c13bb493d..000000000 --- a/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SessionSearchQueryParamHandler'; \ No newline at end of file diff --git a/frontend/app/hooks/useSessionSearchQueryHandler.ts b/frontend/app/hooks/useSessionSearchQueryHandler.ts new file mode 100644 index 000000000..555914e49 --- /dev/null +++ b/frontend/app/hooks/useSessionSearchQueryHandler.ts @@ -0,0 +1,36 @@ +import { useEffect } from 'react'; +import { useHistory } from 'react-router'; +import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search'; + +interface Props { + appliedFilter: any; + applyFilter: any; +} + +const useSessionSearchQueryHandler = (props: Props) => { + const { appliedFilter, applyFilter } = props; + const history = useHistory(); + + useEffect(() => { + const applyFilterFromQuery = () => { + console.log('called...'); + const filter = getFiltersFromQuery(history.location.search, appliedFilter); + applyFilter(filter, true, false); + }; + + applyFilterFromQuery(); + }, []); + + useEffect(() => { + const generateUrlQuery = () => { + const search: any = createUrlQuery(appliedFilter); + history.replace({ search }); + }; + + generateUrlQuery(); + }, [appliedFilter]); + + return null; +}; + +export default useSessionSearchQueryHandler; diff --git a/frontend/app/svg/ca-no-sessions-in-vault.svg b/frontend/app/svg/ca-no-sessions-in-vault.svg index 69470f8f6..ef3e41f0e 100644 --- a/frontend/app/svg/ca-no-sessions-in-vault.svg +++ b/frontend/app/svg/ca-no-sessions-in-vault.svg @@ -1,72 +1,48 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - + +