From 11ac9c526806cd88dd643cabc3d8943954e58245 Mon Sep 17 00:00:00 2001 From: Diana Nanyanzi Date: Sat, 30 Nov 2024 20:15:31 +0300 Subject: [PATCH] refactor: organise and rename files --- i18n/en.pot | 16 ++-- src/App.tsx | 4 +- src/components/Loader.tsx | 17 ++++ src/components/keys/keysTable.tsx | 24 +++-- src/components/namespaces/DataStoreLinks.tsx | 28 ++++++ src/components/namespaces/LinksList.tsx | 40 +++++++++ src/components/namespaces/NamespacesLinks.tsx | 18 ++++ .../namespaces/UserDataStoreLinks.tsx | 29 +++++++ src/components/namespaces/list.tsx | 87 ------------------- .../{select.tsx => DataStoreSelect.tsx} | 6 +- src/components/sidebar/SidebarNavLink.tsx | 25 ++++++ src/components/sidebar/sidebar.tsx | 47 +++------- src/routes/layout.tsx | 12 ++- src/routes/router.tsx | 8 +- 14 files changed, 205 insertions(+), 156 deletions(-) create mode 100644 src/components/Loader.tsx create mode 100644 src/components/namespaces/DataStoreLinks.tsx create mode 100644 src/components/namespaces/LinksList.tsx create mode 100644 src/components/namespaces/NamespacesLinks.tsx create mode 100644 src/components/namespaces/UserDataStoreLinks.tsx delete mode 100644 src/components/namespaces/list.tsx rename src/components/sidebar/{select.tsx => DataStoreSelect.tsx} (87%) create mode 100644 src/components/sidebar/SidebarNavLink.tsx diff --git a/i18n/en.pot b/i18n/en.pot index c673c94..f77f727 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-11-29T23:15:51.985Z\n" -"PO-Revision-Date: 2024-11-29T23:15:51.986Z\n" +"POT-Creation-Date: 2024-11-30T16:31:03.946Z\n" +"PO-Revision-Date: 2024-11-30T16:31:03.947Z\n" msgid "ERROR" msgstr "ERROR" @@ -14,14 +14,14 @@ msgstr "ERROR" msgid "Namespaces" msgstr "Namespaces" -msgid "Search" -msgstr "Search" - -msgid "Namespace" -msgstr "Namespace" - msgid "DataStore" msgstr "DataStore" msgid "User DataStore" msgstr "User DataStore" + +msgid "Search" +msgstr "Search" + +msgid "Namespace" +msgstr "Namespace" diff --git a/src/App.tsx b/src/App.tsx index aa18058..bdfee63 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' import { RouterProvider } from 'react-router-dom' -import AppWrapper from './components/appWrapper' -import { router } from './routes/router' +import AppWrapper from './components/AppWrapper' +import { router } from './routes/Router' const App: FC = () => { return ( diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx new file mode 100644 index 0000000..7f8a2f8 --- /dev/null +++ b/src/components/Loader.tsx @@ -0,0 +1,17 @@ +import { CircularLoader } from '@dhis2/ui' +import React from 'react' + +const CenteredLoader = () => { + return ( +
+ +
+ ) +} + +export default CenteredLoader diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx index af99ed5..58ddb13 100644 --- a/src/components/keys/keysTable.tsx +++ b/src/components/keys/keysTable.tsx @@ -7,9 +7,9 @@ import { TableBody, TableHead, } from '@dhis2/ui' -import PropTypes from 'prop-types' import React, { useEffect } from 'react' import { useParams } from 'react-router-dom' +import CenteredLoader from '../Loader' interface QueryResults { results: [] @@ -31,18 +31,18 @@ const useNameSpaceQuery = ({ store, namespace }) => { ) } -const Keys = () => { +const KeysTable = () => { const { store, namespace } = useParams() - const { data, refetch } = useNameSpaceQuery({ store, namespace }) + const { data, loading, refetch } = useNameSpaceQuery({ store, namespace }) useEffect(() => { refetch({ id: namespace }) }, [namespace]) - return -} + if (loading) { + return + } -export const KeysTable = ({ data }) => { return ( @@ -56,8 +56,10 @@ export const KeysTable = ({ data }) => { <> {data.results.map((key, index) => ( - {key} - Edit, Delete + {key} + + Edit, Delete + ))} @@ -67,8 +69,4 @@ export const KeysTable = ({ data }) => { ) } -KeysTable.propTypes = { - data: PropTypes.object, -} - -export default Keys +export default KeysTable diff --git a/src/components/namespaces/DataStoreLinks.tsx b/src/components/namespaces/DataStoreLinks.tsx new file mode 100644 index 0000000..e84b448 --- /dev/null +++ b/src/components/namespaces/DataStoreLinks.tsx @@ -0,0 +1,28 @@ +import { useDataQuery } from '@dhis2/app-runtime' +import PropTypes from 'prop-types' +import React from 'react' +import LinksList from './LinksList' + +interface QueryResults { + results: [] +} + +const dataStoreQuery = { + results: { + resource: 'dataStore', + }, +} + +function DataStoreLinks({ store }) { + const { error, loading, data } = useDataQuery(dataStoreQuery) + + return ( + + ) +} + +DataStoreLinks.propTypes = { + store: PropTypes.string, +} + +export default DataStoreLinks diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx new file mode 100644 index 0000000..ec055e4 --- /dev/null +++ b/src/components/namespaces/LinksList.tsx @@ -0,0 +1,40 @@ +import PropTypes from 'prop-types' +import React from 'react' +import classes from '../../App.module.css' +import i18n from '../../locales' +import CenteredLoader from '../Loader' +import SidebarNavLink from '../sidebar/SidebarNavLink' + +function LinksList({ data, error, loading, store }) { + return ( +
+ {error && {i18n.t('ERROR')}} + {loading && } + {data && ( + <> +

{i18n.t('Namespaces')}

+
    + {data.results.map((namespace: string, index) => { + return ( + + ) + })} +
+ + )} +
+ ) +} + +LinksList.propTypes = { + data: PropTypes.object, + error: PropTypes.any, + loading: PropTypes.any, + store: PropTypes.string, +} + +export default LinksList diff --git a/src/components/namespaces/NamespacesLinks.tsx b/src/components/namespaces/NamespacesLinks.tsx new file mode 100644 index 0000000..a8aed92 --- /dev/null +++ b/src/components/namespaces/NamespacesLinks.tsx @@ -0,0 +1,18 @@ +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 new file mode 100644 index 0000000..c6b0fdd --- /dev/null +++ b/src/components/namespaces/UserDataStoreLinks.tsx @@ -0,0 +1,29 @@ +import { useDataQuery } from '@dhis2/app-runtime' +import PropTypes from 'prop-types' +import React from 'react' +import LinksList from './LinksList' + +interface QueryResults { + results: [] +} + +const userDataStoreQuery = { + results: { + resource: 'userDataStore', + }, +} + +function UserDataStoreLinks({ store }) { + const { error, loading, data } = + useDataQuery(userDataStoreQuery) + + return ( + + ) +} + +UserDataStoreLinks.propTypes = { + store: PropTypes.string, +} + +export default UserDataStoreLinks diff --git a/src/components/namespaces/list.tsx b/src/components/namespaces/list.tsx deleted file mode 100644 index 3efa6a1..0000000 --- a/src/components/namespaces/list.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useDataQuery } from '@dhis2/app-runtime' -import { CircularLoader } from '@dhis2/ui' -import PropTypes from 'prop-types' -import React from 'react' -import { useParams } from 'react-router-dom' -import classes from '../../App.module.css' -import i18n from '../../locales' -import { SidebarNavLink } from '../sidebar/sidebar' - -interface QueryResults { - results: [] -} - -const dataStoreQuery = { - results: { - resource: 'dataStore', - }, -} - -const userDataStoreQuery = { - results: { - resource: 'userDataStore', - }, -} - -function List({ data, error, loading, store }) { - return ( -
- {error && {i18n.t('ERROR')}} - {loading && } - {data && ( - <> -

{i18n.t('Namespaces')}

- {data.results.map((namespace: string, index) => { - return ( - - ) - })} - - )} -
- ) -} - -List.propTypes = { - data: PropTypes.object, - error: PropTypes.any, - loading: PropTypes.any, - store: PropTypes.string, -} - -export function DataStoreList({ store }) { - const { error, loading, data } = useDataQuery(dataStoreQuery) - - return -} - -DataStoreList.propTypes = { - store: PropTypes.string, -} - -export function UserDataStoreList({ store }) { - const { error, loading, data } = - useDataQuery(userDataStoreQuery) - - return -} - -UserDataStoreList.propTypes = { - store: PropTypes.string, -} - -export function NameSpaceLinks() { - const { store } = useParams() - - if (store === 'userDataStore') { - return - } - - if (store === 'dataStore') { - return - } -} diff --git a/src/components/sidebar/select.tsx b/src/components/sidebar/DataStoreSelect.tsx similarity index 87% rename from src/components/sidebar/select.tsx rename to src/components/sidebar/DataStoreSelect.tsx index 3453be8..5fa46da 100644 --- a/src/components/sidebar/select.tsx +++ b/src/components/sidebar/DataStoreSelect.tsx @@ -4,7 +4,7 @@ import React from 'react' import classes from '../../App.module.css' import i18n from '../../locales' -const SelectDataStore = ({ option, handleChange }) => { +const DataStoreSelect = ({ option, handleChange }) => { return (
{ ) } -SelectDataStore.propTypes = { +DataStoreSelect.propTypes = { handleChange: PropTypes.func, option: PropTypes.string, } -export default SelectDataStore +export default DataStoreSelect diff --git a/src/components/sidebar/SidebarNavLink.tsx b/src/components/sidebar/SidebarNavLink.tsx new file mode 100644 index 0000000..598bb5b --- /dev/null +++ b/src/components/sidebar/SidebarNavLink.tsx @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { NavLink } from 'react-router-dom' + +const SidebarNavLink = ({ to, label }) => { + return ( +
  • + + isActive ? 'active' : isPending ? 'pending' : '' + } + > + {label} + +
    • + ) +} + +SidebarNavLink.propTypes = { + label: PropTypes.string, + to: PropTypes.string, +} + +export default SidebarNavLink diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 79f210c..568ac7a 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,40 +1,10 @@ import { Card, Divider } from '@dhis2/ui' -import PropTypes from 'prop-types' import React, { useState } from 'react' -import { NavLink, useNavigate, useParams } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import classes from '../../App.module.css' -import { NameSpaceLinks } from '../namespaces/list' -import SearchField from './searchField' -import SelectDataStore from './select' - -export const SidebarNavLink = ({ to, label }) => { - return ( -
  • - - isActive ? 'active' : isPending ? 'pending' : '' - } - > - {label} - -
    • - ) -} - -SidebarNavLink.propTypes = { - label: PropTypes.string, - to: PropTypes.string, -} - -export const SidebarNavigation = () => { - return ( - <> - - - - ) -} +import NameSpaceLinks from '../namespaces/NamespacesLinks' +import DataStoreSelect from './DataStoreSelect' +import SearchField from './SearchField' const Sidebar = () => { const navigate = useNavigate() @@ -47,12 +17,17 @@ const Sidebar = () => { } return ( - - {store && } + {store && ( + <> + + + + )} ) } diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx index 87d0402..5678c4a 100644 --- a/src/routes/layout.tsx +++ b/src/routes/layout.tsx @@ -1,17 +1,23 @@ import React from 'react' -import { Outlet } from 'react-router-dom' +import { Outlet, useParams } from 'react-router-dom' import classes from '../App.module.css' -import Sidebar from '../components/sidebar/sidebar' +import Sidebar from '../components/sidebar/Sidebar' -export default function Layout() { +function Layout() { + const { store, namespace } = useParams() return (
    + {/* Empty Display component */} + {!store &&

    Select a datastore to show namespaces

    } + {store && !namespace &&

    Click a namespace to show keys

    }
    ) } + +export default Layout diff --git a/src/routes/router.tsx b/src/routes/router.tsx index b69493b..8d198f5 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,8 +1,8 @@ import React from 'react' import { createHashRouter } from 'react-router-dom' -import Keys from '../components/keys/keysTable' -import ErrorPage from '../pages/errorPage' -import Layout from './layout' +import KeysTable from '../components/keys/KeysTable' +import ErrorPage from '../pages/ErrorPage' +import Layout from './Layout' export const router = createHashRouter([ { @@ -15,7 +15,7 @@ export const router = createHashRouter([ children: [ { path: ':namespace', - element: , + element: , }, ], },