feat(#15): create & implement SearchBox component

Mayank0255 · Nov 3, 2020 · d50a770 · d50a770
1 parent 819d1bb
commit d50a770
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 57 deletions.
diff --git a/client/src/components/SearchBox/SearchBox.component.jsx b/client/src/components/SearchBox/SearchBox.component.jsx
@@ -0,0 +1,23 @@
+import React, {Fragment} from 'react';
+import {ReactComponent as Search} from "../../assets/Search.svg";
+
+const SearchBox = ({placeholder, handleChange, pt, px}) => {
+    return <Fragment>
+        <form id="search"
+              className={`grid--cell fl-grow1 searchbar ${pt} ${px} js-searchbar`} autoComplete="off">
+            <div className="ps-relative search-frame">
+                <input
+                    className="s-input s-input__search h100 search-box"
+                    autoComplete="off"
+                    type="text"
+                    maxLength="35"
+                    placeholder={placeholder}
+                    onChange= {handleChange}
+                />
+                <Search/>
+            </div>
+        </form>
+    </Fragment>
+}
+
+export default SearchBox;
diff --git a/client/src/components/SearchBox/SearchBox.styles.scss b/client/src/components/SearchBox/SearchBox.styles.scss
@@ -0,0 +1,11 @@
+.search-frame {
+  width: 220px;
+  //float: right;
+}
+
+.search-box:focus {
+  border-color: #2b5f8a;
+  box-shadow: 0 0 0 4px #378ad326;
+  color: #fff;
+  outline: 0;
+}
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
@@ -8,6 +8,7 @@ import { ReactComponent as Logo } from '../../assets/LogoMd.svg';
 import { ReactComponent as Search } from '../../assets/Search.svg';
 
 import './header.styles.scss';
+import SearchBox from "../SearchBox/SearchBox.component";
 
 const Header = ({ auth: { isAuthenticated, loading }, logout }) => {
     const authLinks = (
@@ -52,17 +53,10 @@ const Header = ({ auth: { isAuthenticated, loading }, logout }) => {
             {!loading && (
                 <Fragment>{isAuthenticated ? authTabs : guestTabs}</Fragment>
             )}
-            <form id="search" role="search" method="get"
-                  className="grid--cell fl-grow1 searchbar px12 js-searchbar " autoComplete="off">
-                <div className="ps-relative">
-                    <input name="q"
-                           type="text"
-                           placeholder="Search&#x2026;"
-                           maxLength="240"
-                           className="s-input s-input__search js-search-field search-box"/>
-                           <Search/>
-                </div>
-            </form>
+            <SearchBox
+                placeholder={'Search...'}
+                px={'px12'}
+            />
             {!loading && (
                 <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
             )}

diff --git a/client/src/pages/TagsPage/TagsPage.component.jsx b/client/src/pages/TagsPage/TagsPage.component.jsx
@@ -10,6 +10,7 @@ import RightSideBar from '../../components/rightSideBar/rightSideBar.component';
 import Spinner from "../../components/spinner/spinner.component";
 
 import {ReactComponent as Search} from "../../assets/Search.svg";
+import SearchBox from "../../components/SearchBox/SearchBox.component";
 
 const TagsPage = ({ getTags , tag: { tags, loading }}) => {
     useEffect(() => {
@@ -35,16 +36,11 @@ const TagsPage = ({ getTags , tag: { tags, loading }}) => {
                     <div className='headline-count'>
                         <div>
                             <span>1,025 tags</span>
-                            <form id="search"
-                                  className="grid--cell fl-grow1 searchbar pt12 js-searchbar " autoComplete="off">
-                                <div className="ps-relative search-frame">
-                                    <input className="s-input s-input__search h100 search-box" autoComplete="off"
-                                           type="text" maxLength="35" placeholder="Filter by tag name"
-                                           onChange= {handleChange}
-                                    />
-                                    <Search/>
-                                </div>
-                            </form>
+                            <SearchBox
+                                placeholder={'filter by tag name'}
+                                handleChange={handleChange}
+                                pt={'pt12'}
+                            />
                         </div>
                     </div>
                     <div className='user-browser'>

diff --git a/client/src/pages/TagsPage/TagsPage.styles.scss b/client/src/pages/TagsPage/TagsPage.styles.scss
@@ -35,18 +35,6 @@
       font-size: 17px;
       margin-right: 12px;
     }
-
-    .search-frame {
-      width: 220px;
-      //float: right;
-    }
-
-    .search-box:focus {
-      border-color: #2b5f8a;
-      box-shadow: 0 0 0 4px #378ad326;
-      color: #fff;
-      outline: 0;
-    }
   }
 
   .user-browser {

diff --git a/client/src/pages/UsersPage/UsersPage.component.jsx b/client/src/pages/UsersPage/UsersPage.component.jsx
@@ -3,12 +3,13 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { getUsers } from '../../redux/users/users.actions';
 
-import './UsersPage.styles.scss'
 import SideBar from '../../components/sideBar/sideBar.component';
 import UserPanel from './UserPanel.component';
 import RightSideBar from '../../components/rightSideBar/rightSideBar.component';
 import Spinner from "../../components/spinner/spinner.component";
-import {ReactComponent as Search} from "../../assets/Search.svg";
+import SearchBox from "../../components/SearchBox/SearchBox.component";
+
+import './UsersPage.styles.scss';
 
 const UsersPage = ({ getUsers, user: { users, loading }  }) => {
     useEffect(() => {
@@ -31,16 +32,11 @@ const UsersPage = ({ getUsers, user: { users, loading }  }) => {
                     <div className='headline-count'>
                         <div>
                             <span>1,025 users</span>
-                            <form id="search"
-                                  className="grid--cell fl-grow1 searchbar pt12 js-searchbar " autoComplete="off">
-                                <div className="ps-relative search-frame">
-                                    <input className="s-input s-input__search h100 search-box" autoComplete="off"
-                                           type="text" maxLength="35" placeholder="Filter by user"
-                                           onChange= {handleChange}
-                                    />
-                                    <Search/>
-                                </div>
-                            </form>
+                            <SearchBox
+                                placeholder={'filter by user'}
+                                handleChange={handleChange}
+                                pt={'pt12'}
+                            />
                         </div>
                     </div>
                     <div className='user-browser'>

diff --git a/client/src/pages/UsersPage/UsersPage.styles.scss b/client/src/pages/UsersPage/UsersPage.styles.scss
@@ -23,18 +23,6 @@
       font-size: 17px;
       margin-right: 12px;
     }
-
-    .search-frame {
-      width: 220px;
-      //float: right;
-    }
-
-    .search-box:focus {
-      border-color: #2b5f8a;
-      box-shadow: 0 0 0 4px #378ad326;
-      color: #fff;
-      outline: 0;
-    }
   }
 
   .user-browser {