Reuse search input component

Author: vgeorge

src/components/tables/search-input.js

@@ -1,28 +1,71 @@
-import { Field, Form, Formik } from 'formik'
+import { useEffect, useRef } from 'react'
+import { Field, Form, Formik, useFormikContext } from 'formik'
 import Button from '../button'
 
-const SearchInput = ({ onSearch, placeholder, 'data-cy': dataCy }) => (
-  <Formik
-    initialValues={{ search: '' }}
-    onSubmit={({ search }) => onSearch(search)}
-  >
-    <Form className='form-control'>
-      <Field
-        data-cy={`${dataCy}-search-input`}
-        type='text'
-        name='search'
-        id='search'
-        placeholder={placeholder}
-      />
-      <Button
-        data-cy={`${dataCy}-search-submit`}
-        type='submit'
-        variant='submit'
+/**
+ * This is a helper component to auto-submit search values after a timeout
+ */
+const AutoSubmitSearch = () => {
+  const timerRef = useRef(null)
+
+  const { values, touched, submitForm } = useFormikContext()
+
+  useEffect(() => {
+    // Check if input was touched. Formik behavior is to update 'touched'
+    // flag on input blur or submit, but we want to submit changes also on
+    // key press. 'touched' is not a useEffect dependency because it is
+    // constantly updated without value changes.
+    const isTouched = touched.search || values?.search.length > 0
+
+    // If search is touched
+    if (isTouched) {
+      // Clear previous timeout, if exists
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+      // Define new timeout
+      timerRef.current = setTimeout(submitForm, 1000)
+    }
+
+    // Clear timeout on unmount
+    return () => timerRef.current && clearTimeout(timerRef.current)
+  }, [values])
+
+  return null
+}
+
+/**
+ * The search input
+ */
+const SearchInput = ({ onSearch, placeholder, 'data-cy': dataCy }) => {
+  return (
+    <Formik
+      initialValues={{ search: '' }}
+      onSubmit={({ search }) => onSearch(search)}
+    >
+      <Form
+        className='form-control justify-start'
+        style={{ alignItems: 'stretch' }}
       >
-        Search
-      </Button>
-    </Form>
-  </Formik>
-)
+        <Field
+          data-cy={`${dataCy}-search-input`}
+          type='search'
+          name='search'
+          id='search'
+          placeholder={placeholder}
+          style={{ width: '12rem' }}
+        />
+        <Button
+          data-cy={`${dataCy}-search-submit`}
+          type='submit'
+          variant='submit'
+          useIcon='magnifier-left'
+          flat
+        />
+        <AutoSubmitSearch />
+      </Form>
+    </Formik>
+  )
+}
 
 export default SearchInput

src/components/tables/users.js

@@ -1,77 +1,10 @@
 import T from 'prop-types'
 import Table from './table'
 import { useFetchList } from '../../hooks/use-fetch-list'
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import Pagination from '../pagination'
 import qs from 'qs'
-import { Field, Form, Formik, useFormikContext } from 'formik'
-import Button from '../button'
-
-/**
- * This is a helper component to auto-submit search values after a timeout
- */
-const AutoSubmitSearch = () => {
-  const timerRef = useRef(null)
-
-  const { values, touched, submitForm } = useFormikContext()
-
-  useEffect(() => {
-    // Check if input was touched. Formik behavior is to update 'touched'
-    // flag on input blur or submit, but we want to submit changes also on
-    // key press. 'touched' is not a useEffect dependency because it is
-    // constantly updated without value changes.
-    const isTouched = touched.search || values?.search.length > 0
-
-    // If search is touched
-    if (isTouched) {
-      // Clear previous timeout, if exists
-      if (timerRef.current) {
-        clearTimeout(timerRef.current)
-      }
-      // Define new timeout
-      timerRef.current = setTimeout(submitForm, 1000)
-    }
-
-    // Clear timeout on unmount
-    return () => timerRef.current && clearTimeout(timerRef.current)
-  }, [values])
-
-  return null
-}
-
-/**
- * The search input
- */
-const SearchInput = ({ onSearch, 'data-cy': dataCy }) => {
-  return (
-    <Formik
-      initialValues={{ search: '' }}
-      onSubmit={({ search }) => onSearch(search)}
-    >
-      <Form
-        className='form-control justify-start'
-        style={{ alignItems: 'stretch' }}
-      >
-        <Field
-          data-cy={`${dataCy}-search-input`}
-          type='search'
-          name='search'
-          id='search'
-          placeholder='Search username...'
-          style={{ width: '12rem' }}
-        />
-        <Button
-          data-cy={`${dataCy}-search-submit`}
-          type='submit'
-          variant='submit'
-          useIcon='magnifier-left'
-          flat
-        />
-        <AutoSubmitSearch />
-      </Form>
-    </Formik>
-  )
-}
+import SearchInput from './search-input'
 
 function UsersTable({ type, orgId, onRowClick, isSearchable }) {
   const [page, setPage] = useState(1)