Convert Searchbar.jsx to a functional component

Author: Akshay02022

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,71 +1,66 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel = i18next.t('Searchbar.SearchSketch'),
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const throttledSearchChange = useCallback(
+    throttle((value) => setSearchTerm(value.trim()), 500),
+    [setSearchTerm]
+  );
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
-  };
+  useEffect(
+    () => () => {
+      resetSearchTerm();
+    },
+    [resetSearchTerm]
+  );
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    throttledSearchChange(value.trim());
   };
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
+  return (
+    <div
+      className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}
+    >
+      <div className="searchbar__button">
+        <SearchIcon
+          className="searchbar__icon"
+          focusable="false"
+          aria-hidden="true"
         />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,