From 4b313411f9fbe58dfc4115632c55ad1b9afcf597 Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Thu, 5 Dec 2024 04:40:28 +0300 Subject: [PATCH] feat: modify layout, error page and routes --- src/components/EmptyArea.tsx | 10 +--- src/components/create/CreateModal.tsx | 33 +++++------ src/components/create/Toolbar.tsx | 6 +- src/components/edit/Edit.tsx | 18 +++--- src/components/keys/keysTable.tsx | 7 +-- src/components/namespaces/DataStoreLinks.tsx | 29 ---------- src/components/namespaces/LinksList.tsx | 11 ++-- src/components/namespaces/NamespacesLinks.tsx | 18 ------ .../namespaces/UserDataStoreLinks.tsx | 29 ---------- src/components/sidebar/DataStoreSelect.tsx | 1 - src/components/sidebar/sidebar.tsx | 58 +++++++++++++++++-- src/pages/errorPage.tsx | 35 ++++++++--- src/routes/layout.tsx | 10 ++-- src/routes/router.tsx | 12 +++- 14 files changed, 128 insertions(+), 149 deletions(-) delete mode 100644 src/components/namespaces/DataStoreLinks.tsx delete mode 100644 src/components/namespaces/NamespacesLinks.tsx delete mode 100644 src/components/namespaces/UserDataStoreLinks.tsx diff --git a/src/components/EmptyArea.tsx b/src/components/EmptyArea.tsx index baec6ef..aaf7687 100644 --- a/src/components/EmptyArea.tsx +++ b/src/components/EmptyArea.tsx @@ -7,18 +7,10 @@ const EmptyArea = () => { const { store, namespace } = useParams() return ( <> - {!store && ( -
- - {i18n.t("Select a datastore to show namespaces")} - -
- )} {store && !namespace && (
- {i18n.t("Click a namespace to show keys")} - + {i18n.t('Click a namespace to view its keys')}
)} diff --git a/src/components/create/CreateModal.tsx b/src/components/create/CreateModal.tsx index e6c2666..dc12481 100644 --- a/src/components/create/CreateModal.tsx +++ b/src/components/create/CreateModal.tsx @@ -28,31 +28,29 @@ const CreateModal = ({ {addNewNamespace && ( { setValues({ ...values, - ["namespace"]: value + ['namespace']: value, }) - } - } + }} /> )} { - setValues({ - ...values, - ["key"]: value - }) - } - } + onChange={({ value }) => { + setValues({ + ...values, + ['key']: value, + }) + }} /> @@ -60,12 +58,7 @@ const CreateModal = ({ - @@ -78,10 +71,10 @@ const CreateModal = ({ CreateModal.propTypes = { addNewKey: PropTypes.bool, addNewNamespace: PropTypes.bool, + closeModal: PropTypes.func, createFn: PropTypes.func, - values: PropTypes.object, setValues: PropTypes.func, - closeModal: PropTypes.func + values: PropTypes.object, } export default CreateModal diff --git a/src/components/create/Toolbar.tsx b/src/components/create/Toolbar.tsx index 6a00cad..318e680 100644 --- a/src/components/create/Toolbar.tsx +++ b/src/components/create/Toolbar.tsx @@ -20,7 +20,7 @@ const Toolbar = () => { namespace?: string key?: unknown }) => { - let resource = "" + let resource = '' if (addNewNamespace) { resource = `${store}/${values?.namespace}/${values?.key}` } else if (addNewKey) { @@ -37,9 +37,9 @@ const Toolbar = () => { onComplete: () => { let url = '' if (addNewNamespace) { - url = `${store}/${values?.namespace}/edit/${values?.key}` + url = `${store}/edit/${values?.namespace}/${values?.key}` } else if (addNewKey) { - url = `${store}/${namespace}/edit/${values?.key}` + url = `${store}/edit/${namespace}/${values?.key}` } navigate(url) diff --git a/src/components/edit/Edit.tsx b/src/components/edit/Edit.tsx index b836f9c..a1b051a 100644 --- a/src/components/edit/Edit.tsx +++ b/src/components/edit/Edit.tsx @@ -8,18 +8,16 @@ import Editor from './Editor' const modifyKeyMutation = ({ store }) => ({ type: 'update' as const, resource: `${store}`, - id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`, + id: ({ key, namespace }: { key: string; namespace: string }) => + `${namespace}/${key}`, data: ({ value }) => JSON.parse(value), }) -const keyValuesQuery = ({ - store -}: { - store: string -}) => ({ +const keyValuesQuery = ({ store }: { store: string }) => ({ results: { resource: `${store}`, - id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`, + id: ({ key, namespace }: { key: string; namespace: string }) => + `${namespace}/${key}`, }, }) @@ -33,7 +31,7 @@ const Edit = () => { } = useDataQuery(keyValuesQuery({ store }), { variables: { key, - namespace + namespace, }, }) @@ -57,7 +55,7 @@ const Edit = () => { const handleEditorChange = (value) => { setValue(value) } - + useEffect(() => { setValue(JSON.stringify(data?.results, null, 4)) }, [data]) @@ -66,7 +64,7 @@ const Edit = () => { refetch({ key, namespace }) }, [key, namespace, store, refetch]) - const loadingText = i18n.t("Loading") + const loadingText = i18n.t('Loading') return (
{ const navigate = useNavigate() const engine = useDataEngine() - const { data, loading, refetch } = useDataQuery( + const { data, loading, refetch } = useDataQuery( fetchNamespaceQuery({ store }), { variables: { @@ -84,10 +84,9 @@ const KeysTable = () => { <> {data.results.map((key, index) => { const handleClick = () => { - const url = `/${store}/${namespace}/edit/${key}` + const url = `/${store}/edit/${namespace}/${key}` navigate(url) } - return ( (dataStoreQuery) - - return ( - - ) -} - -export default DataStoreLinks diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx index bd96a38..4048952 100644 --- a/src/components/namespaces/LinksList.tsx +++ b/src/components/namespaces/LinksList.tsx @@ -8,7 +8,7 @@ import DeleteModal from '../delete/DeleteModal' import CenteredLoader from '../Loader' import SidebarNavLink from '../sidebar/SidebarNavLink' -function LinksList({ data, error, loading, refetch }) { +function LinksList({ data, error, loading, refetchList }) { const { store, namespace, key } = useParams() const [openModal, setOpenModal] = useState(false) const [selectedNamespace, setSelectedNamespace] = useState('') @@ -23,13 +23,14 @@ function LinksList({ data, error, loading, refetch }) { }) setOpenModal(false) - refetch() + refetchList() navigate(`${store}`) } useEffect(() => { - refetch() + refetchList() }, [store, namespace, key]) + return (
{error && {i18n.t('ERROR')}} @@ -42,7 +43,7 @@ function LinksList({ data, error, loading, refetch }) { return ( { setOpenModal(true) @@ -79,7 +80,7 @@ LinksList.propTypes = { data: PropTypes.object, error: PropTypes.any, loading: PropTypes.any, - refetch: PropTypes.func, + refetchList: PropTypes.func, } export default LinksList diff --git a/src/components/namespaces/NamespacesLinks.tsx b/src/components/namespaces/NamespacesLinks.tsx deleted file mode 100644 index 569ae81..0000000 --- a/src/components/namespaces/NamespacesLinks.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { useParams } from 'react-router-dom' -import DataStoreLinks from './DataStoreLinks' -import UserDataStoreLinks from './UserDataStoreLinks' - -const NameSpaceLinks = () => { - const { store } = useParams() - - if (store === 'userDataStore') { - return - } - - if (store === 'dataStore') { - return - } -} - -export default NameSpaceLinks diff --git a/src/components/namespaces/UserDataStoreLinks.tsx b/src/components/namespaces/UserDataStoreLinks.tsx deleted file mode 100644 index d756e70..0000000 --- a/src/components/namespaces/UserDataStoreLinks.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useDataQuery } from '@dhis2/app-runtime' -import React from 'react' -import LinksList from './LinksList' - -interface QueryResults { - results: [] -} - -const userDataStoreQuery = { - results: { - resource: 'userDataStore', - }, -} - -function UserDataStoreLinks() { - const { error, loading, data, refetch } = - useDataQuery(userDataStoreQuery) - - return ( - - ) -} - -export default UserDataStoreLinks diff --git a/src/components/sidebar/DataStoreSelect.tsx b/src/components/sidebar/DataStoreSelect.tsx index c3901a0..62fd8e4 100644 --- a/src/components/sidebar/DataStoreSelect.tsx +++ b/src/components/sidebar/DataStoreSelect.tsx @@ -1,7 +1,6 @@ import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' -// import classes from '../../App.module.css' import i18n from '../../locales' const DataStoreSelect = ({ option, handleChange }) => { diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index ffde4db..0b22875 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,15 +1,50 @@ +import { useDataQuery } from '@dhis2/app-service-data' import { Card, Divider } from '@dhis2/ui' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router-dom' import classes from '../../App.module.css' -import NameSpaceLinks from '../namespaces/NamespacesLinks' +import LinksList from '../namespaces/LinksList' import DataStoreSelect from './DataStoreSelect' // import SearchField from './SearchField' +interface QueryResults { + results: [] +} + +const userDataStoreQuery = { + results: { + resource: 'userDataStore', + }, +} + +const dataStoreQuery = { + results: { + resource: 'dataStore', + }, +} + const Sidebar = () => { const navigate = useNavigate() const { store } = useParams() - const [option, setOption] = useState(store) + const [option, setOption] = useState(store || '') + + const { + error: dataStoreQueryError, + loading: dataStoreQueryLoading, + data: dataStoreQueryData, + refetch: refetchDataStore, + } = useDataQuery(dataStoreQuery) + + const { + error: userDataStoreQueryError, + loading: userDataStoreQueryLoading, + data: userDataStoreQueryData, + refetch: refetchUserDataStore, + } = useDataQuery(userDataStoreQuery) + + useEffect(() => { + setOption(store) + }, [store]) const handleDataStoreSelect = ({ selected }) => { setOption(selected) @@ -27,7 +62,22 @@ const Sidebar = () => { {store && ( <> {/* */} - + {store === 'userDataStore' && ( + + )} + {store === 'dataStore' && ( + + )} )} diff --git a/src/pages/errorPage.tsx b/src/pages/errorPage.tsx index dd37acc..b6c5dfd 100644 --- a/src/pages/errorPage.tsx +++ b/src/pages/errorPage.tsx @@ -1,6 +1,6 @@ -import { Center, NoticeBox } from '@dhis2/ui' +import { Button, Card, NoticeBox } from '@dhis2/ui' import React from 'react' -import { useRouteError } from 'react-router-dom' +import { useNavigate, useRouteError } from 'react-router-dom' import i18n from '../locales' interface Error { @@ -13,16 +13,35 @@ interface Error { export default function ErrorPage() { const error: Error = useRouteError() + const navigate = useNavigate() return ( -
-
+
+ -

- {error.statusText || error.message} -

+ {/*

{error.statusText || error.message}

*/} + {error.data &&

{error.data}

} -
+ +
) } diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx index 0504041..ceb0dc1 100644 --- a/src/routes/layout.tsx +++ b/src/routes/layout.tsx @@ -3,23 +3,21 @@ import React from 'react' import { Outlet, useParams } from 'react-router-dom' import classes from '../App.module.css' import Toolbar from '../components/create/Toolbar' -import EmptyArea from '../components/EmptyArea' import Sidebar from '../components/sidebar/Sidebar' function Layout() { const { store } = useParams() return (
- -
+ +
{store && } - -
+
) } diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 37040e9..67ddac3 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,6 +1,7 @@ import React from 'react' -import { createHashRouter } from 'react-router-dom' +import { Navigate, createHashRouter } from 'react-router-dom' import Edit from '../components/edit/Edit' +import EmptyArea from '../components/EmptyArea' import Keys from '../components/keys/Keys' import ErrorPage from '../pages/ErrorPage' import Layout from './Layout' @@ -11,15 +12,20 @@ export const router = createHashRouter([ errorElement: , element: , children: [ + { index: true, element: }, { path: ':store', children: [ { - path: ':namespace', + index: true, + element: , + }, + { + path: 'edit/:namespace', element: , }, { - path: ':namespace/edit/:key', + path: 'edit/:namespace/:key', element: , }, ],