diff --git a/package.json b/package.json index b29aedd9..9ac6248f 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@dhis2/ui": "^9.2.0", "prop-types": "^15.6.0", "react-router-dom": "^5.0.0", + "use-query-params": "^2.2.1", "zustand": "^4.5.0" }, "resolutions": { diff --git a/src/App.js b/src/App.js index 49161cad..8351325f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,22 +2,26 @@ import './locales/index.js' import { CssVariables } from '@dhis2/ui' import React from 'react' import { HashRouter } from 'react-router-dom' +import { QueryParamProvider } from 'use-query-params' +import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5' import styles from './App.module.css' import Routes from './components/Routes/Routes.js' import Sidebar from './components/Sidebar/Sidebar.js' const App = () => ( - -
-
- -
+ + +
+
+ +
-
- -
-
+
+ +
+
+
) diff --git a/src/pages/data-integrity/list/DataIntegrityList.js b/src/pages/data-integrity/list/DataIntegrityList.js index fa0a32d7..7ad0ff00 100644 --- a/src/pages/data-integrity/list/DataIntegrityList.js +++ b/src/pages/data-integrity/list/DataIntegrityList.js @@ -3,6 +3,8 @@ import React, { useState, useMemo } from 'react' import { ErrorOrLoading } from '../../../components/Loading/ErrorOrLoading.js' import { CheckDetailsView } from '../details/CheckDetailsView.js' import { useDataIntegritySummary } from '../use-data-integrity-summary.js' +import { useSelectedCheck } from '../use-selected-check.js' +import { useSelectedTab } from '../use-selected-tab.js' import { List } from './List.js' import css from './List.module.css' import { ListToolbar, ToolbarTabs } from './ListToolbar.js' @@ -17,12 +19,10 @@ const filterCheck = (check, filter) => { export const DataIntegrityList = () => { const [filter, setFilter] = useState('') - const [selectedTab, setSelectedTab] = useState('standard') + const [selectedTab, setSelectedTab] = useSelectedTab() const [selectedSort, setSelectedSort] = useState(SORT['A-Z'].value) const sorter = useMemo(() => SORT[selectedSort].sorter, [selectedSort]) - const [selectedCheck, setSelectedCheck] = useState(null) - const { startDataIntegrityCheck, checks, @@ -31,6 +31,7 @@ export const DataIntegrityList = () => { runningCheck, } = useDataIntegritySummary() + const [selectedCheck, setSelectedCheck] = useSelectedCheck(checks) const selectedSlow = selectedTab === 'slow' const filteredChecks = useMemo( diff --git a/src/pages/data-integrity/use-selected-check.js b/src/pages/data-integrity/use-selected-check.js new file mode 100644 index 00000000..73ba7c0b --- /dev/null +++ b/src/pages/data-integrity/use-selected-check.js @@ -0,0 +1,25 @@ +import { useCallback, useMemo } from 'react' +import { useQueryParam, StringParam } from 'use-query-params' + +export const useSelectedCheck = (checks) => { + const [checkQueryParam, setCheckQueryParam] = useQueryParam( + 'check', + StringParam + ) + + const setSelectedCheck = useCallback( + (check) => { + setCheckQueryParam(check?.name) + }, + [setCheckQueryParam] + ) + + const selectedCheck = useMemo(() => { + if (checks?.length) { + return checks.find((check) => check.name === checkQueryParam) + } + return null + }, [checks, checkQueryParam]) + + return [selectedCheck, setSelectedCheck] +} diff --git a/src/pages/data-integrity/use-selected-tab.js b/src/pages/data-integrity/use-selected-tab.js new file mode 100644 index 00000000..0a40b6f9 --- /dev/null +++ b/src/pages/data-integrity/use-selected-tab.js @@ -0,0 +1,9 @@ +import { useQueryParam, StringParam, withDefault } from 'use-query-params' + +const SelectedTabParam = withDefault(StringParam, 'standard') + +export const useSelectedTab = () => { + return useQueryParam('tab', SelectedTabParam, { + removeDefaultsFromUrl: true, + }) +} diff --git a/yarn.lock b/yarn.lock index eaae8dc5..f2025ffa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13942,6 +13942,11 @@ serialize-javascript@^6.0.1: dependencies: randombytes "^2.1.0" +serialize-query-params@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-2.0.2.tgz#598a3fb9e13f4ea1c1992fbd20231aa16b31db81" + integrity sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q== + serve-index@^1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239" @@ -15669,6 +15674,13 @@ url@^0.11.0, url@~0.11.0: punycode "^1.4.1" qs "^6.11.2" +use-query-params@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.1.tgz#c558ab70706f319112fbccabf6867b9f904e947d" + integrity sha512-i6alcyLB8w9i3ZK3caNftdb+UnbfBRNPDnc89CNQWkGRmDrm/gfydHvMBfVsQJRq3NoHOM2dt/ceBWG2397v1Q== + dependencies: + serialize-query-params "^2.0.2" + use-sync-external-store@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"