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';