-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use different query parameter managements between data-catalog page a…
…nd new E&A page (#1021) **Related Ticket:** #1016 ### Description of Changes This PR makes Catalog View on the data-catalog page use QS-state for query parameters, while Catalog View on the new E&A page uses Jotai. The current Atoms related to URL management is not designed for cross-page navigation. I drew a diagram to describe the navigation problem between catalog page and overview page.  More context: We moved our query parameter management to use Jotai because of the concerns about the mix-use of QS-State and Jotai for query parameters on the same page. (Specifically - for the new E&A page, other parameters are managed by Jotai). More details on this PR that initially introduced data-catalog view to new E&A page: #989 (comment) In the end, we ditched the Query parameter manipulation thinking that we don't need. (Details are in this comment: #989 (comment)) But the bug reported #1016 made me realize that was a wrong call. ### Notes & Questions About Changes - We need a better solution for long-term url management. ### Validation / Testing Navigate back and forth from data catalog to overview, from overview to data catalog (especially through taxonomy pills on the overview page) Navigate to the new E&A page through the 'Explore Data' button on the overview page. I opened a pr on ghg for testing: US-GHG-Center/veda-config-ghg#421
- Loading branch information
Showing
16 changed files
with
263 additions
and
345 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const optionAll = { | ||
| id: 'all', | ||
| name: 'All' | ||
| }; | ||
|
|
||
| export const minSearchLength = 3; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 2 additions & 132 deletions
134
app/scripts/components/common/browse-controls/use-browse-controls.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,7 @@ | ||
| import { useCallback } from 'react'; | ||
| import { useNavigate } from 'react-router'; | ||
| import useQsStateCreator from 'qs-state-hook'; | ||
| import { set, omit } from 'lodash'; | ||
|
|
||
| // @DEPRECATE it when ghg instance doesn't point this anymore | ||
| // https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/overrides/home/keypoints.tsx#L11 | ||
| export enum Actions { | ||
| CLEAR = 'clear', | ||
| SEARCH = 'search', | ||
| SORT_FIELD = 'sfield', | ||
| SORT_DIR = 'sdir', | ||
| TAXONOMY = 'taxonomy' | ||
| } | ||
|
|
||
| export type BrowserControlsAction = (action: Actions, value?: any) => void; | ||
|
|
||
| export interface FilterOption { | ||
| id: string; | ||
| name: string; | ||
| } | ||
|
|
||
| export interface TaxonomyFilterOption { | ||
| taxonomyType: string; | ||
| value: string; | ||
| exclusion?: string; | ||
| } | ||
|
|
||
| interface BrowseControlsHookParams { | ||
| sortOptions: FilterOption[]; | ||
| } | ||
|
|
||
| export const sortDirOptions: FilterOption[] = [ | ||
| { | ||
| id: 'asc', | ||
| name: 'Ascending' | ||
| }, | ||
| { | ||
| id: 'desc', | ||
| name: 'Descending' | ||
| } | ||
| ]; | ||
|
|
||
| export const optionAll = { | ||
| id: 'all', | ||
| name: 'All' | ||
| }; | ||
|
|
||
| export const minSearchLength = 3; | ||
|
|
||
| // This hook is only used for the Stories Hub to manage browsing controls | ||
| // such as search, sort, and taxonomy filters. | ||
| export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) { | ||
| // Setup Qs State to store data in the url's query string | ||
| // react-router function to get the navigation. | ||
| const navigate = useNavigate(); | ||
| const useQsState = useQsStateCreator({ | ||
| commit: navigate | ||
| }); | ||
|
|
||
| const [sortField, setSortField] = useQsState.memo( | ||
| { | ||
| key: Actions.SORT_FIELD, | ||
| // If pubDate exists, default sorting to this | ||
| default: | ||
| sortOptions.find((o) => o.id === 'pubDate')?.id || sortOptions[0]?.id, | ||
| validator: sortOptions.map((d) => d.id) | ||
| }, | ||
| [sortOptions] | ||
| ); | ||
|
|
||
| const [sortDir, setSortDir] = useQsState.memo( | ||
| { | ||
| key: Actions.SORT_DIR, | ||
| default: sortDirOptions[0].id, | ||
| validator: sortDirOptions.map((d) => d.id) | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| const [search, setSearch] = useQsState.memo( | ||
| { | ||
| key: Actions.SEARCH, | ||
| default: '' | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| const [taxonomies, setTaxonomies] = useQsState.memo< | ||
| Record<string, string | string[]> | ||
| >( | ||
| { | ||
| key: Actions.TAXONOMY, | ||
| default: {}, | ||
| dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url | ||
| hydrator: (v) => (v ? JSON.parse(v) : {}) // hydrator defines how a value is read from the url | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| const onAction = useCallback<BrowserControlsAction>( | ||
| (action, value) => { | ||
| switch (action) { | ||
| case Actions.CLEAR: | ||
| setSearch(''); | ||
| setTaxonomies({}); | ||
| break; | ||
| case Actions.SEARCH: | ||
| setSearch(value); | ||
| break; | ||
| case Actions.SORT_FIELD: | ||
| setSortField(value); | ||
| break; | ||
| case Actions.SORT_DIR: | ||
| setSortDir(value); | ||
| break; | ||
| case Actions.TAXONOMY: | ||
| { | ||
| const { key, value: val } = value; | ||
| if (val === optionAll.id) { | ||
| setTaxonomies(omit(taxonomies, key)); | ||
| } else { | ||
| setTaxonomies(set({ ...taxonomies }, key, val)); | ||
| } | ||
| } | ||
| break; | ||
| } | ||
| }, | ||
| [setSortField, setSortDir, taxonomies, setTaxonomies, setSearch] | ||
| ); | ||
|
|
||
| return { | ||
| search, | ||
| sortField, | ||
| sortDir, | ||
| taxonomies, | ||
| onAction | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 0 additions & 22 deletions
22
app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.