updated Searchbar class component to functional component

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

@@ -1,70 +1,58 @@
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React 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);
-  }
+function Searchbar(props) {
+  const [searchValue, setSearchValue] = useState(props.searchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const searchChange = () => props.setSearchTerm(searchValue.trim());
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
-  };
+  const throttledSearchChange = throttle(searchChange, 500);
+
+  useEffect(
+    () => () => {
+      props.resetSearchTerm();
+    },
+    []
+  );
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleResetSearch = () => {
+    setSearchValue('');
+    props.resetSearchTerm();
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
+  const handleSearchChange = (e) => {
+    const newValue = e.target.value;
+    setSearchValue(newValue);
+    throttledSearchChange(newValue.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={props.searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {props.t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
 }
 
 Searchbar.propTypes = {

docker-compose-development.yml

@@ -7,7 +7,7 @@ services:
   app:
     build:
       context: ./
-      dockerfile: Dockerfile
+      dockerfile: Dockerfile 
       target: development
     environment:
       - MONGO_URL=mongodb://mongo:27017/p5js-web-editor