From d5eab71f3a4877692c18a091088fefce992fdc35 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sat, 11 Jan 2020 00:35:59 +0100
Subject: [PATCH] Pass search query and handler in props

---
 src/components/Blog.js              | 6 ++++--
 src/components/NotFoundPage.js      | 2 +-
 src/components/SearchBox.js         | 9 ++++++---
 src/components/SearchBox.scss       | 6 ++----
 src/containers/BlogContainer.js     | 9 +++++++--
 src/containers/NotFoundContainer.js | 8 +++-----
 6 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/Blog.js b/src/components/Blog.js
index bd1fdf2..8a5417d 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -9,7 +9,9 @@ import contentStyle from '../stylesheets/content.scss'
 export default class Blog extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
-    posts: PropTypes.arrayOf(PropTypes.object).isRequired
+    posts: PropTypes.arrayOf(PropTypes.object).isRequired,
+    searchString: PropTypes.string.isRequired,
+    handleChange: PropTypes.func.isRequired
   }
 
   render () {
@@ -41,7 +43,7 @@ export default class Blog extends Component {
       <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
         <div className={styles.headerContainer}>
           <Header header={'Blog'} role="heading" aria-level="2"/>
-          <SearchBox />
+          <SearchBox searchString={this.props.searchString} handleChange={this.props.handleChange} />
         </div>
         <div className={`${styles.postsList}`} role="list">
           {postsHTML}
diff --git a/src/components/NotFoundPage.js b/src/components/NotFoundPage.js
index dce0428..17a26c0 100644
--- a/src/components/NotFoundPage.js
+++ b/src/components/NotFoundPage.js
@@ -3,7 +3,7 @@ import { Navbar, Header } from '.'
 import '../stylesheets/globals.scss'
 import contentStyle from '../stylesheets/content.scss'
 
-export const NotFoundPage = (props) => {
+const NotFoundPage = (props) => {
   return (
     <div>
       <Navbar config={props.config}/>
diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js
index f0d9433..b67e55e 100644
--- a/src/components/SearchBox.js
+++ b/src/components/SearchBox.js
@@ -5,14 +5,17 @@ import styles from './SearchBox.scss'
 
 export default class SearchBox extends Component {
   static propTypes = {
-    query: PropTypes.string
+    handleChange: PropTypes.func.isRequired,
+    searchString: PropTypes.string
   }
 
   render () {
     return (
       <div className={styles.container}>
-        <input placeholder='Search' className={styles.search} type="text" />
-        <i className="fa fa-search"></i>
+        <input placeholder='Search' className={styles.search} type="text" value={this.props.searchString} onChange={this.props.handleChange}/>
+        <span>
+          <i className={`fa fa-search ${styles.icon}`}></i>
+        </span>
       </div>
     )
   }
diff --git a/src/components/SearchBox.scss b/src/components/SearchBox.scss
index fafeb68..d88a738 100644
--- a/src/components/SearchBox.scss
+++ b/src/components/SearchBox.scss
@@ -6,7 +6,6 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 2px $black;
 }
 
 .search {
@@ -15,11 +14,10 @@
   width: 20px;
   color: $black;
   font-size: 16px;
-  font-weight: 100;
   letter-spacing: 2px;
   border: none;
   border-radius: 5px;
-  background: $body;
+  background: $white;
   transition: width 0.4s ease;
   outline: none;
   box-sizing: border-box;
@@ -27,7 +25,7 @@
   &:focus{ width: 300px; }
 }
 
-i{
+.icon{
   position: relative;
   left: -37px;
   color: $black;
diff --git a/src/containers/BlogContainer.js b/src/containers/BlogContainer.js
index 0fe9e3f..574e4fa 100644
--- a/src/containers/BlogContainer.js
+++ b/src/containers/BlogContainer.js
@@ -12,13 +12,18 @@ export default class BlogContainer extends Component {
     super(props)
     this.state = {
       isLoading: false,
-      posts: props.posts
+      posts: props.posts,
+      searchString: ''
     }
   }
 
+  handleChange (event) {
+    this.setState({ searchString: event.target.value })
+  }
+
   render () {
     return (
-      <Blog isLoading={ this.state.isLoading } posts={ this.state.posts } />
+      <Blog isLoading={ this.state.isLoading } posts={ this.state.posts } searchString={this.state.searchString} handleChange={this.handleChange.bind(this)} />
     )
   }
 }
diff --git a/src/containers/NotFoundContainer.js b/src/containers/NotFoundContainer.js
index 1ec8a02..7222b6d 100644
--- a/src/containers/NotFoundContainer.js
+++ b/src/containers/NotFoundContainer.js
@@ -11,13 +11,11 @@ export default class NotFoundContainer extends Component {
   constructor (props) {
     super(props)
     let data
-
-    // eslint-disable-next-line no-undef
-    if (__isBrowser__) {
+    if (typeof window === 'undefined') {
+      data = props.staticContext.context
+    } else {
       data = window.__INITIAL_DATA__
       delete window.__INITIAL_DATA__
-    } else {
-      data = props.staticContext.context
     }
 
     this.state = {