Code split the client, update dependencies

client/src/js/components/pages/Chat/Search.js

@@ -1,42 +1,41 @@
-import React, { PureComponent } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import SearchResult from './SearchResult';
 
-export default class Search extends PureComponent {
-  componentDidUpdate(prevProps) {
-    if (!prevProps.search.show && this.props.search.show) {
-      this.input.focus();
-    }
-  }
+const Search = ({ search, onSearch }) => {
+  const inputEl = useRef();
 
-  inputRef = el => {
-    this.input = el;
+  useEffect(
+    () => {
+      if (search.show) {
+        inputEl.current.focus();
+      }
+    },
+    [search.show]
+  );
+
+  const style = {
+    display: search.show ? 'block' : 'none'
   };
 
-  handleSearch = e => this.props.onSearch(e.target.value);
+  let i = 0;
+  const results = search.results.map(result => (
+    <SearchResult key={i++} result={result} />
+  ));
 
-  render() {
-    const { search } = this.props;
-    const style = {
-      display: search.show ? 'block' : 'none'
-    };
-
-    const results = search.results.map(result => (
-      <SearchResult key={result.id} result={result} />
-    ));
-
-    return (
-      <div className="search" style={style}>
-        <div className="search-input-wrap">
-          <i className="icon-search" />
-          <input
-            ref={this.inputRef}
-            className="search-input"
-            type="text"
-            onChange={this.handleSearch}
-          />
-        </div>
-        <div className="search-results">{results}</div>
+  return (
+    <div className="search" style={style}>
+      <div className="search-input-wrap">
+        <i className="icon-search" />
+        <input
+          ref={inputEl}
+          className="search-input"
+          type="text"
+          onChange={e => onSearch(e.target.value)}
+        />
       </div>
-    );
-  }
-}
+      <div className="search-results">{results}</div>
+    </div>
+  );
+};
+
+export default memo(Search);