Upgrade Client

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "safari >= 7"]
+        }
+      }
+    ],
+    "react"
+  ],
+  "plugins": ["transform-object-rest-spread"]
+}

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+    "extends": "airbnb",
+    "rules": {
+      "react/jsx-filename-extension": 0,
+      "no-underscore-dangle": 0,
+      "consistent-return": 0
+    },
+    "globals": {
+      "document": true,
+      "window": true,
+      "describe": true,
+      "beforeEach": true,
+      "test": true,
+      "expect": true
+    },
+    "plugins": [
+        "react",
+        "jsx-a11y",
+        "import"
+    ]
+};

client/actions/Post.js

@@ -0,0 +1,104 @@
+import request from 'axios';
+
+// Fetch All Posts
+
+function fetchAllPostsRequest() {
+  return {
+    type: 'FETCH_ALL_POSTS_REQUEST',
+  };
+}
+
+function fetchAllPostsSuccess(response) {
+  return {
+    type: 'FETCH_ALL_POSTS_SUCCESS',
+    posts: response.data.posts,
+  };
+}
+
+function fetchAllPostsFailure() {
+  return {
+    type: 'FETCH_ALL_POSTS_FAILURE',
+  };
+}
+
+export function fetchAllPosts() {
+  return (dispatch) => {
+    dispatch(fetchAllPostsRequest());
+    request
+      .get('/api/posts')
+      .then((response) => { dispatch(fetchAllPostsSuccess(response)); })
+      .catch(() => { dispatch(fetchAllPostsFailure()); });
+  };
+}
+
+// Fetch Single Post
+
+function fetchSinglePostRequest() {
+  return {
+    type: 'FETCH_SINGLE_POST_REQUEST',
+  };
+}
+
+function fetchSinglePostSuccess(response) {
+  return {
+    type: 'FETCH_SINGLE_POST_SUCCESS',
+    post: response.data.post,
+  };
+}
+
+function fetchSinglePostFailure() {
+  return {
+    type: 'FETCH_SINGLE_POST_FAILURE',
+  };
+}
+
+export function fetchSinglePost(slug) {
+  return (dispatch) => {
+    dispatch(fetchSinglePostRequest());
+    request
+      .get(`/api/posts/${slug}`)
+      .then((response) => { dispatch(fetchSinglePostSuccess(response)); })
+      .catch(() => { dispatch(fetchSinglePostFailure()); });
+  };
+}
+
+// Delete a Post
+
+function removePost(slug) {
+  return { type: 'REMOVE_POST', slug };
+}
+
+export function deletePost(slug) {
+  return (dispatch) => {
+    dispatch(removePost(slug));
+
+    request
+      .delete(`/api/posts/${slug}`)
+      .then(() => {})
+      .catch(() => {});
+  };
+}
+
+
+// Create a Post
+
+function addPost(post) {
+  return { type: 'ADD_POST', post };
+}
+
+export function createPost(title, content) {
+  return (dispatch) => {
+    request
+      .post('/api/posts', {
+        post: {
+          title,
+          content,
+          name: 'Admin',
+        },
+      })
+      .then((response) => {
+        dispatch(addPost(response.data.post));
+      })
+      .catch(() => {});
+  };
+}

client/app.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import app from './routes';
+import store from './store';
+
+const App = () => (
+  <Provider store={store}>
+    <Router>
+      { app() }
+    </Router>
+  </Provider>
+);
+
+document.addEventListener('DOMContentLoaded', () => {
+  render(<App />, document.getElementById('app'));
+});
+

client/components/Post/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const Post = ({ post, deleteHandler }) => (
+  <div>
+    <Link to={`/${post.slug}`} href={`${post.slug}`}>
+      <h2>{post.title}</h2>
+    </Link>
+    <button onClick={() => { deleteHandler(post.slug); }}>Delete Post</button>
+    <pre>
+      {post.content}
+    </pre>
+  </div>
+);
+
+Post.propTypes = {
+  post: PropTypes.shape({
+    _id: PropTypes.string,
+    content: PropTypes.string,
+  }).isRequired,
+  deleteHandler: PropTypes.func.isRequired,
+};
+
+export default Post;

client/containers/Feed/index.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as actions from '../../actions/Post';
+import Post from '../../components/Post';
+
+class Feed extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      content: '',
+      title: '',
+    };
+
+    this.content = this.content.bind(this);
+    this.deletePost = this.deletePost.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.addPost = this.addPost.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.dispatch(actions.fetchAllPosts());
+  }
+
+  deletePost(slug) {
+    this.props.dispatch(actions.deletePost(slug));
+  }
+
+  handleInput(event) {
+    const { name, value } = event.target;
+
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  addPost() {
+    const { title, content } = this.state;
+    this.props.dispatch(actions.createPost(title, content));
+
+    this.setState({
+      title: '',
+      content: '',
+    });
+  }
+
+  content() {
+    return (
+      this.props.feed.isLoading
+        ? (
+          <p>Loading posts</p>
+        )
+        : (
+          this.props.feed.posts.map(post => (
+            <Post
+              post={post}
+              deleteHandler={this.deletePost}
+              key={post._id}
+            />
+          ))
+        )
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.content()
+        }
+        <div>
+          <input
+            type="text"
+            value={this.state.title}
+            name="title"
+            placeholder="Enter Title"
+            onChange={this.handleInput}
+          />
+          <textarea
+            value={this.state.content}
+            name="content"
+            placeholder="Enter post"
+            onChange={this.handleInput}
+          />
+          <button onClick={this.addPost}>
+            Create Post
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  feed: state.Post,
+});
+
+Feed.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  feed: PropTypes.shape({
+    currentPost: PropTypes.object,
+    posts: PropTypes.array,
+    isLoading: PropTypes.bool,
+    isError: PropTypes.bool,
+  }).isRequired,
+};
+
+export default connect(mapStateToProps)(Feed);

client/containers/Feed/styles.css

@@ -0,0 +1,3 @@
+.heading {
+  font-size: 40px;
+}

client/containers/PostView/index.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as actions from '../../actions/Post';
+import Post from '../../components/Post';
+
+class PostView extends Component {
+  constructor() {
+    super();
+
+    this.content = this.content.bind(this);
+    this.deletePost = this.deletePost.bind(this);
+  }
+
+  componentDidMount() {
+    const { slug } = this.props.match.params;
+    this.props.dispatch(actions.fetchSinglePost(slug));
+  }
+
+  deletePost(slug) {
+    this.props.dispatch(actions.deletePost(slug));
+  }
+
+  content() {
+    return (
+      this.props.feed.isLoading
+        ? (
+          <p>Loading Post</p>
+        )
+        : (
+          <Post
+            post={this.props.feed.currentPost}
+            key={this.props.feed.currentPost._id}
+            deleteHandler={this.deletePost}
+          />
+        )
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.content()
+        }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  feed: state.Post,
+});
+
+PostView.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  feed: PropTypes.shape({
+    currentPost: PropTypes.object,
+    posts: PropTypes.array,
+    isLoading: PropTypes.bool,
+    isError: PropTypes.bool,
+  }).isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.object,
+    path: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
+};
+
+export default connect(mapStateToProps)(PostView);
+

client/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>