From c7c46db4132927d9d0e06bfea32f0923d2814d76 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Wed, 8 Jan 2020 22:28:57 +0100
Subject: [PATCH] Prepare UI for text search

---
 src/components/Blog.js          |  8 +++++---
 src/components/Blog.scss        |  5 +++++
 src/components/SearchBox.js     | 19 ++++++++++++++++++
 src/components/SearchBox.scss   | 34 +++++++++++++++++++++++++++++++++
 src/components/index.js         |  1 +
 src/containers/BlogContainer.js | 24 +++++++++++++++++++++++
 src/containers/MainContainer.js |  6 +++---
 src/containers/index.js         |  1 +
 src/server.js                   |  6 ++++--
 9 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SearchBox.js
 create mode 100644 src/components/SearchBox.scss
 create mode 100644 src/containers/BlogContainer.js

diff --git a/src/components/Blog.js b/src/components/Blog.js
index ca6d940..bd1fdf2 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Spinner, Header } from '.'
+import { Spinner, Header, SearchBox } from '.'
 import '../stylesheets/globals.scss'
 import MarkdownIt from 'markdown-it'
 import styles from './Blog.scss'
@@ -39,8 +39,10 @@ export default class Blog extends Component {
 
     return (
       <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
-        <Header header={'Blog'} role="heading" aria-level="2"/>
-
+        <div className={styles.headerContainer}>
+          <Header header={'Blog'} role="heading" aria-level="2"/>
+          <SearchBox />
+        </div>
         <div className={`${styles.postsList}`} role="list">
           {postsHTML}
         </div>
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
index 63abd14..ebb3642 100644
--- a/src/components/Blog.scss
+++ b/src/components/Blog.scss
@@ -24,3 +24,8 @@
 .postListItem {
   border-bottom: 5px solid $body;
 }
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js
new file mode 100644
index 0000000..f0d9433
--- /dev/null
+++ b/src/components/SearchBox.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import '../stylesheets/globals.scss'
+import styles from './SearchBox.scss'
+
+export default class SearchBox extends Component {
+  static propTypes = {
+    query: PropTypes.string
+  }
+
+  render () {
+    return (
+      <div className={styles.container}>
+        <input placeholder='Search' className={styles.search} type="text" />
+        <i className="fa fa-search"></i>
+      </div>
+    )
+  }
+}
diff --git a/src/components/SearchBox.scss b/src/components/SearchBox.scss
new file mode 100644
index 0000000..fafeb68
--- /dev/null
+++ b/src/components/SearchBox.scss
@@ -0,0 +1,34 @@
+@import "../stylesheets/variables.scss";
+
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border: 2px $black;
+}
+
+.search {
+  position: relative;
+  padding: 15px 40px 15px 20px;
+  width: 20px;
+  color: $black;
+  font-size: 16px;
+  font-weight: 100;
+  letter-spacing: 2px;
+  border: none;
+  border-radius: 5px;
+  background: $body;
+  transition: width 0.4s ease;
+  outline: none;
+  box-sizing: border-box;
+  
+  &:focus{ width: 300px; }
+}
+
+i{
+  position: relative;
+  left: -37px;
+  color: $black;
+}
diff --git a/src/components/index.js b/src/components/index.js
index a7f8b01..2097f35 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -12,3 +12,4 @@ export { default as SocialLinks } from './SocialLinks'
 export { default as Column } from './Column'
 export { default as Resume } from './Resume'
 export { default as Footer } from './Footer'
+export { default as SearchBox } from './SearchBox'
diff --git a/src/containers/BlogContainer.js b/src/containers/BlogContainer.js
new file mode 100644
index 0000000..0fe9e3f
--- /dev/null
+++ b/src/containers/BlogContainer.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { Blog } from '../components'
+import PropTypes from 'prop-types'
+import '../stylesheets/globals.scss'
+
+export default class BlogContainer extends Component {
+  static propTypes = {
+    posts: PropTypes.arrayOf(PropTypes.object).isRequired
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      isLoading: false,
+      posts: props.posts
+    }
+  }
+
+  render () {
+    return (
+      <Blog isLoading={ this.state.isLoading } posts={ this.state.posts } />
+    )
+  }
+}
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
index 87cf101..6d3d6a6 100644
--- a/src/containers/MainContainer.js
+++ b/src/containers/MainContainer.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { About, Blog, Home, Wrapper, Column, Footer } from '../components'
+import { About, Home, Wrapper, Column, Footer } from '../components'
+import { BlogContainer } from '.'
 
 export default class MainContainer extends Component {
   static propTypes = {
@@ -37,8 +38,7 @@ export default class MainContainer extends Component {
               about={this.state.about}/>
           </Column>
           <Column left={false}>
-            <Blog isLoading={this.state.isLoadingBlog}
-              posts={this.state.posts}/>
+            <BlogContainer posts={this.state.posts}/>
           </Column>
         </Wrapper>
         <Footer config={this.state.config} />
diff --git a/src/containers/index.js b/src/containers/index.js
index 45aa0e9..e56da6e 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,3 +1,4 @@
 export { default as MainContainer } from './MainContainer'
 export { default as ContentContainer } from './ContentContainer'
 export { default as NotFoundContainer } from './NotFoundContainer'
+export { default as BlogContainer } from './BlogContainer'
diff --git a/src/server.js b/src/server.js
index 8fd5bbd..e16aacb 100644
--- a/src/server.js
+++ b/src/server.js
@@ -54,8 +54,10 @@ if (config.storage === 'file') {
   storage = new MongoStorage(config)
 }
 
-const postApi = new Api(storage)
-app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+if (config.storage === 'mongo') {
+  const postApi = new Api(storage)
+  app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+}
 
 const scanner = new Scanner(config, storage)