feat: store selected-check in url

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": {

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 = () => (
     <HashRouter>
-        <CssVariables spacers colors />
-        <div className={styles.container}>
-            <div className={styles.sidebar}>
-                <Sidebar />
-            </div>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
+            <CssVariables spacers colors />
+            <div className={styles.container}>
+                <div className={styles.sidebar}>
+                    <Sidebar />
+                </div>
 
-            <main className={styles.content}>
-                <Routes />
-            </main>
-        </div>
+                <main className={styles.content}>
+                    <Routes />
+                </main>
+            </div>
+        </QueryParamProvider>
     </HashRouter>
 )
 

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(

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]
+}

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,
+    })
+}

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"