refactor(list): use component files instead of array of enabled routes

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<Section>([
-    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: <GenericSectionList key={section.name} />,
-                    }
-                }
                 return {
                     element: (
                         <LegacyAppRedirect

src/components/sectionList/listView/ManageListView.tsx

@@ -44,9 +44,6 @@ const validate = (values: FormValues) => {
     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 = ({

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<PagedResponse<BaseListModel, string>>
+
+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<ModelListResponse>
+        },
+    })
+    const modelList = data?.result[modelListName]
+
+    return (
+        <div>
+            <SectionListWrapper
+                error={error as FetchError | undefined}
+                data={modelList}
+                pager={data?.result.pager}
+                // key={schema.name}
+            />
+        </div>
+    )
+}

src/pages/dataElementGroupSets/List.tsx

@@ -0,0 +1,3 @@
+import { DefaultSectionList } from '../DefaultSectionList'
+
+export const Component = DefaultSectionList

src/pages/dataElementGroups/List.tsx

@@ -0,0 +1,3 @@
+import { DefaultSectionList } from '../DefaultSectionList'
+
+export const Component = DefaultSectionList

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<DataElement, DefaultFields> &
-    Partial<DataElement>
-
-type DataElements = ModelCollectionResponse<FilteredDataElement, 'dataElements'>
-
-type DataElementsResponse = WrapQueryResponse<DataElements>
-
-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<DataElementsResponse>(
-        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 (
-        <div>
-            <SectionListWrapper
-                error={error}
-                data={data?.result.dataElements}
-                pager={data?.result.pager}
-            />
-        </div>
-    )
-}
+export const Component = DefaultSectionList