Refactor Search Widget (#4864)

Co-authored-by: Nilesh <[email protected]>
plone · Jul 12, 2023 · 0200a95 · 0200a95
1 parent 1f92348
commit 0200a95
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 98 deletions.
diff --git a/news/4864.feature b/news/4864.feature
@@ -0,0 +1 @@
+Refactor SearchWidget @Tishasoumya-02
diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx
@@ -1,14 +1,7 @@
-/**
- * Search widget component.
- * @module components/theme/SearchWidget/SearchWidget
- */
-
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
-import { compose } from 'redux';
-import { PropTypes } from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from '@plone/volto/components';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -24,96 +17,43 @@ const messages = defineMessages({
   },
 });
 
-/**
- * SearchWidget component class.
- * @class SearchWidget
- * @extends Component
- */
-class SearchWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    pathname: PropTypes.string,
+const SearchWidget = (props) => {
+  const intl = useIntl();
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const onChangeText = (event, { value }) => {
+    setText(value);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      text: '',
-    };
-  }
-
-  /**
-   * On change text
-   * @method onChangeText
-   * @param {object} event Event object.
-   * @param {string} value Text value.
-   * @returns {undefined}
-   */
-  onChangeText(event, { value }) {
-    this.setState({
-      text: value,
-    });
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {event} event Event object.
-   * @returns {undefined}
-   */
-  onSubmit(event) {
+  const pathname = props.pathname;
+  const onSubmit = (event) => {
     const path =
-      this.props.pathname?.length > 0
-        ? `&path=${encodeURIComponent(this.props.pathname)}`
-        : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
-    this.setState({
-      text: '',
-    });
+    setText('');
     event.preventDefault();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Form action="/search" onSubmit={this.onSubmit}>
-        <Form.Field className="searchbox">
-          <Input
-            aria-label={this.props.intl.formatMessage(messages.search)}
-            onChange={this.onChangeText}
-            name="SearchableText"
-            value={this.state.text}
-            transparent
-            autoComplete="off"
-            placeholder={this.props.intl.formatMessage(messages.searchSite)}
-            title={this.props.intl.formatMessage(messages.search)}
-          />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
-            <Icon name={zoomSVG} size="18px" />
-          </button>
-        </Form.Field>
-      </Form>
-    );
-  }
-}
+  };
 
-export default compose(withRouter, injectIntl)(SearchWidget);
+  return (
+    <Form action="/search" onSubmit={onSubmit}>
+      <Form.Field className="searchbox">
+        <Input
+          aria-label={intl.formatMessage(messages.search)}
+          onChange={onChangeText}
+          name="SearchableText"
+          value={text}
+          transparent
+          autoComplete="off"
+          placeholder={intl.formatMessage(messages.searchSite)}
+          title={intl.formatMessage(messages.search)}
+        />
+        <button aria-label={intl.formatMessage(messages.search)}>
+          <Icon name={zoomSVG} size="18px" />
+        </button>
+      </Form.Field>
+    </Form>
+  );
+};
+
+export default SearchWidget;