docs(SearchExampleStandard): use React hooks (#3794)

* docs(SearchExampleStandard): your description

Converted into Functional functional component

* moved source out of function

* Update SearchExampleStandard.js

* Update SearchExampleStandard.js

* Update SearchExampleStandard.js

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

Author: rpatelcode

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

@@ -1,67 +1,95 @@
 import _ from 'lodash'
 import faker from 'faker'
-import React, { Component } from 'react'
+import React from 'react'
 import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
-const initialState = { isLoading: false, results: [], value: '' }
-
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
   description: faker.company.catchPhrase(),
   image: faker.internet.avatar(),
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  state = initialState
+const initialState = {
+  loading: 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 }
 
-  handleResultSelect = (e, { result }) => this.setState({ value: result.title })
+    default:
+      throw new Error()
+  }
+}
 
-  handleSearchChange = (e, { value }) => {
-    this.setState({ isLoading: true, value })
+function SearchExampleStandard() {
+  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}
+          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}
-          />
-        </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 SearchExampleStandard