Prepare UI for text search

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>

src/components/Blog.scss

@@ -24,3 +24,8 @@
 .postListItem {
   border-bottom: 5px solid $body;
 }
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+}

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>
+    )
+  }
+}

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;
+}

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'

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 } />
+    )
+  }
+}

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}
+            <BlogContainer posts={this.state.posts}/>
-              posts={this.state.posts}/>
           </Column>
         </Wrapper>
         <Footer config={this.state.config} />

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'

src/server.js

@@ -54,8 +54,10 @@ if (config.storage === 'file') {
   storage = new MongoStorage(config)
 }
 
-const postApi = new Api(storage)
+if (config.storage === 'mongo') {
-app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+  const postApi = new Api(storage)
+  app.get('/api/v1/posts', postApi.getPosts.bind(postApi))
+}
 
 const scanner = new Scanner(config, storage)