From 76595e55086c878824e4a1242392ba8c84acdff5 Mon Sep 17 00:00:00 2001
From: Muhammad Adeel Tajamul
 <77053848+muhammadadeeltajamul@users.noreply.github.com>
Date: Fri, 29 Jul 2022 09:08:01 +0500
Subject: [PATCH] feat: added search button in place of clear button (#221)

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>
---
 src/components/Search.jsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index c00c8b5c..b4430727 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -4,7 +4,8 @@ import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { SearchField } from '@edx/paragon';
+import { Icon, SearchField } from '@edx/paragon';
+import { Search as SearchIcon } from '@edx/paragon/icons';
 
 import { DiscussionContext } from '../discussions/common/context';
 import { setUsernameSearch } from '../discussions/learners/data';
@@ -18,6 +19,7 @@ function Search({ intl }) {
   const postSearch = useSelector(({ threads }) => threads.filters.search);
   const topicSearch = useSelector(({ topics }) => topics.filter);
   const isPostSearch = ['posts', 'my-posts'].includes(page);
+  let searchValue = '';
 
   const onClear = () => {
     dispatch(setSearchQuery(''));
@@ -25,6 +27,10 @@ function Search({ intl }) {
     dispatch(setUsernameSearch(''));
   };
 
+  const onChange = (query) => {
+    searchValue = query;
+  };
+
   const onSubmit = (query) => {
     if (isPostSearch) {
       dispatch(setSearchQuery(query));
@@ -37,13 +43,26 @@ function Search({ intl }) {
 
   useEffect(() => onClear(), [page]);
   return (
-    <SearchField
-      onClear={onClear}
-      onSubmit={onSubmit}
-      value={isPostSearch ? postSearch : topicSearch}
-      placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
-      inputProps={{ className: 'small-font' }}
-    />
+    <>
+      <SearchField.Advanced
+        onClear={onClear}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        value={isPostSearch ? postSearch : topicSearch}
+      >
+        <SearchField.Label />
+        <SearchField.Input
+          style={{ paddingRight: '1rem' }}
+          placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
+        />
+        <span className="mt-auto mb-auto mr-2.5">
+          <Icon
+            src={SearchIcon}
+            onClick={() => onSubmit(searchValue)}
+          />
+        </span>
+      </SearchField.Advanced>
+    </>
   );
 }