From 61ef04803a8461c9d97006b2ea1433f190a8537b Mon Sep 17 00:00:00 2001
From: pure-js <3690368+pure-js@users.noreply.github.com>
Date: Tue, 6 Feb 2018 14:37:04 +0300
Subject: [PATCH 1/5] remove unused css rules

---
 src/styles/main.scss                 |  6 ------
 src/styles/modules/_colors.scss      |  6 ------
 src/styles/partials/_base.scss       | 27 ---------------------------
 src/styles/partials/_news-list.scss  | 19 -------------------
 src/styles/partials/_typography.scss | 24 ------------------------
 5 files changed, 82 deletions(-)
 delete mode 100644 src/styles/main.scss
 delete mode 100644 src/styles/modules/_colors.scss
 delete mode 100644 src/styles/partials/_base.scss
 delete mode 100644 src/styles/partials/_news-list.scss
 delete mode 100644 src/styles/partials/_typography.scss

diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index ef9b77d8..00000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/*-- Modules and Variables --*/
-@import "partials/base";
-
-/*--  Partials --*/
-@import "partials/typography";
-@import "partials/news-list";
diff --git a/src/styles/modules/_colors.scss b/src/styles/modules/_colors.scss
deleted file mode 100644
index 39fa7533..00000000
--- a/src/styles/modules/_colors.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/*-- Colors --*/
-
-$moderate-blue: #428bca;
-$dark-blue: #2a6496;
-
-$very-dark-gray: #333;
diff --git a/src/styles/partials/_base.scss b/src/styles/partials/_base.scss
deleted file mode 100644
index 76f2ea51..00000000
--- a/src/styles/partials/_base.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../modules/colors";
-
-/*-- Begin --*/
-
-.body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: $very-dark-gray;
-}
-
-
-.container {
-  margin: 0 auto;
-
-  @media (min-width: 768px) {
-    width: 750px;
-  }
-
-  @media (min-width: 992px) {
-    width: 970px;
-  }
-
-  @media (min-width: 1200px) {
-    width: 1170px;
-  }
-}
diff --git a/src/styles/partials/_news-list.scss b/src/styles/partials/_news-list.scss
deleted file mode 100644
index 360fb418..00000000
--- a/src/styles/partials/_news-list.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.news-list {
-  overflow: hidden;
-  width: 100%;
-  padding: 0 20px;
-  column-gap: 30px;
-  column-count: 1;
-
-  @media screen and (min-width:860px) {
-    column-count: 2;
-  }
-
-  @media screen and (min-width:1280px) {
-    column-count: 3;
-  }
-
-  @media screen and (min-width:1700px) {
-    column-count: 4;
-  }
-}
diff --git a/src/styles/partials/_typography.scss b/src/styles/partials/_typography.scss
deleted file mode 100644
index 4a4e4d6e..00000000
--- a/src/styles/partials/_typography.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Headings
-
-.h3 {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 1.1;
-  margin-top: 20px;
-  margin-bottom: 10px;
-
-  &__link {
-    color: $moderate-blue;
-    text-decoration: none;
-
-    &:hover {
-      color: $dark-blue;
-      text-decoration: underline;
-    }
-  }
-}
-
-
-.p {
-  margin: 0 0 10px;
-}

From 12d9942435b64d2fba2c666c77069a88423f3f9d Mon Sep 17 00:00:00 2001
From: pure-js <3690368+pure-js@users.noreply.github.com>
Date: Tue, 6 Feb 2018 14:46:01 +0300
Subject: [PATCH 2/5] remove js specific styles

---
 src/components/App.jsx         | 4 ++--
 src/components/CreateStory.jsx | 4 ++--
 src/components/Story.jsx       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index f8997515..97f9d9d0 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -4,7 +4,7 @@ import bootstrap from 'bootstrap/scss/bootstrap.scss';
 import Story from './Story';
 import CreateStory from './CreateStory';
 import posts from '../mock-posts';
-import styles from '../styles/main.scss';
+import styles from './App.scss';
 
 class App extends Component {
   constructor(props) {
@@ -35,7 +35,7 @@ class App extends Component {
     return (
       <div className="container">
         <CreateStory addStory={this.addStory} />
-        <div className="card-columns js-news-list">
+        <div className="card-columns">
           {this.state.stories.map(story => (
             <Story
               key={story.heading}
diff --git a/src/components/CreateStory.jsx b/src/components/CreateStory.jsx
index b2d78b5c..67b323f6 100644
--- a/src/components/CreateStory.jsx
+++ b/src/components/CreateStory.jsx
@@ -73,7 +73,7 @@ class CreateStory extends Component {
               <input
                 placeholder="Your heading"
                 type="text"
-                className="form-control js-new-post__heading"
+                className="form-control"
                 value={this.state.heading}
                 onChange={this.handleHeadingChange}
               />
@@ -82,7 +82,7 @@ class CreateStory extends Component {
               <textarea
                 placeholder="Write something"
                 rows="3"
-                className="form-control js-new-post__main-text"
+                className="form-control"
                 value={this.state.body}
                 onChange={this.handleBodyChange}
               />
diff --git a/src/components/Story.jsx b/src/components/Story.jsx
index 21259f43..a755609c 100644
--- a/src/components/Story.jsx
+++ b/src/components/Story.jsx
@@ -16,7 +16,7 @@ class StoriesFeed extends Component {
     const date = datetime.toLocaleString('en-us', { day: 'numeric', month: 'long' });
 
     return (
-      <section className="card js-news-list__item">
+      <section className="card">
         <img className="card-img-top" src={this.props.image} alt="Card cap" />
         <div className="card-body">
           <h3 className="card-title">

From fb4bbbe193e34a16d7cf76569fba280436de0209 Mon Sep 17 00:00:00 2001
From: pure-js <3690368+pure-js@users.noreply.github.com>
Date: Tue, 6 Feb 2018 14:46:13 +0300
Subject: [PATCH 3/5] add grid for stories

---
 src/components/App.scss | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/App.scss

diff --git a/src/components/App.scss b/src/components/App.scss
new file mode 100644
index 00000000..e55aa81e
--- /dev/null
+++ b/src/components/App.scss
@@ -0,0 +1,21 @@
+.news-list {
+  display: grid;
+  //overflow: hidden;
+  //width: 100%;
+  //padding: 0 20px;
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  grid-template-columns: 33% 33% 33%;
+
+  @media screen and (min-width:768px) {
+    //column-count: 2;
+  }
+
+  @media screen and (min-width:992px) {
+    //column-count: 3;
+  }
+
+  @media screen and (min-width:1200px) {
+    //column-count: 4;
+  }
+}

From 4ebed67e6efc1903a89dc89207ddadb998d6ba21 Mon Sep 17 00:00:00 2001
From: pure-js <3690368+pure-js@users.noreply.github.com>
Date: Tue, 6 Feb 2018 15:16:44 +0300
Subject: [PATCH 4/5] add header component

---
 src/components/App.jsx    | 30 +++++++++++++++++-------------
 src/components/Header.jsx | 29 +++++++++++++++++++++++++++++
 src/index-template.html   |  2 +-
 3 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Header.jsx

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 97f9d9d0..b86ad728 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import bootstrap from 'bootstrap/scss/bootstrap.scss';
 
+import Header from './Header';
 import Story from './Story';
 import CreateStory from './CreateStory';
 import posts from '../mock-posts';
@@ -33,19 +34,22 @@ class App extends Component {
 
   render() {
     return (
-      <div className="container">
-        <CreateStory addStory={this.addStory} />
-        <div className="card-columns">
-          {this.state.stories.map(story => (
-            <Story
-              key={story.heading}
-              heading={story.heading}
-              body={story.body}
-              image={story.image}
-              timestamp={story.timestamp}
-              deleteStory={this.deleteStory}
-            />
-          ))}
+      <div>
+        <Header />
+        <div className="container">
+          <CreateStory addStory={this.addStory} />
+          <div className="card-columns">
+            {this.state.stories.map(story => (
+              <Story
+                key={story.heading}
+                heading={story.heading}
+                body={story.body}
+                image={story.image}
+                timestamp={story.timestamp}
+                deleteStory={this.deleteStory}
+              />
+            ))}
+          </div>
         </div>
       </div>
     );
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 00000000..00920ede
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import bootstrap from 'bootstrap/scss/bootstrap.scss';
+
+class Header extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <nav className="navbar navbar-dark bg-dark">
+        <div className="container">
+          <a className="navbar-brand" href="#home">Local microblogging client</a>
+          <div>
+            <form className="form-inline my-2 my-lg-0">
+              <button
+                className="btn btn-outline-success my-2 my-sm-0"
+                type="submit"
+              >New post
+              </button>
+            </form>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+}
+
+export default Header;
diff --git a/src/index-template.html b/src/index-template.html
index 9c5eea7e..cd60f00c 100644
--- a/src/index-template.html
+++ b/src/index-template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="utf-8">
   <title>Local microblogging client</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 </head>

From 92b96088b5dc5281cf23c9a561929854a2fd6a1c Mon Sep 17 00:00:00 2001
From: pure-js <3690368+pure-js@users.noreply.github.com>
Date: Tue, 6 Feb 2018 15:39:47 +0300
Subject: [PATCH 5/5] hide post form by default

---
 src/components/App.jsx    | 20 ++++++++++++++++----
 src/components/Header.jsx | 15 +++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index b86ad728..0552dbea 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -12,10 +12,12 @@ class App extends Component {
     super(props);
     this.state = {
       stories: posts,
+      form: false,
     };
 
     this.addStory = this.addStory.bind(this);
     this.deleteStory = this.deleteStory.bind(this);
+    this.showForm = this.showForm.bind(this);
   }
 
   addStory(story) {
@@ -32,12 +34,22 @@ class App extends Component {
     });
   }
 
+  showForm() {
+    this.setState({
+      form: true,
+    });
+  }
+
   render() {
+    let createForm = null;
+    if (this.state.form) {
+      createForm = <CreateStory addStory={this.addStory} />;
+    }
     return (
       <div>
-        <Header />
-        <div className="container">
-          <CreateStory addStory={this.addStory} />
+        <Header showForm={this.showForm} />
+        <main className="container">
+          {createForm}
           <div className="card-columns">
             {this.state.stories.map(story => (
               <Story
@@ -50,7 +62,7 @@ class App extends Component {
               />
             ))}
           </div>
-        </div>
+        </main>
       </div>
     );
   }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 00920ede..78528d53 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 import bootstrap from 'bootstrap/scss/bootstrap.scss';
+import PropTypes from 'prop-types';
+import StoriesFeed from './Story';
 
 class Header extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <nav className="navbar navbar-dark bg-dark">
@@ -14,8 +12,9 @@ class Header extends Component {
           <div>
             <form className="form-inline my-2 my-lg-0">
               <button
-                className="btn btn-outline-success my-2 my-sm-0"
-                type="submit"
+                className="btn btn-outline-primary my-2 my-sm-0"
+                type="button"
+                onClick={this.props.showForm}
               >New post
               </button>
             </form>
@@ -26,4 +25,8 @@ class Header extends Component {
   }
 }
 
+Header.propTypes = {
+  showForm: PropTypes.func.isRequired,
+};
+
 export default Header;