docs(SearchExampleStandardCustom): use React hooks (#3795)

* docs(SearchExampleStandardCustom): functional component

Converted into a functional component

* Update SearchExampleStandardCustom.js

* Update SearchExampleStandardCustom.js

* final adjustments

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: rpatelcode

docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js

@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types'
 import _ from 'lodash'
 import faker from 'faker'
-import React, { Component } from 'react'
+import React from 'react'
 import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
@@ -11,66 +10,89 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-const resultRenderer = ({ title }) => <Label content={title} />
-
-resultRenderer.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
+const initialState = {
+  loading: false,
+  results: [],
+  value: '',
 }
 
-const initialState = { isLoading: false, results: [], value: '' }
+function exampleReducer(state, action) {
+  switch (action.type) {
+    case 'CLEAN_QUERY':
+      return initialState
+    case 'START_SEARCH':
+      return { ...state, loading: true, value: action.query }
+    case 'FINISH_SEARCH':
+      return { ...state, loading: false, results: action.results }
+    case 'UPDATE_SELECTION':
+      return { ...state, value: action.selection }
 
-export default class SearchExampleStandard extends Component {
-  state = initialState
+    default:
+      throw new Error()
+  }
+}
 
-  handleResultSelect = (e, { result }) => this.setState({ value: result.title })
+const resultRenderer = ({ title }) => <Label content={title} />
 
-  handleSearchChange = (e, { value }) => {
-    this.setState({ isLoading: true, value })
+function SearchExampleStandardCustom() {
+  const [state, dispatch] = React.useReducer(exampleReducer, initialState)
+  const { loading, results, value } = state
 
-    setTimeout(() => {
-      if (this.state.value.length < 1) return this.setState(initialState)
+  const timeoutRef = React.useRef()
+  const handleSearchChange = React.useCallback((e, data) => {
+    clearTimeout(timeoutRef.current)
+    dispatch({ type: 'START_SEARCH', query: data.value })
 
-      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+    timeoutRef.current = setTimeout(() => {
+      if (data.value.length === 0) {
+        dispatch({ type: 'CLEAN_QUERY' })
+        return
+      }
+
+      const re = new RegExp(_.escapeRegExp(data.value), 'i')
       const isMatch = (result) => re.test(result.title)
 
-      this.setState({
-        isLoading: false,
+      dispatch({
+        type: 'FINISH_SEARCH',
         results: _.filter(source, isMatch),
       })
     }, 300)
-  }
+  }, [])
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [])
 
-  render() {
-    const { isLoading, value, results } = this.state
+  return (
+    <Grid>
+      <Grid.Column width={6}>
+        <Search
+          loading={loading}
+          onResultSelect={(e, data) =>
+            dispatch({ type: 'UPDATE_SELECTION', selection: data.result.title })
+          }
+          onSearchChange={handleSearchChange}
+          resultRenderer={resultRenderer}
+          results={results}
+          value={value}
+        />
+      </Grid.Column>
 
-    return (
-      <Grid>
-        <Grid.Column width={6}>
-          <Search
-            loading={isLoading}
-            onResultSelect={this.handleResultSelect}
-            onSearchChange={_.debounce(this.handleSearchChange, 500, {
-              leading: true,
-            })}
-            results={results}
-            value={value}
-            resultRenderer={resultRenderer}
-          />
-        </Grid.Column>
-        <Grid.Column width={10}>
-          <Segment>
-            <Header>State</Header>
-            <pre style={{ overflowX: 'auto' }}>
-              {JSON.stringify(this.state, null, 2)}
-            </pre>
-            <Header>Options</Header>
-            <pre style={{ overflowX: 'auto' }}>
-              {JSON.stringify(source, null, 2)}
-            </pre>
-          </Segment>
-        </Grid.Column>
-      </Grid>
-    )
-  }
+      <Grid.Column width={10}>
+        <Segment>
+          <Header>State</Header>
+          <pre style={{ overflowX: 'auto' }}>
+            {JSON.stringify({ loading, results, value }, null, 2)}
+          </pre>
+          <Header>Options</Header>
+          <pre style={{ overflowX: 'auto' }}>
+            {JSON.stringify(source, null, 2)}
+          </pre>
+        </Segment>
+      </Grid.Column>
+    </Grid>
+  )
 }
+
+export default SearchExampleStandardCustom