Single post (#11)

* Posts Publishing but not everything is working as planned...

* Close on submit, Post submitting better, clean up CSS and add templating

* Add single post functionality

* Squashed commit of the following:

commit 55ac804
Author: Nick Beattie <nick@nickbytes.com>
Date:   Sun Aug 5 17:48:45 2018 -0400

    refactor: refresh posts and stateless components (#12)

src/components/ContentSelection/TextPost/index.js

@@ -44,7 +44,6 @@ class TextPost extends React.Component {
 
   // await archive.writeFile('/mine/posts/' + id + '.json', outputJson);
   // }
-
   async componentDidMount() {}
 
   fieldChange = (e, str) => {

src/components/Header/index.js

@@ -1,5 +1,5 @@
-import React from "react";
-import ContentSelection from "../ContentSelection";
+import React from 'react';
+import ContentSelection from '../ContentSelection';
 
 const Header = ({
   getPosts,
@@ -11,33 +11,33 @@ const Header = ({
   <header className={`Header`}>
     <div className={`Header__Nav`}>
       <a
-        className={`${"ContentToggle"} ${
-          contentSelectionOpen ? "ContentToggle_Open" : ""
+        className={`${'ContentToggle'} ${
+          contentSelectionOpen ? 'ContentToggle_Open' : ''
         }`}
         onClick={() => toggleContentSelection()}
       >
         <img src="/images/icon-plus.svg" alt="plus icon" />
       </a>
-      <div className={"ContentDisplayToggle"}>
+      <div className={'ContentDisplayToggle'}>
         <a
           className={`
-          ${"ContentDisplayToggle__Item"} 
-          ${postDisplay === "mine" ? "ContentDisplayToggle__Item_Selected" : ""}
+          ${'ContentDisplayToggle__Item'} 
+          ${postDisplay === 'mine' ? 'ContentDisplayToggle__Item_Selected' : ''}
         `}
-          onClick={() => togglePostDisplay("mine")}
+          onClick={() => togglePostDisplay('mine')}
         >
           <img src="/images/icon-smile.svg" alt="show my posts" />
         </a>
         <a
           className={`
-          ${"ContentDisplayToggle__Item"} 
+          ${'ContentDisplayToggle__Item'} 
           ${
-            postDisplay === "theirs"
-              ? "ContentDisplayToggle__Item_Selected"
-              : ""
+            postDisplay === 'theirs'
+              ? 'ContentDisplayToggle__Item_Selected'
+              : ''
           }
         `}
-          onClick={() => togglePostDisplay("theirs")}
+          onClick={() => togglePostDisplay('theirs')}
         >
           <img src="/images/icon-group.svg" alt="show their posts" />
         </a>

src/components/Post/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ContentItem from '../../components/ContentView/ContentItem';
 
-const Post = ({ data }) => {
+const Post = ({ post }) => {
   return (
     <div className={`Post`}>
-      <ContentItem vals={data} />
+      <ContentItem vals={post} />
     </div>
   );
 };

src/containers/App/App.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import ContentViewContainer from '../ContentViewContainer';
 import urlEnv from '../../utils/urlEnv';
+import PostContainer from '../PostContainer/index';
 
 class App extends Component {
   constructor(props) {
@@ -71,16 +73,28 @@ class App extends Component {
 
   render() {
     return (
-      <div>
-        <ContentViewContainer
-          contentSelectionOpen={this.state.contentSelectionOpen}
-          toggleContentSelection={this.toggleContentSelection}
-          postDisplay={this.state.postDisplay}
-          posts={this.state.posts}
-          getPosts={this.refreshPosts}
-          togglePostDisplayFn={this.togglePostDisplay}
-        />
-      </div>
+      <Router>
+        <div>
+          <Route
+            exact
+            path="/"
+            render={() => (
+              <ContentViewContainer
+                contentSelectionOpen={this.state.contentSelectionOpen}
+                toggleContentSelection={this.toggleContentSelection}
+                postDisplay={this.state.postDisplay}
+                posts={this.state.posts}
+                getPosts={this.refreshPosts}
+                togglePostDisplayFn={this.togglePostDisplay}
+              />
+            )}
+          />
+          <Route
+            path="/post/:postId"
+            render={props => <PostContainer {...props} />}
+          />
+        </div>
+      </Router>
     );
   }
 }