fix: refactor categorycomboselect

src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx

@@ -1,41 +1,39 @@
 import i18n from '@dhis2/d2-i18n'
-import React, { forwardRef } from 'react'
-import { ModelSingleSelect } from '../ModelSingleSelect/ModelSingleSelectRefactor'
-import type { ModelSingleSelectProps } from '../ModelSingleSelect/ModelSingleSelectRefactor'
-import { useInitialOptionQuery } from './useInitialOptionQuery'
-import { useOptionsQuery } from './useOptionsQuery'
+import React from 'react'
+import { PlainResourceQuery } from '../../../types'
+import { CategoryCombo } from '../../../types/generated'
 import { DisplayableModel } from '../../../types/models'
+import {
+    ModelSingleSelect,
+    ModelSingleSelectProps,
+} from '../ModelSingleSelect/ModelSingleSelectRefactor'
 
-type CategoryComboSelectProps = ModelSingleSelectProps<DisplayableModel> & {
-    required?: boolean
+export const categoryCombosSelectQuery = {
+    resource: 'categoryCombos',
+    params: {
+        filter: 'isDefault:eq:false',
+        fields: ['id', 'displayName'],
+    },
+} as const satisfies PlainResourceQuery
+
+type CategoryComboSelectProps<TCategoryCombo extends DisplayableModel> = Omit<
+    ModelSingleSelectProps<TCategoryCombo>,
+    'query'
+> & {
+    query?: PlainResourceQuery
 }
-export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
-    {
-        onChange,
-        invalid,
-        disabled,
-        placeholder = i18n.t('Category combo'),
-        required,
-        selected,
-        showAllOption,
-        onBlur,
-        onFocus,
-    }: CategoryComboSelectProps,
-    ref
-) {
+
+export const CategoryComboSelect = <
+    TCategoryCombo extends Partial<CategoryCombo> & DisplayableModel = Pick<
+        CategoryCombo,
+        'id' | 'displayName'
+    >
+>({
+    query,
+    ...modelSingleSelectProps
+}: CategoryComboSelectProps<TCategoryCombo>) => {
+    const resolvedQuery = query ?? categoryCombosSelectQuery
     return (
-        <ModelSingleSelect
-            required={required}
-            invalid={invalid}
-            disabled={disabled}
-            useInitialOptionQuery={useInitialOptionQuery}
-            useOptionsQuery={useOptionsQuery}
-            placeholder={placeholder}
-            showAllOption={showAllOption}
-            onChange={onChange}
-            selected={selected}
-            onBlur={onBlur}
-            onFocus={onFocus}
-        />
+        <ModelSingleSelect {...modelSingleSelectProps} query={resolvedQuery} />
     )
-})
+}

src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelectRefactor.tsx

@@ -25,6 +25,7 @@ export type ModelSingleSelectProps<TModel extends DisplayableModel> = Omit<
     | 'available'
     | 'onFilterChange'
     | 'onRetryClick'
+    | 'onEndReached'
     | 'showEndLoader'
     | 'loading'
     | 'error'
@@ -67,10 +68,8 @@ export const ModelSingleSelect = <TModel extends DisplayableModel>({
             lastPage.pager.nextPage ? lastPage.pager.page + 1 : undefined,
         getPreviousPageParam: (firstPage) =>
             firstPage.pager.prevPage ? firstPage.pager.page - 1 : undefined,
-        // select: select
-        //     ? (data) => select(data.pages.flatMap((p) => p[modelName]))
-        //     : undefined,
     })
+
     const allDataMap = useMemo(() => {
         const flatData =
             queryResult.data?.pages.flatMap((page) => page[modelName]) ?? []

src/components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect.tsx

@@ -9,9 +9,10 @@ export const useRefreshModelSingleSelect = (
 
     return useCallback(
         (invalidateFilters?: InvalidateQueryFilters) => {
+            console.log('invalidate', query)
             queryClient.invalidateQueries({
                 queryKey: [query],
-                ...invalidateFilters,
+                // ...invalidateFilters,
             })
         },
         [queryClient, query]

src/lib/query/index.ts

@@ -1,3 +1,4 @@
 export * from './useInfiniteDataQuery'
 export { useBoundQueryFn } from './useBoundQueryFn'
 export { createBoundQueryFn } from './createBoundQueryFn'
+export { mergePlainResourceQueries } from './mergeQuery'

src/pages/dataElements/Edit.tsx

@@ -41,7 +41,11 @@ function useDataElementQuery(id: string) {
         dataElement: {
             resource: `dataElements/${id}`,
             params: {
-                fields: ['*', 'attributeValues[*]'],
+                fields: [
+                    '*',
+                    'categoryCombo[id,displayName]',
+                    'attributeValues[*]',
+                ],
             },
         },
     }

src/pages/dataElements/fields/CategoryComboField.tsx

@@ -1,23 +1,21 @@
 import i18n from '@dhis2/d2-i18n'
-import React, { useEffect, useRef } from 'react'
-import { useForm, useFormState } from 'react-final-form'
+import React, { useEffect } from 'react'
+import { useField, useForm } from 'react-final-form'
 import { useHref } from 'react-router'
 import { EditableFieldWrapper } from '../../../components'
 import { ModelSingleSelectField } from '../../../components/metadataFormControls/ModelSingleSelect/ModelSingleSelectField'
 import { useRefreshModelSingleSelect } from '../../../components/metadataFormControls/ModelSingleSelect/useRefreshSingleSelect'
-import {
-    DEFAULT_CATEGORY_COMBO,
-    useDefaultCategoryComboQuery,
-} from '../../../lib'
+import { DEFAULT_CATEGORY_COMBO } from '../../../lib'
 import { PlainResourceQuery } from '../../../types'
 import classes from './CategoryComboField.module.css'
 
 const query = {
     resource: 'categoryCombos',
     params: {
-        filter: 'isDefault:eq:false',
+        filter: ['isDefault:eq:false'],
+        fields: ['id', 'displayName'],
     },
-} satisfies PlainResourceQuery
+} as const satisfies PlainResourceQuery
 
 /*
  * @TODO: Verify that the api ignores the category combo when it's disabled.
@@ -30,23 +28,25 @@ const query = {
  */
 export function CategoryComboField() {
     const refresh = useRefreshModelSingleSelect(query)
-    const defaultCategoryComboQuery = useDefaultCategoryComboQuery()
     const { change } = useForm()
-    const { values } = useFormState({ subscription: { values: true } })
-    const domainTypeIsTracker = values.domainType === 'TRACKER'
+    const {
+        input: { value: domainTypeValue },
+    } = useField('domainType')
+
+    const domainTypeIsTracker = domainTypeValue === 'TRACKER'
     const disabled = domainTypeIsTracker
     const newCategoryComboLink = useHref('/categoryCombos/new')
 
     useEffect(() => {
-        if (defaultCategoryComboQuery.data?.id && domainTypeIsTracker) {
-            change('categoryCombo.id', defaultCategoryComboQuery.data.id)
+        if (domainTypeIsTracker) {
+            change('categoryCombo', DEFAULT_CATEGORY_COMBO)
         }
-    }, [change, defaultCategoryComboQuery.data?.id, domainTypeIsTracker])
+    }, [change, domainTypeIsTracker])
 
     return (
         <EditableFieldWrapper
             dataTest="formfields-categorycombo"
-            onRefresh={() => refresh}
+            onRefresh={() => refresh()}
             onAddNew={() => window.open(newCategoryComboLink, '_blank')}
         >
             <div className={classes.categoryComboSelect}>

src/types/query.ts

@@ -14,6 +14,7 @@ type QueryParams = {
     [key: string]: unknown
 }
 
+/* A simple resource-query, without params callback */
 export type PlainResourceQuery = {
     resource: string
     id?: string