From 48287d3e5bb165f91869f6365e21c69128ce2435 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 6 Jul 2022 23:59:16 +0200
Subject: [PATCH 1/3] fix: add debounced data-element search

---
 .../debounced-search-input.js                 |  2 +-
 src/data-workspace/entry-form.js              |  3 +-
 src/data-workspace/filter-field.js            | 14 +++++---
 .../section-form/section-filter.js            | 32 +++++++++++++++++
 src/data-workspace/section-form/section.js    | 34 ++++---------------
 src/shared/index.js                           |  1 +
 .../use-debounce.js                           | 10 +++++-
 7 files changed, 59 insertions(+), 37 deletions(-)
 create mode 100644 src/data-workspace/section-form/section-filter.js
 rename src/{context-selection/org-unit-selector-bar-item => shared}/use-debounce.js (59%)

diff --git a/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js b/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
index e40e266c3..126561be4 100644
--- a/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
+++ b/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { InputField } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import useDebounce from './use-debounce.js'
+import { useDebounce } from '../../shared/index.js'
 
 export default function DebouncedSearchInput({ onChange, initialValue }) {
     const [value, setValue] = useState(initialValue)
diff --git a/src/data-workspace/entry-form.js b/src/data-workspace/entry-form.js
index 76113bdd1..feb58beda 100644
--- a/src/data-workspace/entry-form.js
+++ b/src/data-workspace/entry-form.js
@@ -24,8 +24,7 @@ export const EntryForm = ({ dataSet }) => {
         <>
             {formType !== FORM_TYPES.CUSTOM && (
                 <FilterField
-                    value={globalFilterText}
-                    setFilterText={setGlobalFilterText}
+                    onFilterChange={setGlobalFilterText}
                     formType={formType}
                 />
             )}
diff --git a/src/data-workspace/filter-field.js b/src/data-workspace/filter-field.js
index f7034ef53..e9cf4779f 100644
--- a/src/data-workspace/filter-field.js
+++ b/src/data-workspace/filter-field.js
@@ -2,12 +2,17 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, InputField } from '@dhis2/ui'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
+import { useDebounceCallback } from '../shared/index.js'
 import { FORM_TYPES } from './constants.js'
 import styles from './entry-form.module.css'
 
-export default function FilterField({ value, setFilterText, formType }) {
+export default function FilterField({ onFilterChange, formType }) {
+    const [filterText, setFilterText] = useState('')
     const wrapperClasses = classNames(styles.filterWrapper, 'hide-for-print')
+
+    useDebounceCallback(filterText, onFilterChange)
+
     return (
         <div className={wrapperClasses}>
             <InputField
@@ -19,7 +24,7 @@ export default function FilterField({ value, setFilterText, formType }) {
                         ? i18n.t('Filter fields in all sections')
                         : i18n.t('Filter fields')
                 }
-                value={value}
+                value={filterText}
                 onChange={({ value }) => setFilterText(value)}
             />
             <Button
@@ -36,6 +41,5 @@ export default function FilterField({ value, setFilterText, formType }) {
 
 FilterField.propTypes = {
     formType: PropTypes.string,
-    setFilterText: PropTypes.func,
-    value: PropTypes.string,
+    onFilterChange: PropTypes.func,
 }
diff --git a/src/data-workspace/section-form/section-filter.js b/src/data-workspace/section-form/section-filter.js
new file mode 100644
index 000000000..2abfaea5b
--- /dev/null
+++ b/src/data-workspace/section-form/section-filter.js
@@ -0,0 +1,32 @@
+import i18n from '@dhis2/d2-i18n'
+import { colors, IconFilter16 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useDebounceCallback } from '../../shared/index.js'
+import styles from './section.module.css'
+
+export const SectionFilter = ({ id, onFilterChange }) => {
+    const [filterText, setFilterText] = useState('')
+
+    useDebounceCallback(filterText, onFilterChange)
+
+    return (
+        <label htmlFor={id} className={styles.filterWrapper}>
+            <IconFilter16 color={colors.grey600} />
+            <input
+                name={id}
+                id={id}
+                type="text"
+                placeholder={i18n.t('Type here to filter in this section')}
+                value={filterText}
+                onChange={({ target }) => setFilterText(target.value)}
+                className={styles.filterInput}
+            />
+        </label>
+    )
+}
+
+SectionFilter.propTypes = {
+    id: PropTypes.string,
+    onFilterChange: PropTypes.func,
+}
diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
index 6f71ad364..538fe7d3f 100644
--- a/src/data-workspace/section-form/section.js
+++ b/src/data-workspace/section-form/section.js
@@ -1,18 +1,11 @@
-import i18n from '@dhis2/d2-i18n'
-import {
-    colors,
-    IconFilter16,
-    Table,
-    TableCellHead,
-    TableHead,
-    TableRowHead,
-} from '@dhis2/ui'
+import { Table, TableCellHead, TableHead, TableRowHead } from '@dhis2/ui'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useMetadata, selectors } from '../../metadata/index.js'
 import { CategoryComboTable } from '../category-combo-table/index.js'
 import { getFieldId } from '../get-field-id.js'
+import { SectionFilter } from './section-filter.js'
 import styles from './section.module.css'
 
 export const SectionFormSection = ({
@@ -75,25 +68,10 @@ export const SectionFormSection = ({
                 </TableRowHead>
                 <TableRowHead>
                     <TableCellHead colSpan="100%" className={headerCellStyles}>
-                        <label
-                            htmlFor={filterInputId}
-                            className={styles.filterWrapper}
-                        >
-                            <IconFilter16 color={colors.grey600} />
-                            <input
-                                name={filterInputId}
-                                id={filterInputId}
-                                type="text"
-                                placeholder={i18n.t(
-                                    'Type here to filter in this section'
-                                )}
-                                value={filterText}
-                                onChange={({ target }) =>
-                                    setFilterText(target.value)
-                                }
-                                className={styles.filterInput}
-                            />
-                        </label>
+                        <SectionFilter
+                            id={filterInputId}
+                            onFilterChange={setFilterText}
+                        />
                     </TableCellHead>
                 </TableRowHead>
             </TableHead>
diff --git a/src/shared/index.js b/src/shared/index.js
index d708d50a1..6e4132311 100644
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -5,3 +5,4 @@ export * from './fixed-periods/index.js'
 export * from './period/index.js'
 export * from './sidebar/index.js'
 export * from './utils.js'
+export * from './use-debounce.js'
diff --git a/src/context-selection/org-unit-selector-bar-item/use-debounce.js b/src/shared/use-debounce.js
similarity index 59%
rename from src/context-selection/org-unit-selector-bar-item/use-debounce.js
rename to src/shared/use-debounce.js
index 429e18de8..9300503c4 100644
--- a/src/context-selection/org-unit-selector-bar-item/use-debounce.js
+++ b/src/shared/use-debounce.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 /** Copied from https://usehooks.com/useDebounce/ */
-export default function useDebounce(value, delay) {
+export function useDebounce(value, delay) {
     const [debouncedValue, setDebouncedValue] = useState(value)
 
     useEffect(() => {
@@ -11,3 +11,11 @@ export default function useDebounce(value, delay) {
 
     return debouncedValue
 }
+
+export function useDebounceCallback(value, cb, delay = 200) {
+    const debouncedValue = useDebounce(value, delay)
+
+    useEffect(() => {
+        cb(debouncedValue)
+    }, [debouncedValue, cb])
+}

From 435a302e5e6cdec7258ced9c8e16a76b960fc84f Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Fri, 8 Jul 2022 14:01:44 +0200
Subject: [PATCH 2/3] refactor(use debounce): rename "useDebounce" to
 "useDebounceValue"

---
 .../org-unit-selector-bar-item/debounced-search-input.js      | 4 ++--
 src/shared/use-debounce.js                                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js b/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
index 126561be4..974d92e5a 100644
--- a/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
+++ b/src/context-selection/org-unit-selector-bar-item/debounced-search-input.js
@@ -2,11 +2,11 @@ import i18n from '@dhis2/d2-i18n'
 import { InputField } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import { useDebounce } from '../../shared/index.js'
+import { useDebouncedValue } from '../../shared/index.js'
 
 export default function DebouncedSearchInput({ onChange, initialValue }) {
     const [value, setValue] = useState(initialValue)
-    const debouncedValue = useDebounce(value, 200)
+    const debouncedValue = useDebouncedValue(value, 200)
 
     useEffect(() => {
         onChange(debouncedValue)
diff --git a/src/shared/use-debounce.js b/src/shared/use-debounce.js
index 9300503c4..14c07ac88 100644
--- a/src/shared/use-debounce.js
+++ b/src/shared/use-debounce.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 /** Copied from https://usehooks.com/useDebounce/ */
-export function useDebounce(value, delay) {
+export function useDebouncedValue(value, delay) {
     const [debouncedValue, setDebouncedValue] = useState(value)
 
     useEffect(() => {

From 2e7303d85c410e4d1ed08df8cdad2f044346da53 Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Fri, 8 Jul 2022 14:02:37 +0200
Subject: [PATCH 3/3] refactor(debounce filter inputs): move debounce logic up,
 outside of input

---
 src/data-workspace/entry-form.js              |  4 +++-
 src/data-workspace/filter-field.js            |  8 +++++---
 .../section-form/section-filter.js            |  9 +++++----
 src/data-workspace/section-form/section.js    |  4 +++-
 src/shared/use-debounce.js                    | 20 +++++++++++++------
 5 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/data-workspace/entry-form.js b/src/data-workspace/entry-form.js
index feb58beda..e6dac530e 100644
--- a/src/data-workspace/entry-form.js
+++ b/src/data-workspace/entry-form.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useDebounce } from '../shared/index.js'
 import { FORM_TYPES } from './constants.js'
 import { CustomForm } from './custom-form/index.js'
 import { DefaultForm } from './default-form.js'
@@ -17,6 +18,7 @@ export const EntryForm = ({ dataSet }) => {
     const [globalFilterText, setGlobalFilterText] = React.useState('')
     const formType = dataSet.formType
     const Component = formTypeToComponent[formType]
+    const debouncedSetGlobalFilterText = useDebounce(setGlobalFilterText, 200)
 
     useCloseRightHandPanelOnSelectionChange()
 
@@ -24,7 +26,7 @@ export const EntryForm = ({ dataSet }) => {
         <>
             {formType !== FORM_TYPES.CUSTOM && (
                 <FilterField
-                    onFilterChange={setGlobalFilterText}
+                    onFilterChange={debouncedSetGlobalFilterText}
                     formType={formType}
                 />
             )}
diff --git a/src/data-workspace/filter-field.js b/src/data-workspace/filter-field.js
index e9cf4779f..06bf1493e 100644
--- a/src/data-workspace/filter-field.js
+++ b/src/data-workspace/filter-field.js
@@ -3,7 +3,6 @@ import { Button, InputField } from '@dhis2/ui'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDebounceCallback } from '../shared/index.js'
 import { FORM_TYPES } from './constants.js'
 import styles from './entry-form.module.css'
 
@@ -11,7 +10,10 @@ export default function FilterField({ onFilterChange, formType }) {
     const [filterText, setFilterText] = useState('')
     const wrapperClasses = classNames(styles.filterWrapper, 'hide-for-print')
 
-    useDebounceCallback(filterText, onFilterChange)
+    const onChange = ({ value }) => {
+        setFilterText(value)
+        onFilterChange(value)
+    }
 
     return (
         <div className={wrapperClasses}>
@@ -25,7 +27,7 @@ export default function FilterField({ onFilterChange, formType }) {
                         : i18n.t('Filter fields')
                 }
                 value={filterText}
-                onChange={({ value }) => setFilterText(value)}
+                onChange={onChange}
             />
             <Button
                 secondary
diff --git a/src/data-workspace/section-form/section-filter.js b/src/data-workspace/section-form/section-filter.js
index 2abfaea5b..cf5d2254b 100644
--- a/src/data-workspace/section-form/section-filter.js
+++ b/src/data-workspace/section-form/section-filter.js
@@ -2,13 +2,14 @@ import i18n from '@dhis2/d2-i18n'
 import { colors, IconFilter16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDebounceCallback } from '../../shared/index.js'
 import styles from './section.module.css'
 
 export const SectionFilter = ({ id, onFilterChange }) => {
     const [filterText, setFilterText] = useState('')
-
-    useDebounceCallback(filterText, onFilterChange)
+    const onChange = ({ target }) => {
+        setFilterText(target.value)
+        onFilterChange(filterText)
+    }
 
     return (
         <label htmlFor={id} className={styles.filterWrapper}>
@@ -19,7 +20,7 @@ export const SectionFilter = ({ id, onFilterChange }) => {
                 type="text"
                 placeholder={i18n.t('Type here to filter in this section')}
                 value={filterText}
-                onChange={({ target }) => setFilterText(target.value)}
+                onChange={onChange}
                 className={styles.filterInput}
             />
         </label>
diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
index 538fe7d3f..25366b3e2 100644
--- a/src/data-workspace/section-form/section.js
+++ b/src/data-workspace/section-form/section.js
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useMetadata, selectors } from '../../metadata/index.js'
+import { useDebounce } from '../../shared/index.js'
 import { CategoryComboTable } from '../category-combo-table/index.js'
 import { getFieldId } from '../get-field-id.js'
 import { SectionFilter } from './section-filter.js'
@@ -15,6 +16,7 @@ export const SectionFormSection = ({
 }) => {
     // Could potentially build table via props instead of rendering children
     const [filterText, setFilterText] = useState('')
+    const debouncedSetFilterText = useDebounce(setFilterText, 200)
     const { data } = useMetadata()
 
     if (!data) {
@@ -70,7 +72,7 @@ export const SectionFormSection = ({
                     <TableCellHead colSpan="100%" className={headerCellStyles}>
                         <SectionFilter
                             id={filterInputId}
-                            onFilterChange={setFilterText}
+                            onFilterChange={debouncedSetFilterText}
                         />
                     </TableCellHead>
                 </TableRowHead>
diff --git a/src/shared/use-debounce.js b/src/shared/use-debounce.js
index 14c07ac88..64eb6e0f1 100644
--- a/src/shared/use-debounce.js
+++ b/src/shared/use-debounce.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 /** Copied from https://usehooks.com/useDebounce/ */
 export function useDebouncedValue(value, delay) {
@@ -12,10 +12,18 @@ export function useDebouncedValue(value, delay) {
     return debouncedValue
 }
 
-export function useDebounceCallback(value, cb, delay = 200) {
-    const debouncedValue = useDebounce(value, delay)
+/*
+ * If this component ever causes issues,
+ * consider using https://github.com/xnimorz/use-debounce
+ */
+export function useDebounce(callback, delay) {
+    const timeoutIdRef = useRef(null)
 
-    useEffect(() => {
-        cb(debouncedValue)
-    }, [debouncedValue, cb])
+    return useCallback(
+        (...args) => {
+            clearTimeout(timeoutIdRef.current)
+            timeoutIdRef.current = setTimeout(() => callback(...args), delay)
+        },
+        [callback, delay]
+    )
 }