diff --git a/src/App.tsx b/src/App.tsx index 6f347e1..bdfee63 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,12 @@ import React, { FC } from 'react' import { RouterProvider } from 'react-router-dom' import AppWrapper from './components/AppWrapper' -import { pagerRouter } from './components/pager/routes/PagerRouter' -// import { router } from './routes/Router' +import { router } from './routes/Router' const App: FC = () => { return ( - {/* */} - + ) } diff --git a/src/components/pager/Page.module.css b/src/Page.module.css similarity index 100% rename from src/components/pager/Page.module.css rename to src/Page.module.css diff --git a/src/components/pager/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx similarity index 90% rename from src/components/pager/Breadcrumbs.tsx rename to src/components/Breadcrumbs.tsx index 8b9765d..ea5e529 100644 --- a/src/components/pager/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Link, useLocation, useMatches } from 'react-router-dom' -import classes from './Page.module.css' +import classes from '../Page.module.css' function Breadcrumbs() { const matches = useMatches() @@ -9,7 +9,9 @@ function Breadcrumbs() { const finalMatch = matches.filter( (match) => match.pathname === location.pathname ) - const { params: { store, namespace, key } } = finalMatch[0] + const { + params: { store, namespace, key }, + } = finalMatch[0] const storeLabels = { dataStore: 'DataStore', diff --git a/src/components/pager/DataStoreTabBar.tsx b/src/components/DataStoreTabBar.tsx similarity index 96% rename from src/components/pager/DataStoreTabBar.tsx rename to src/components/DataStoreTabBar.tsx index 4be8f23..ab7aaa3 100644 --- a/src/components/pager/DataStoreTabBar.tsx +++ b/src/components/DataStoreTabBar.tsx @@ -1,6 +1,6 @@ import { Tab, TabBar } from '@dhis2/ui' import React from 'react' -import i18n from '../../locales' +import i18n from '../locales' type DataStoreProps = { activeTab: string diff --git a/src/components/pager/Editor.tsx b/src/components/Editor.tsx similarity index 100% rename from src/components/pager/Editor.tsx rename to src/components/Editor.tsx diff --git a/src/components/EmptyArea.tsx b/src/components/EmptyArea.tsx deleted file mode 100644 index aaf7687..0000000 --- a/src/components/EmptyArea.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Center, NoticeBox } from '@dhis2/ui' -import React from 'react' -import { useParams } from 'react-router-dom' -import i18n from '../locales' - -const EmptyArea = () => { - const { store, namespace } = useParams() - return ( - <> - {store && !namespace && ( -
- - {i18n.t('Click a namespace to view its keys')} - -
- )} - - ) -} -export default EmptyArea diff --git a/src/components/Error.tsx b/src/components/Error.tsx deleted file mode 100644 index 4f6883e..0000000 --- a/src/components/Error.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Card, Center, NoticeBox } from '@dhis2/ui' -import React from 'react' -import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom' -import i18n from '../locales' - -interface Error { - status?: number - statusText?: string - internal?: boolean - data?: string - message?: string -} - -type PassedErrorProps = { - err?: { - httpStatus?: string - httpStatusCode?: number - status?: string - message?: string - errorCode?: string - } -} - -export default function Error({ err }: PassedErrorProps) { - const error: Error = useRouteError() - - return ( -
- -
- - {isRouteErrorResponse(error) ? ( - <> -

- - {error.status} {error.statusText}{' '} - - - {error.data} -

- Back to datastore - - ) : ( -

- - {error.status} {error.statusText}{' '} - - {error?.message && ( - - {error.message} - )} -

- )} - {err && ( -

- - {err.httpStatusCode} {err.httpStatus}{' '} - - {err?.message && - {err.message}} -

- )} - -
- -
- ) -} diff --git a/src/components/pager/Header.tsx b/src/components/Header.tsx similarity index 88% rename from src/components/pager/Header.tsx rename to src/components/Header.tsx index 9ed6498..6122573 100644 --- a/src/components/pager/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,6 @@ import React from 'react' +import classes from '../Page.module.css' import Breadcrumbs from './Breadcrumbs' -import classes from './Page.module.css' type HeaderProps = { children?: React.ReactElement diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx deleted file mode 100644 index 7f8a2f8..0000000 --- a/src/components/Loader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { CircularLoader } from '@dhis2/ui' -import React from 'react' - -const CenteredLoader = () => { - return ( -
- -
- ) -} - -export default CenteredLoader diff --git a/src/components/pager/SearchField.tsx b/src/components/SearchField.tsx similarity index 83% rename from src/components/pager/SearchField.tsx rename to src/components/SearchField.tsx index 6a1bb27..f82a232 100644 --- a/src/components/pager/SearchField.tsx +++ b/src/components/SearchField.tsx @@ -1,7 +1,7 @@ import { InputField } from '@dhis2/ui' import React from 'react' -import i18n from '../../locales' -import classes from './Page.module.css' +import i18n from '../locales' +import classes from '../Page.module.css' const SearchField = ({ placeholder }: { placeholder?: string }) => { return ( diff --git a/src/components/pager/table/Table.tsx b/src/components/Table.tsx similarity index 89% rename from src/components/pager/table/Table.tsx rename to src/components/Table.tsx index 6c1737e..f16fcb0 100644 --- a/src/components/pager/table/Table.tsx +++ b/src/components/Table.tsx @@ -7,7 +7,7 @@ import { TableHead, } from '@dhis2/ui' import React from 'react' -import i18n from '../../../locales' +import i18n from '../locales' import TableActions from './actions/TableActions' type TableProps = { @@ -42,9 +42,7 @@ const ItemsTable = ({ data, label }: TableProps) => { {item} - + ) diff --git a/src/components/pager/buttons/Buttons.tsx b/src/components/actions/Buttons.tsx similarity index 62% rename from src/components/pager/buttons/Buttons.tsx rename to src/components/actions/Buttons.tsx index ca19f80..fe5107d 100644 --- a/src/components/pager/buttons/Buttons.tsx +++ b/src/components/actions/Buttons.tsx @@ -1,19 +1,7 @@ -import { IconDelete16, IconEdit16, IconMore16 } from '@dhis2/ui-icons' +import { IconEdit16, IconMore16 } from '@dhis2/ui-icons' import { Button } from '@dhis2-ui/button' import React from 'react' -import i18n from '../../../locales' - -export function DeleteButton() { - return ( - - - - - - ) -} - -CreateModal.propTypes = { - addNewKey: PropTypes.bool, - addNewNamespace: PropTypes.bool, - closeModal: PropTypes.func, - createFn: PropTypes.func, - setValues: PropTypes.func, - values: PropTypes.object, -} - -export default CreateModal diff --git a/src/components/create/Toolbar.tsx b/src/components/create/Toolbar.tsx deleted file mode 100644 index 172b5f6..0000000 --- a/src/components/create/Toolbar.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { useDataEngine } from '@dhis2/app-service-data' -import { Button, Divider } from '@dhis2/ui' -import React, { useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import classes from '../../App.module.css' -import useCustomAlert from '../../hooks/useCustomAlert' -import i18n from '../../locales' -import CreateModal from './CreateModal' - -const Toolbar = () => { - const { store, namespace } = useParams() - const engine = useDataEngine() - const navigate = useNavigate() - - const [addNewNamespace, setAddNewNamespace] = useState(false) - const [addNewKey, setAddNewKey] = useState(false) - const [values, setValues] = useState({}) - - const { showSuccess, showError } = useCustomAlert() - - const handleAddNamespaceOrKey = async (values: { - namespace?: string - key?: unknown - }) => { - let resource = '' - if (addNewNamespace) { - resource = `${store}/${values?.namespace}/${values?.key}` - } else if (addNewKey) { - resource = `${store}/${namespace}/${values?.key}` - } - - await engine.mutate( - { - type: 'create', - resource, - data: () => ({}), - }, - { - onComplete: () => { - let url = '' - if (addNewNamespace) { - url = `${store}/edit/${values?.namespace}/${values?.key}` - } else if (addNewKey) { - url = `${store}/edit/${namespace}/${values?.key}` - } - const message = i18n.t('Key created successfully') - showSuccess(message) - navigate(url) - setValues({}) - }, - onError: () => { - const message = i18n.t( - 'There was an error creating the key' - ) - showError(message) - }, - } - ) - closeModal() - } - - const closeModal = () => { - setAddNewKey(false) - setAddNewNamespace(false) - } - - return ( - <> - {store && ( - <> -
- - {namespace && ( - - )} -
- - - )} - {(addNewKey || addNewNamespace) && ( - - )} - - ) -} - -export default Toolbar diff --git a/src/components/delete/DeleteButton.tsx b/src/components/delete/DeleteButton.tsx deleted file mode 100644 index a2fe5e6..0000000 --- a/src/components/delete/DeleteButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Button } from '@dhis2-ui/button' -import PropTypes from 'prop-types' -import React from 'react' -import i18n from '../../locales' - -export default function DeleteButton({ openModal }) { - return ( - - ) -} - -DeleteButton.propTypes = { - openModal: PropTypes.func, -} diff --git a/src/components/delete/DeleteModal.tsx b/src/components/delete/DeleteModal.tsx deleted file mode 100644 index 14ef64c..0000000 --- a/src/components/delete/DeleteModal.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { - Modal, - ModalContent, - ModalActions, - Button, - ButtonStrip, -} from '@dhis2/ui' -import PropTypes from 'prop-types' -import React from 'react' -import i18n from '../../locales' - -const DeleteModal = ({ children, deleteFn, closeModal }) => { - return ( - - {children} - - - - - - - - ) -} - -DeleteModal.propTypes = { - children: PropTypes.node, - closeModal: PropTypes.func, - deleteFn: PropTypes.func, -} - -export default DeleteModal diff --git a/src/components/edit/Edit.tsx b/src/components/edit/Edit.tsx deleted file mode 100644 index 3591c9c..0000000 --- a/src/components/edit/Edit.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useDataMutation, useDataQuery } from '@dhis2/app-runtime' -import { Button } from '@dhis2-ui/button' -import React, { useEffect, useState } from 'react' -import { useParams } from 'react-router-dom' -import useCustomAlert from '../../hooks/useCustomAlert' -import i18n from '../../locales' -import Error from '../Error' -import Editor from './Editor' - -const modifyKeyMutation = ({ store }) => ({ - type: 'update' as const, - resource: `${store}`, - id: ({ key, namespace }: { key: string; namespace: string }) => - `${namespace}/${key}`, - data: ({ value }) => JSON.parse(value), -}) - -const keyValuesQuery = ({ store }: { store: string }) => ({ - results: { - resource: `${store}`, - id: ({ key, namespace }: { key: string; namespace: string }) => - `${namespace}/${key}`, - }, -}) - -const Edit = () => { - const { key, namespace, store } = useParams() - const { showSuccess, showError } = useCustomAlert() - - const { - data, - loading: queryLoading, - error, - refetch, - } = useDataQuery(keyValuesQuery({ store }), { - variables: { - key, - namespace, - }, - }) - - const [value, setValue] = useState( - JSON.stringify(data?.results, null, 4) || '' - ) - - const [updateKey, { loading }] = useDataMutation( - // @ts-expect-error("") - modifyKeyMutation({ store }), - { - onComplete: () => { - const message = i18n.t('Key successfully updated') - showSuccess(message) - }, - onError: () => { - const message = i18n.t('There was an error updating the key') - showError(message) - }, - } - ) - - const handleEditorChange = (value) => { - setValue(value) - } - - useEffect(() => { - setValue(JSON.stringify(data?.results, null, 4)) - }, [data]) - - useEffect(() => { - refetch({ key, namespace }) - }, [key, namespace, store, refetch]) - - if (error) { - // throw new Response(error.message, { - // status: error.details.httpStatusCode, - // statusText: error.details.httpStatus, - // }) - return - } - - const loadingText = i18n.t('Loading') - - return ( -
- -
- -
-
- ) -} - -export default Edit diff --git a/src/components/edit/Editor.tsx b/src/components/edit/Editor.tsx deleted file mode 100644 index fa6ea01..0000000 --- a/src/components/edit/Editor.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { json } from '@codemirror/lang-json' -import CodeMirror from '@uiw/react-codemirror' -import PropTypes from 'prop-types' -import React from 'react' - -const Editor = ({ value, handleChange }) => { - return ( - - ) -} - -Editor.propTypes = { - handleChange: PropTypes.func, - value: PropTypes.string, -} - -export default Editor diff --git a/src/components/keys/Keys.tsx b/src/components/keys/Keys.tsx deleted file mode 100644 index 1eaa45c..0000000 --- a/src/components/keys/Keys.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import KeysTable from './KeysTable' - -export default function Keys() { - return ( -
- -
- ) -} diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx deleted file mode 100644 index 17b8b81..0000000 --- a/src/components/keys/keysTable.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useDataEngine, useDataQuery } from '@dhis2/app-runtime' -import { - DataTable, - DataTableCell, - DataTableColumnHeader, - DataTableRow, - TableBody, - TableHead, -} from '@dhis2/ui' -import React, { useEffect, useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import classes from '../../App.module.css' -import useCustomAlert from '../../hooks/useCustomAlert' -import i18n from '../../locales' -import DeleteButton from '../delete/DeleteButton' -import DeleteModal from '../delete/DeleteModal' -import Error from '../Error' -import CenteredLoader from '../Loader' - -interface QueryResults { - results: [] -} - -const fetchNamespaceQuery = ({ store }) => ({ - results: { - resource: `${store}`, - id: ({ id }) => id, - }, -}) - -const KeysTable = () => { - const { store, namespace } = useParams() - const navigate = useNavigate() - const engine = useDataEngine() - const { showError, showSuccess } = useCustomAlert() - - const { data, loading, refetch, error } = useDataQuery( - fetchNamespaceQuery({ store }), - { - variables: { - id: namespace, - }, - } - ) - - const [deleteNamespace, setDeleteNamespace] = useState(false) - const [selectedKey, setSelectedKey] = useState('') - const [openModal, setOpenModal] = useState(false) - - useEffect(() => { - refetch({ id: namespace }) - }, [namespace]) - - const handleDeleteAction = async (key) => { - await engine.mutate( - { - type: 'delete', - resource: `${store}/${namespace}`, - id: key, - }, - { - onComplete: () => { - const message = i18n.t('Key deleted successfully') - showSuccess(message) - }, - onError: (error) => { - const message = i18n.t( - 'There was an error deleting the key', - { - error: error.message, - } - ) - showError(message) - }, - } - ) - setOpenModal(false) - - if (deleteNamespace) { - navigate(`/${store}`) - } else { - refetch({ id: namespace }) - } - } - - if (loading) { - return - } - - if (error) { - // throw new Response(error.message, { - // status: error.details.httpStatusCode, - // statusText: error.details.httpStatus, - // }) - return - } - - return ( -
- {data && ( - - - - Keys - - Actions - - - - - {data?.results?.length && ( - <> - {data.results.map((key, index) => { - const handleClick = () => { - const url = `/${store}/edit/${namespace}/${key}` - navigate(url) - } - return ( - - - {key} - - - { - setOpenModal(true) - setDeleteNamespace( - data?.results - ?.length < 2 - ) - setSelectedKey(key) - }} - /> - - - ) - })} - - )} - - - )} - {openModal && ( - handleDeleteAction(selectedKey)} - closeModal={() => setOpenModal(false)} - > -

- {i18n.t( - `Are you sure you want to delete '${selectedKey}' in ${namespace}?` - )} -

- {deleteNamespace && ( -

- {i18n.t( - `This will also delete the namespace '${namespace}'` - )} -

- )} - - )} -
- ) -} - -export default KeysTable diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx deleted file mode 100644 index c866f20..0000000 --- a/src/components/namespaces/LinksList.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { useDataEngine } from '@dhis2/app-service-data' -import PropTypes from 'prop-types' -import React, { useEffect, useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import classes from '../../App.module.css' -import useCustomAlert from '../../hooks/useCustomAlert' -import i18n from '../../locales' -import DeleteModal from '../delete/DeleteModal' -import CenteredLoader from '../Loader' -import SidebarNavLink from '../sidebar/SidebarNavLink' - -function LinksList({ data, error, loading, refetchList }) { - const { store, namespace, key } = useParams() - const [openModal, setOpenModal] = useState(false) - const [selectedNamespace, setSelectedNamespace] = useState('') - const engine = useDataEngine() - const navigate = useNavigate() - const { showError, showSuccess } = useCustomAlert() - - const handleDeleteAction = async (selectedNamespace) => { - await engine.mutate( - { - type: 'delete', - resource: `${store}/${selectedNamespace}`, - id: key, - }, - { - onComplete: () => { - const message = i18n.t('Key deleted successfully', { - key, - }) - showSuccess(message) - }, - onError: (error) => { - const message = i18n.t( - 'There was an error while deleting the key', - { - error: error.message, - } - ) - showError(message) - }, - } - ) - - setOpenModal(false) - refetchList() - navigate(`${store}`) - } - - useEffect(() => { - refetchList() - }, [store, namespace, key]) - - return ( -
- {error && {i18n.t('Error fetching namespaces')}} - {loading && } - {data && ( - <> -

{i18n.t('Namespaces')}

-
    - {data.results.map((namespace: string, index) => { - return ( - { - setOpenModal(true) - setSelectedNamespace(namespace) - }} - /> - ) - })} -
- - )} - {openModal && ( - handleDeleteAction(selectedNamespace)} - closeModal={() => setOpenModal(false)} - > -

- {i18n.t( - `Are you sure you want to delete '${namespace}'?` - )} -

-

- {i18n.t( - `This will delete all the keys in this namespace` - )} -

- - )} -
- ) -} - -LinksList.propTypes = { - data: PropTypes.object, - error: PropTypes.any, - loading: PropTypes.any, - refetchList: PropTypes.func, -} - -export default LinksList diff --git a/src/components/pager/routes/PagerRouter.tsx b/src/components/pager/routes/PagerRouter.tsx deleted file mode 100644 index 3879504..0000000 --- a/src/components/pager/routes/PagerRouter.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { Navigate, createHashRouter } from 'react-router-dom' -import EditPage from '../pages/Edit' -import ErrorComponent from '../pages/Error' -import KeysPage from '../pages/Keys' -import NamespacesPage from '../pages/Namespaces' -import PagerLayout from './PagerLayout' - -export const pagerRouter = createHashRouter([ - { - path: '/', - element: , - errorElement: , - children: [ - { index: true, element: }, - { - path: ':store', - element: , - }, - { - path: ':store/edit/:namespace', - element: , - }, - { - path: ':store/edit/:namespace/:key', - element: , - }, - ], - }, -]) diff --git a/src/components/sidebar/DataStoreSelect.tsx b/src/components/sidebar/DataStoreSelect.tsx deleted file mode 100644 index 62fd8e4..0000000 --- a/src/components/sidebar/DataStoreSelect.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' -import PropTypes from 'prop-types' -import React from 'react' -import i18n from '../../locales' - -const DataStoreSelect = ({ option, handleChange }) => { - return ( -
- - - - -
- ) -} - -DataStoreSelect.propTypes = { - handleChange: PropTypes.func, - option: PropTypes.string, -} - -export default DataStoreSelect diff --git a/src/components/sidebar/SidebarNavLink.tsx b/src/components/sidebar/SidebarNavLink.tsx deleted file mode 100644 index 10e2a83..0000000 --- a/src/components/sidebar/SidebarNavLink.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Button } from '@dhis2/ui' -import { IconDelete16 } from '@dhis2/ui-icons' -import PropTypes from 'prop-types' -import React from 'react' -import { NavLink } from 'react-router-dom' -import classes from '../../App.module.css' - -const SidebarNavLink = ({ to, label, handleDeleteModal }) => { - return ( -
  • - - isActive ? 'active' : isPending ? 'pending' : '' - } - > - {label} - -
    • - ) -} - -SidebarNavLink.propTypes = { - handleDeleteModal: PropTypes.func, - label: PropTypes.string, - to: PropTypes.string, -} - -export default SidebarNavLink diff --git a/src/components/sidebar/searchField.tsx b/src/components/sidebar/searchField.tsx deleted file mode 100644 index c2a0cf4..0000000 --- a/src/components/sidebar/searchField.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { InputField } from '@dhis2/ui' -import React from 'react' -import classes from '../../App.module.css' -import i18n from '../../locales' - -const SearchField = () => { - return ( -
    - -
    - ) -} - -export default SearchField diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx deleted file mode 100644 index 106830a..0000000 --- a/src/components/sidebar/sidebar.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { useDataQuery } from '@dhis2/app-service-data' -import { Card, Divider } from '@dhis2/ui' -import React, { useEffect, useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import classes from '../../App.module.css' -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 { - error: dataStoreQueryError, - loading: dataStoreQueryLoading, - data: dataStoreQueryData, - refetch: refetchDataStore, - } = useDataQuery(dataStoreQuery) - - const { - error: userDataStoreQueryError, - loading: userDataStoreQueryLoading, - data: userDataStoreQueryData, - refetch: refetchUserDataStore, - } = useDataQuery(userDataStoreQuery) - - useEffect(() => { - const storeOptions = ['dataStore', 'userDataStore'] - if (!storeOptions.includes(store)) { - navigate('/dataStore') - } else { - setOption(store) - } - }, [store]) - - const handleDataStoreSelect = ({ selected }) => { - setOption(selected) - navigate(`/${selected}`) - } - return ( - -
    - -
    - - {store && ( - <> - {/* */} - {store === 'userDataStore' && ( - - )} - {store === 'dataStore' && ( - - )} - - )} -     - ) -} - -export default Sidebar diff --git a/src/hooks/useCustomAlert.tsx b/src/hooks/useCustomAlert.tsx deleted file mode 100644 index 56b3c9d..0000000 --- a/src/hooks/useCustomAlert.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useAlert } from '@dhis2/app-service-alerts' - -const useCustomAlert = () => { - const { show } = useAlert( - ({ message }) => message, - ({ isError }) => (isError ? { critical: true } : { success: true }) - ) - return { - showSuccess: (message) => show({ message }), - showError: (message) => show({ message, isError: true }), - } -} - -export default useCustomAlert diff --git a/src/components/pager/pages/Edit.tsx b/src/pages/Edit.tsx similarity index 90% rename from src/components/pager/pages/Edit.tsx rename to src/pages/Edit.tsx index 7eedd5b..921e302 100644 --- a/src/components/pager/pages/Edit.tsx +++ b/src/pages/Edit.tsx @@ -1,8 +1,8 @@ import { Button } from '@dhis2-ui/button' import React from 'react' -import i18n from '../../../locales' -import Editor from '../Editor' -import Header from '../Header' +import Editor from '../components/Editor' +import Header from '../components/Header' +import i18n from '../locales' import classes from '../Page.module.css' const EditPage = () => { diff --git a/src/components/pager/pages/Error.tsx b/src/pages/Error.tsx similarity index 93% rename from src/components/pager/pages/Error.tsx rename to src/pages/Error.tsx index 18dcaa3..9b60e92 100644 --- a/src/components/pager/pages/Error.tsx +++ b/src/pages/Error.tsx @@ -1,7 +1,7 @@ import { NoticeBox, Center } from '@dhis2/ui' import React from 'react' import { Link } from 'react-router-dom' -import i18n from '../../../locales' +import i18n from '../locales' const ErrorComponent = () => { return ( diff --git a/src/components/pager/pages/Keys.tsx b/src/pages/Keys.tsx similarity index 72% rename from src/components/pager/pages/Keys.tsx rename to src/pages/Keys.tsx index 88dc95c..95133e2 100644 --- a/src/components/pager/pages/Keys.tsx +++ b/src/pages/Keys.tsx @@ -1,10 +1,10 @@ import React from 'react' -import i18n from '../../../locales' -import CreateAction from '../CreateAction' -import Header from '../Header' +import CreateAction from '../components/actions/CreateAction' +import Header from '../components/Header' +import SearchField from '../components/SearchField' +import ItemsTable from '../components/Table' +import i18n from '../locales' import classes from '../Page.module.css' -import SearchField from '../SearchField' -import ItemsTable from '../table/Table' const KeysPage = () => { const data = { diff --git a/src/components/pager/pages/Namespaces.tsx b/src/pages/Namespaces.tsx similarity index 86% rename from src/components/pager/pages/Namespaces.tsx rename to src/pages/Namespaces.tsx index 1d5d388..45d8d1d 100644 --- a/src/components/pager/pages/Namespaces.tsx +++ b/src/pages/Namespaces.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react' import { useNavigate } from 'react-router-dom' -import i18n from '../../../locales' -import CreateAction from '../CreateAction' -import DataStoreTabBar from '../DataStoreTabBar' +import CreateAction from '../components/actions/CreateAction' +import DataStoreTabBar from '../components/DataStoreTabBar' +import SearchField from '../components/SearchField' +import ItemsTable from '../components/Table' +import i18n from '../locales' import classes from '../Page.module.css' -import SearchField from '../SearchField' -import ItemsTable from '../table/Table' const NamespacesPage = () => { const navigate = useNavigate() diff --git a/src/components/pager/routes/PagerLayout.tsx b/src/routes/PagerLayout.tsx similarity index 100% rename from src/components/pager/routes/PagerLayout.tsx rename to src/routes/PagerLayout.tsx diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx deleted file mode 100644 index ceb0dc1..0000000 --- a/src/routes/layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Card } from '@dhis2/ui' -import React from 'react' -import { Outlet, useParams } from 'react-router-dom' -import classes from '../App.module.css' -import Toolbar from '../components/create/Toolbar' -import Sidebar from '../components/sidebar/Sidebar' - -function Layout() { - const { store } = useParams() - return ( -
    - -
    - - {store && } - - -
    -
    - ) -} - -export default Layout diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 11cbc1e..d2e62d3 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,39 +1,29 @@ import React from 'react' import { Navigate, createHashRouter } from 'react-router-dom' -import Edit from '../components/edit/Edit' -import EmptyArea from '../components/EmptyArea' -import Error from '../components/Error' -import Keys from '../components/keys/Keys' -import Layout from './Layout' +import EditPage from '../pages/Edit' +import ErrorComponent from '../pages/Error' +import KeysPage from '../pages/Keys' +import NamespacesPage from '../pages/Namespaces' +import PagerLayout from './PagerLayout' export const router = createHashRouter([ { path: '/', - errorElement: , - element: , + element: , + errorElement: , children: [ { index: true, element: }, { path: ':store', - children: [ - { - errorElement: , - children: [ - { - index: true, - element: , - }, - { - path: 'edit/:namespace', - element: , - }, - { - path: 'edit/:namespace/:key', - element: , - }, - ], - }, - ], + element: , + }, + { + path: ':store/edit/:namespace', + element: , + }, + { + path: ':store/edit/:namespace/:key', + element: , }, ], },