diff --git a/src/app/routes/Router.tsx b/src/app/routes/Router.tsx index 3cc723a8..15798886 100644 --- a/src/app/routes/Router.tsx +++ b/src/app/routes/Router.tsx @@ -23,21 +23,12 @@ import { isValidUid, routePaths, } from '../../lib' -import { GenericSectionList } from '../../pages/GenericSectionList' import { OverviewSection } from '../../types' import { Layout, Breadcrumbs, BreadcrumbItem } from '../layout' import { CheckAuthorityForSection } from './CheckAuthorityForSection' import { DefaultErrorRoute } from './DefaultErrorRoute' import { LegacyAppRedirect } from './LegacyAppRedirect' -// Use GenericList-component for these sections -// can easily remove the check to get every list route to use the generic list -const ENABLED_GENERIC_LIST_ROUTES = new Set
([ - SECTIONS_MAP.dataElement, - SECTIONS_MAP.dataElementGroup, - SECTIONS_MAP.dataElementGroupSet, -]) - // This loads all the overview routes in the same chunk since they resolve to the same promise // see https://reactrouter.com/en/main/route/lazy#multiple-routes-in-a-single-file // Overviews are small, and the AllOverview would load all the other overviews anyway, @@ -75,14 +66,6 @@ function createSectionLazyRouteFunction( // means the component is not implemented yet // fallback to redirect to legacy if (isModuleNotFoundError(e)) { - if ( - componentFileName === 'List' && - ENABLED_GENERIC_LIST_ROUTES.has(section) - ) { - return { - element: , - } - } return { element: ( { if (values.columns.length < 1) { errors.columns = i18n.t('At least one column must be selected') } - if (values.filters.length < 1) { - errors.filters = i18n.t('At least one filter must be selected') - } return errors } export const ManageListView = ({ diff --git a/src/pages/DefaultSectionList.tsx b/src/pages/DefaultSectionList.tsx new file mode 100644 index 00000000..0fe18f81 --- /dev/null +++ b/src/pages/DefaultSectionList.tsx @@ -0,0 +1,55 @@ +import { FetchError, useDataEngine } from '@dhis2/app-runtime' +import React from 'react' +import { useQuery } from 'react-query' +import { SectionListWrapper } from '../components' +import { useModelListView } from '../components/sectionList/listView' +import { + useSchemaFromHandle, + useParamsForDataQuery, + BaseListModel, + DEFAULT_FIELD_FILTERS, +} from '../lib' +import { getFieldFilter } from '../lib/models/path' +import { WrapQueryResponse } from '../types' +import { PagedResponse } from '../types/models' + +type ModelListResponse = WrapQueryResponse> + +export const DefaultSectionList = () => { + const { columns } = useModelListView() + const schema = useSchemaFromHandle() + const engine = useDataEngine() + const modelListName = schema.plural + + const initialParams = useParamsForDataQuery() + + const query = { + result: { + resource: modelListName, + params: { + ...initialParams, + fields: columns + .map((column) => getFieldFilter(schema, column.path)) + .concat(DEFAULT_FIELD_FILTERS), + }, + }, + } + const { error, data } = useQuery({ + queryKey: [query], + queryFn: ({ queryKey: [query], signal }) => { + return engine.query(query, { signal }) as Promise + }, + }) + const modelList = data?.result[modelListName] + + return ( +
+ +
+ ) +} diff --git a/src/pages/GenericSectionList.tsx b/src/pages/GenericSectionList.tsx deleted file mode 100644 index 37280aa8..00000000 --- a/src/pages/GenericSectionList.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { useDataQuery } from '@dhis2/app-runtime' -import React, { useEffect, useState } from 'react' -import { SectionListWrapper } from '../components' -import { useModelListView } from '../components/sectionList/listView' -import { - useSchemaFromHandle, - useParamsForDataQuery, - BaseListModel, - DEFAULT_FIELD_FILTERS, -} from '../lib' -import { getFieldFilter } from '../lib/models/path' -import { Query, WrapQueryResponse } from '../types' -import { PagedResponse } from '../types/models' - -type ModelListResponsze = WrapQueryResponse< - PagedResponse -> - -const createQuery = (modelName: string): Query => ({ - result: { - resource: modelName, - params: (params) => params, - }, -}) - -export const GenericSectionList = () => { - const { columns, query: listViewQuery } = useModelListView() - const schema = useSchemaFromHandle() - const modelListName = schema.plural - const [query] = useState(() => createQuery(modelListName)) - const initialParams = useParamsForDataQuery() - - const { refetch, error, data } = useDataQuery( - query, - // refetched on mount by effect below - { lazy: true } - ) - const modelList = data?.result[modelListName] - - useEffect(() => { - // wait to fetch until selected-columns are loaded - // so we dont fetch data multiple times - if (listViewQuery.isLoading) { - return - } - refetch({ - ...initialParams, - fields: columns - .map((column) => getFieldFilter(schema, column.path)) - .concat(DEFAULT_FIELD_FILTERS), - }) - }, [refetch, initialParams, columns, listViewQuery.isLoading, schema]) - - return ( -
- -
- ) -} diff --git a/src/pages/dataElementGroupSets/List.tsx b/src/pages/dataElementGroupSets/List.tsx new file mode 100644 index 00000000..e03292f8 --- /dev/null +++ b/src/pages/dataElementGroupSets/List.tsx @@ -0,0 +1,3 @@ +import { DefaultSectionList } from '../DefaultSectionList' + +export const Component = DefaultSectionList diff --git a/src/pages/dataElementGroups/List.tsx b/src/pages/dataElementGroups/List.tsx new file mode 100644 index 00000000..e03292f8 --- /dev/null +++ b/src/pages/dataElementGroups/List.tsx @@ -0,0 +1,3 @@ +import { DefaultSectionList } from '../DefaultSectionList' + +export const Component = DefaultSectionList diff --git a/src/pages/dataElements/List.tsx b/src/pages/dataElements/List.tsx index 7dea09ac..e03292f8 100644 --- a/src/pages/dataElements/List.tsx +++ b/src/pages/dataElements/List.tsx @@ -1,63 +1,3 @@ -import { useDataQuery } from '@dhis2/app-runtime' -import { SharingDialog } from '@dhis2/ui' -import React, { useEffect } from 'react' -import { SectionListWrapper } from '../../components' -import { useModelListView } from '../../components/sectionList/listView' -import { - useSchemaFromHandle, - useParamsForDataQuery, - DEFAULT_FIELD_FILTERS, - DefaultFields, -} from '../../lib/' -import { getFieldFilter } from '../../lib/models/path' -import { Query, WrapQueryResponse } from '../../types' -import { DataElement, ModelCollectionResponse } from '../../types/models' +import { DefaultSectionList } from '../DefaultSectionList' -type FilteredDataElement = Pick & - Partial - -type DataElements = ModelCollectionResponse - -type DataElementsResponse = WrapQueryResponse - -const query: Query = { - result: { - resource: 'dataElements', - params: (params) => params, - }, -} - -export const Component = () => { - const { columns, query: listViewQuery } = useModelListView() - const initialParams = useParamsForDataQuery() - const schema = useSchemaFromHandle() - const { refetch, error, data } = useDataQuery( - query, - // refetched on mount by effect below - { lazy: true } - ) - - useEffect(() => { - // wait to fetch until selected-columns are loaded - // so we dont fetch data multiple times - if (listViewQuery.isLoading) { - return - } - refetch({ - ...initialParams, - fields: columns - .map((column) => getFieldFilter(schema, column.path)) - .concat(DEFAULT_FIELD_FILTERS), - }) - }, [refetch, initialParams, columns, listViewQuery.isLoading, schema]) - - return ( -
- -
- ) -} +export const Component = DefaultSectionList