From 07b1a48860698d711264d86fd410f79ea8837636 Mon Sep 17 00:00:00 2001
From: "Karanpal@97" <karangill1810@gmail.com>
Date: Tue, 17 Oct 2023 17:51:56 +0530
Subject: [PATCH 1/2] Moved searchbar to a functional component

---
 .../IDE/components/Searchbar/Searchbar.jsx    | 106 +++++++++---------
 1 file changed, 51 insertions(+), 55 deletions(-)

diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index a7c79d1f46..0dcda2012c 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,71 +1,67 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+
+import React, { useState, useEffect, useCallback } from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
+import PropTypes from 'prop-types';
 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: initialSearchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel,
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(initialSearchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const throttledSearchChange = useCallback(
+    throttle((value) => {
+      setSearchTerm(value.trim());
+    }, 500),
+    [setSearchTerm]
+  );
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  useEffect(() => {
+    resetSearchTerm();
+  }, [resetSearchTerm]);
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    throttledSearchChange(value);
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.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,

From 25af8eb85763a74b8b97d1d5a484abddb9b0e141 Mon Sep 17 00:00:00 2001
From: "Karanpal@97" <karangill1810@gmail.com>
Date: Tue, 17 Oct 2023 18:28:47 +0530
Subject: [PATCH 2/2] Moved searchbar to a functional component

---
 client/modules/IDE/components/Searchbar/Searchbar.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index 0dcda2012c..8faf9d8be5 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,6 +1,3 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/display-name */
-
 import React, { useState, useEffect, useCallback } from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';