From f626c4b9791372ff32cbfeb7cfb603b4a11c9a69 Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Thu, 21 Mar 2024 22:52:35 +0100 Subject: [PATCH 1/4] feat: store selected-check in url --- package.json | 1 + src/App.js | 22 +++++++++++-------- .../data-integrity/list/DataIntegrityList.js | 4 ++-- .../data-integrity/use-selected-check.js | 20 +++++++++++++++++ yarn.lock | 12 ++++++++++ 5 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 src/pages/data-integrity/use-selected-check.js 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..d87eabdf 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..1ded04f1 100644 --- a/src/pages/data-integrity/list/DataIntegrityList.js +++ b/src/pages/data-integrity/list/DataIntegrityList.js @@ -3,6 +3,7 @@ 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 { List } from './List.js' import css from './List.module.css' import { ListToolbar, ToolbarTabs } from './ListToolbar.js' @@ -21,8 +22,6 @@ export const DataIntegrityList = () => { 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 +30,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..40513feb --- /dev/null +++ b/src/pages/data-integrity/use-selected-check.js @@ -0,0 +1,20 @@ +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 && checks.length) { + return checks.find((check) => check.name === checkQueryParam) + } + return null + }, [checks, checkQueryParam]) + + + return [selectedCheck, setSelectedCheck] +} 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" From 46388cdb8c2b4a4347ecb3bf8ed62a797eea1701 Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Thu, 21 Mar 2024 22:57:09 +0100 Subject: [PATCH 2/4] fix: keep selected-tab in sync --- src/pages/data-integrity/list/DataIntegrityList.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/data-integrity/list/DataIntegrityList.js b/src/pages/data-integrity/list/DataIntegrityList.js index 1ded04f1..f21c3e06 100644 --- a/src/pages/data-integrity/list/DataIntegrityList.js +++ b/src/pages/data-integrity/list/DataIntegrityList.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types' -import React, { useState, useMemo } from 'react' +import React, { useState, useMemo, useEffect } from 'react' import { ErrorOrLoading } from '../../../components/Loading/ErrorOrLoading.js' import { CheckDetailsView } from '../details/CheckDetailsView.js' import { useDataIntegritySummary } from '../use-data-integrity-summary.js' @@ -33,6 +33,13 @@ export const DataIntegrityList = () => { const [selectedCheck, setSelectedCheck] = useSelectedCheck(checks) const selectedSlow = selectedTab === 'slow' + // keep selected-tab in sync + useEffect(() => { + if(selectedTab !== 'slow' && selectedCheck?.isSlow) { + setSelectedTab('slow') + } + }, [selectedCheck, selectedTab]) + const filteredChecks = useMemo( () => checks From 252f51d1a08d60599487d542058e0f0c8ab394c4 Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Thu, 21 Mar 2024 23:24:49 +0100 Subject: [PATCH 3/4] fix: move tab to url to keep in sync --- src/pages/data-integrity/list/DataIntegrityList.js | 12 +++--------- src/pages/data-integrity/use-selected-check.js | 2 +- src/pages/data-integrity/use-selected-tab.js | 11 +++++++++++ 3 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 src/pages/data-integrity/use-selected-tab.js diff --git a/src/pages/data-integrity/list/DataIntegrityList.js b/src/pages/data-integrity/list/DataIntegrityList.js index f21c3e06..7ad0ff00 100644 --- a/src/pages/data-integrity/list/DataIntegrityList.js +++ b/src/pages/data-integrity/list/DataIntegrityList.js @@ -1,9 +1,10 @@ import PropTypes from 'prop-types' -import React, { useState, useMemo, useEffect } from 'react' +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' @@ -18,7 +19,7 @@ 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]) @@ -33,13 +34,6 @@ export const DataIntegrityList = () => { const [selectedCheck, setSelectedCheck] = useSelectedCheck(checks) const selectedSlow = selectedTab === 'slow' - // keep selected-tab in sync - useEffect(() => { - if(selectedTab !== 'slow' && selectedCheck?.isSlow) { - setSelectedTab('slow') - } - }, [selectedCheck, selectedTab]) - const filteredChecks = useMemo( () => checks diff --git a/src/pages/data-integrity/use-selected-check.js b/src/pages/data-integrity/use-selected-check.js index 40513feb..1ebcaf3f 100644 --- a/src/pages/data-integrity/use-selected-check.js +++ b/src/pages/data-integrity/use-selected-check.js @@ -9,7 +9,7 @@ export const useSelectedCheck = (checks) => { }, [setCheckQueryParam]) const selectedCheck = useMemo(() => { - if (checks && checks.length) { + if (checks?.length) { return checks.find((check) => check.name === checkQueryParam) } return null 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..0902f036 --- /dev/null +++ b/src/pages/data-integrity/use-selected-tab.js @@ -0,0 +1,11 @@ +import { useQueryParam, StringParam, withDefault } from 'use-query-params' + +const SelectedTabParam = withDefault(StringParam, 'standard') + +export const useSelectedTab = () => { + return useQueryParam( + 'tab', + SelectedTabParam, + { removeDefaultsFromUrl: true } + ) +} From 0761bdacc5d84fd1cd8ee0520f03426aaa2fd934 Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Fri, 22 Mar 2024 00:04:58 +0100 Subject: [PATCH 4/4] style: run prettier --- src/App.js | 2 +- src/pages/data-integrity/use-selected-check.js | 15 ++++++++++----- src/pages/data-integrity/use-selected-tab.js | 8 +++----- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index d87eabdf..8351325f 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ 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 { 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' diff --git a/src/pages/data-integrity/use-selected-check.js b/src/pages/data-integrity/use-selected-check.js index 1ebcaf3f..73ba7c0b 100644 --- a/src/pages/data-integrity/use-selected-check.js +++ b/src/pages/data-integrity/use-selected-check.js @@ -2,11 +2,17 @@ import { useCallback, useMemo } from 'react' import { useQueryParam, StringParam } from 'use-query-params' export const useSelectedCheck = (checks) => { - const [checkQueryParam, setCheckQueryParam] = useQueryParam('check', StringParam) + const [checkQueryParam, setCheckQueryParam] = useQueryParam( + 'check', + StringParam + ) - const setSelectedCheck = useCallback((check) => { - setCheckQueryParam(check?.name) - }, [setCheckQueryParam]) + const setSelectedCheck = useCallback( + (check) => { + setCheckQueryParam(check?.name) + }, + [setCheckQueryParam] + ) const selectedCheck = useMemo(() => { if (checks?.length) { @@ -15,6 +21,5 @@ export const useSelectedCheck = (checks) => { 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 index 0902f036..0a40b6f9 100644 --- a/src/pages/data-integrity/use-selected-tab.js +++ b/src/pages/data-integrity/use-selected-tab.js @@ -3,9 +3,7 @@ import { useQueryParam, StringParam, withDefault } from 'use-query-params' const SelectedTabParam = withDefault(StringParam, 'standard') export const useSelectedTab = () => { - return useQueryParam( - 'tab', - SelectedTabParam, - { removeDefaultsFromUrl: true } - ) + return useQueryParam('tab', SelectedTabParam, { + removeDefaultsFromUrl: true, + }) }