From 4b47400520b0faffc8500bc9826fab0e95caaae7 Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Wed, 15 Nov 2023 10:54:21 +0100
Subject: [PATCH] refactor(option set select): use hooks from lib

---
 .../OptionSetSelect/OptionSetSelect.tsx       |  4 +-
 .../OptionSetSelect/useInitialOptionQuery.ts  | 16 +---
 .../OptionSetSelect/useOptionsQuery.ts        | 76 -------------------
 3 files changed, 5 insertions(+), 91 deletions(-)
 delete mode 100644 src/components/metadataFormControls/OptionSetSelect/useOptionsQuery.ts

diff --git a/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx b/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
index 4ad53790..25053ed9 100644
--- a/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
+++ b/src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx
@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
 import React, { forwardRef } from 'react'
+import { useOptionSetsQuery } from '../../../lib'
 import { ModelSingleSelect } from '../ModelSingleSelect'
 import { useInitialOptionQuery } from './useInitialOptionQuery'
-import { useOptionsQuery } from './useOptionsQuery'
 
 interface OptionSetSelectProps {
     onChange: ({ selected }: { selected: string }) => void
@@ -31,7 +31,7 @@ export const OptionSetSelect = forwardRef(function OptionSetSelect(
             ref={ref}
             invalid={invalid}
             useInitialOptionQuery={useInitialOptionQuery}
-            useOptionsQuery={useOptionsQuery}
+            useOptionsQuery={useOptionSetsQuery}
             placeholder={placeholder}
             showAllOption={showAllOption}
             onChange={onChange}
diff --git a/src/components/metadataFormControls/OptionSetSelect/useInitialOptionQuery.ts b/src/components/metadataFormControls/OptionSetSelect/useInitialOptionQuery.ts
index 889d1360..f08f1a3a 100644
--- a/src/components/metadataFormControls/OptionSetSelect/useInitialOptionQuery.ts
+++ b/src/components/metadataFormControls/OptionSetSelect/useInitialOptionQuery.ts
@@ -1,5 +1,5 @@
-import { useDataQuery } from '@dhis2/app-runtime'
 import { useRef } from 'react'
+import { useOptionSetQuery } from '../../../lib'
 import { SelectOption } from '../../../types'
 import { FilteredOptionSet } from './types'
 
@@ -7,16 +7,6 @@ type InitialOptionSetQueryResult = {
     optionSet: FilteredOptionSet
 }
 
-const INITIAL_OPTION_QUERY = {
-    optionSet: {
-        resource: 'optionSets',
-        id: (variables: Record<string, string>) => variables.id,
-        params: {
-            fields: ['id', 'displayName'],
-        },
-    },
-}
-
 export function useInitialOptionQuery({
     selected,
     onComplete,
@@ -25,10 +15,10 @@ export function useInitialOptionQuery({
     selected?: string
 }) {
     const initialSelected = useRef(selected)
-    return useDataQuery<InitialOptionSetQueryResult>(INITIAL_OPTION_QUERY, {
+    return useOptionSetQuery<InitialOptionSetQueryResult>({
         lazy: !initialSelected.current,
         variables: { id: selected },
-        onComplete: (data) => {
+        onComplete: (data: InitialOptionSetQueryResult) => {
             const optionSet = data.optionSet
             const { id: value, displayName: label } = optionSet
             onComplete({ value, label })
diff --git a/src/components/metadataFormControls/OptionSetSelect/useOptionsQuery.ts b/src/components/metadataFormControls/OptionSetSelect/useOptionsQuery.ts
deleted file mode 100644
index e4c630d3..00000000
--- a/src/components/metadataFormControls/OptionSetSelect/useOptionsQuery.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useDataQuery } from '@dhis2/app-runtime'
-import { useEffect, useMemo, useState } from 'react'
-import { SelectOption } from '../../../types'
-import { OptionSet, Pager } from '../../../types/generated'
-
-type OptionSetQueryResult = {
-    optionSets: {
-        pager: Pager
-        optionSets: OptionSet[]
-    }
-}
-
-const CATEGORY_COMBOS_QUERY = {
-    optionSets: {
-        resource: 'optionSets',
-        params: (variables: Record<string, string>) => {
-            const params = {
-                page: variables.page,
-                pageSize: 10,
-                fields: ['id', 'displayName'],
-                order: ['displayName'],
-            }
-
-            if (variables.filter) {
-                return {
-                    ...params,
-                    filter: `name:ilike:${variables.filter}`,
-                }
-            }
-
-            return params
-        },
-    },
-}
-
-export function useOptionsQuery() {
-    const [loadedOptions, setLoadedOptions] = useState<SelectOption[]>([])
-    const queryResult = useDataQuery<OptionSetQueryResult>(
-        CATEGORY_COMBOS_QUERY,
-        {
-            variables: {
-                page: 1,
-                filter: '',
-            },
-        }
-    )
-    const { data } = queryResult
-
-    // Must be done in `useEffect` and not in `onComplete`, as `onComplete`
-    // won't get called when useDataQuery has the values in cache already
-    useEffect(() => {
-        if (data?.optionSets) {
-            const { pager, optionSets } = data.optionSets
-            // We want to add new options to existing ones so we don't have to
-            // refetch existing options
-            setLoadedOptions((prevLoadedOptions) => [
-                // We only want to add when the current page is > 1
-                ...(pager.page === 1 ? [] : prevLoadedOptions),
-                ...(optionSets.map((catCombo) => {
-                    const { id, displayName } = catCombo
-                    return { value: id, label: displayName }
-                }) || []),
-            ])
-        }
-    }, [data])
-
-    return useMemo(() => {
-        const pager = queryResult.data?.optionSets.pager
-        const result = loadedOptions
-
-        return {
-            ...queryResult,
-            data: { pager, result },
-        }
-    }, [loadedOptions, queryResult])
-}