Extracting searchBar into its own component

components/browseArchives/index.js

@@ -4,11 +4,12 @@ import InterviewsList from '../interviews/interviewsList';
 import SingleInterview from '../interviews/singleInterview';
 import TopicsList from '../topicsList';
 import ProjectsList from '../projectsList';
+import SearchBar from '../searchBar';
 import SearchResults from '../searchResults';
 import Data from '../../data/archives/interviews';
 import './style.scss';
 
-class Search extends React.Component {
+class BrowseArchives extends React.Component {
   constructor(props) {
     super(props);
 
@@ -67,22 +68,12 @@ class Search extends React.Component {
       isInterviewsListModalOpen,
       isSearchActive,
       activeSingleInterviewId,
+      term,
     } = this.state;
 
     return (
       <div className="browse-wrap">
-        <div className="search-bar">
-          <div className="container">
-            <h3>Browse Archives</h3>
-            <input
-              className="search-input"
-              type="search"
-              placeholder="Search archives"
-              value={this.state.term}
-              onChange={this.onInputChange}
-            />
-          </div>
-        </div>
+        <SearchBar onInputChange={this.onInputChange} term={term} />
         <div className="browse-content-wrap container">
           <div className="browse-content-left">
             {isSearchActive &&
@@ -121,4 +112,4 @@ class Search extends React.Component {
   }
 }
 
-export default Search;
+export default BrowseArchives;

components/browseArchives/style.scss

@@ -1,33 +1,5 @@
 @import './assets/styles/global.scss';
 
-.search-bar {
-  background-color: #efefef;
-  margin-bottom: calculateRem(56);
-
-  h3 {
-    padding: calculateRem(32) 0 0;
-    text-align: center;
-    text-transform: uppercase;
-    font-family: $secondary-font;
-    font-size: calculateRem(36);
-  }
-}
-
-.search-input {
-  width: 100%;
-  height: calculateRem(48);
-  border: 5px solid #efefef;
-  padding: calculateRem(12);
-  font-size: calculateRem(16);
-  position: relative;
-  bottom: calculateRem(-24);
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-}
-
 .browse-content-wrap.container {
   margin-bottom: calculateRem(48);
 

components/searchBar/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import './style.scss';
+
+const SearchBar = props => (
+  <div className="search-bar">
+    <div className="container">
+      <h3>Browse Archives</h3>
+      <input
+        className="search-input"
+        type="search"
+        placeholder="Search archives"
+        value={props.term}
+        onChange={props.onInputChange}
+      />
+    </div>
+  </div>
+);
+
+SearchBar.propTypes = {
+  term: PropTypes.string.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+}
+
+export default SearchBar;

components/searchBar/style.scss

@@ -0,0 +1,29 @@
+@import './assets/styles/global.scss';
+
+.search-bar {
+  background-color: #efefef;
+  margin-bottom: calculateRem(56);
+
+  h3 {
+    padding: calculateRem(32) 0 0;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: $secondary-font;
+    font-size: calculateRem(36);
+  }
+}
+
+.search-input {
+  width: 100%;
+  height: calculateRem(48);
+  border: 5px solid #efefef;
+  padding: calculateRem(12);
+  font-size: calculateRem(16);
+  position: relative;
+  bottom: calculateRem(-24);
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}