From 35433349cd1f9e22223a4d1ba359005956f9d07c Mon Sep 17 00:00:00 2001 From: Vitor George Date: Thu, 21 Nov 2024 12:51:46 +0000 Subject: [PATCH 1/4] Format files, no functionality changes --- .../controls/hooks/use-filters-with-query.ts | 33 +++++++++---------- .../components/stories/hub/container.tsx | 19 ++++++++--- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts index de077fc4c..898f68ecf 100644 --- a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts +++ b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts @@ -8,7 +8,7 @@ import { FilterActions, FilterAction, onFilterAction } from '../../utils'; export interface UseFiltersWithQueryResult { search: string; taxonomies: Record | Record; - onAction: FilterAction + onAction: FilterAction; } // @TECH-DEBT: We have diverged ways of dealing with query parameters and need to consolidate them. @@ -28,19 +28,18 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { return { search, taxonomies, - onAction, + onAction }; } - export function useFiltersWithQS({ - navigate - }: { - navigate: any - }): UseFiltersWithQueryResult { - - const useQsState = useQsStateCreator({ - commit: navigate - }); +export function useFiltersWithQS({ + navigate +}: { + navigate: any; +}): UseFiltersWithQueryResult { + const useQsState = useQsStateCreator({ + commit: navigate + }); const [search, setSearch] = useQsState.memo( { @@ -60,16 +59,16 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { [] ); - const onAction = useCallback( (action, value) => { - onFilterAction(action, value, taxonomies, setSearch, setTaxonomies);}, + onFilterAction(action, value, taxonomies, setSearch, setTaxonomies); + }, [setSearch, setTaxonomies, taxonomies] ); return { - search: search?? '', - taxonomies: taxonomies?? {}, - onAction, + search: search ?? '', + taxonomies: taxonomies ?? {}, + onAction }; -} \ No newline at end of file +} diff --git a/app/scripts/components/stories/hub/container.tsx b/app/scripts/components/stories/hub/container.tsx index 1733084c1..8c88e0834 100644 --- a/app/scripts/components/stories/hub/container.tsx +++ b/app/scripts/components/stories/hub/container.tsx @@ -19,10 +19,13 @@ import { import SmartLink from '$components/common/smart-link'; -const allStories = Object.values(stories).map((d) => d!.data).filter(d => !d.isHidden).map((d) => ({ ...d, path: getStoryPath(d)})); +const allStories = Object.values(stories) + .map((d) => d!.data) + .filter((d) => !d.isHidden) + .map((d) => ({ ...d, path: getStoryPath(d) })); function StoriesHubContainer() { - const controlVars = useFiltersWithQS({navigate: useNavigate()}); + const controlVars = useFiltersWithQS({ navigate: useNavigate() }); return ( controlVars} - linkProperties={{ LinkElement: SmartLink, pathAttributeKeyName: 'to'}} + linkProperties={{ + LinkElement: SmartLink, + pathAttributeKeyName: 'to' + }} pathname={STORIES_PATH} - storiesString={{one: getString('stories').one,other: getString('stories').other}} + storiesString={{ + one: getString('stories').one, + other: getString('stories').other + }} /> ); } -export default StoriesHubContainer; \ No newline at end of file +export default StoriesHubContainer; From 32bbf8c698ce5a3ce9f49fe73e27ac84c0e28d9b Mon Sep 17 00:00:00 2001 From: Vitor George Date: Thu, 21 Nov 2024 13:03:52 +0000 Subject: [PATCH 2/4] Avoid using useNavigate of react-router --- .../catalog/controls/hooks/use-filters-with-query.ts | 10 ++-------- app/scripts/components/data-catalog/container.tsx | 5 ++--- app/scripts/components/stories/hub/container.tsx | 3 +-- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts index 898f68ecf..cffefdc1a 100644 --- a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts +++ b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts @@ -32,14 +32,8 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { }; } -export function useFiltersWithQS({ - navigate -}: { - navigate: any; -}): UseFiltersWithQueryResult { - const useQsState = useQsStateCreator({ - commit: navigate - }); +export function useFiltersWithQS(): UseFiltersWithQueryResult { + const useQsState = useQsStateCreator(); const [search, setSearch] = useQsState.memo( { diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 22a9a569d..a0bebca10 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useNavigate, useLocation } from 'react-router'; +import { useLocation } from 'react-router'; import { getString } from 'veda'; import { getAllDatasetsProps } from '$utils/veda-data'; import CatalogView from '$components/common/catalog'; @@ -21,8 +21,7 @@ import SmartLink from '$components/common/smart-link'; export default function DataCatalogContainer() { const allDatasets = getAllDatasetsProps(veda_faux_module_datasets); const pathname = useLocation().pathname; - const navigate = useNavigate(); - const controlVars = useFiltersWithQS({navigate: navigate}); + const controlVars = useFiltersWithQS(); return ( diff --git a/app/scripts/components/stories/hub/container.tsx b/app/scripts/components/stories/hub/container.tsx index 8c88e0834..0ab0b868e 100644 --- a/app/scripts/components/stories/hub/container.tsx +++ b/app/scripts/components/stories/hub/container.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { useNavigate } from 'react-router'; import { stories, getString } from 'veda'; import HubContent from './hub-content'; @@ -25,7 +24,7 @@ const allStories = Object.values(stories) .map((d) => ({ ...d, path: getStoryPath(d) })); function StoriesHubContainer() { - const controlVars = useFiltersWithQS({ navigate: useNavigate() }); + const controlVars = useFiltersWithQS(); return ( Date: Thu, 21 Nov 2024 13:05:01 +0000 Subject: [PATCH 3/4] Format changed files --- app/scripts/components/data-catalog/container.tsx | 12 +++++++++--- app/scripts/components/stories/hub/hub-content.tsx | 8 ++++++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index a0bebca10..b56655908 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -25,8 +25,14 @@ export default function DataCatalogContainer() { return ( - - + + ); -} \ No newline at end of file +} diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx index b9fff876a..9d15364dd 100644 --- a/app/scripts/components/stories/hub/hub-content.tsx +++ b/app/scripts/components/stories/hub/hub-content.tsx @@ -21,7 +21,11 @@ import { } from '$components/common/fold'; import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps'; import { Card } from '$components/common/card'; -import { CardListGrid, CardMeta, CardTopicsList } from '$components/common/card/styles'; +import { + CardListGrid, + CardMeta, + CardTopicsList +} from '$components/common/card/styles'; import EmptyHub from '$components/common/empty-hub'; import { prepareDatasets } from '$components/common/catalog/prepare-datasets'; @@ -183,7 +187,7 @@ export default function HubContent(props: HubContentProps) { linkLabel='View more' linkProperties={{ ...linkProperties, - linkTo: `${d.asLink?.url ?? d.path}`, + linkTo: `${d.asLink?.url ?? d.path}` }} title={ From 34d878f44cec13464fd1e087173fed010d60eed3 Mon Sep 17 00:00:00 2001 From: Vitor George Date: Thu, 21 Nov 2024 13:38:43 +0000 Subject: [PATCH 4/4] Add custom function to commit search params using API that also works for NextJS --- .../controls/hooks/use-filters-with-query.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts index cffefdc1a..1d6f1bd75 100644 --- a/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts +++ b/app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts @@ -33,7 +33,21 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult { } export function useFiltersWithQS(): UseFiltersWithQueryResult { - const useQsState = useQsStateCreator(); + const useQsState = useQsStateCreator({ + commit: ({ search }) => { + if (typeof window !== 'undefined') { + const currentUrl = new URL(window.location.href); + const searchParams = search.startsWith('?') ? search.slice(1) : search; + currentUrl.search = searchParams; + window.history.pushState({}, '', currentUrl.toString()); + } else { + // eslint-disable-next-line no-console + console.log( + 'useFiltersWithQS: window is undefined, query string will update.' + ); + } + } + }); const [search, setSearch] = useQsState.memo( {