full

src/actions/index.js

@@ -3,6 +3,7 @@ import axios from "axios";
 export const FETCH_POSTS = "fetch_posts";
 export const CREATE_POST = "create_posts";
 export const FETCH_POST = "fetch_post";
+export const DELETE_POST = "delete_post";
 
 
 
@@ -38,4 +39,13 @@ export function fetchPost(id){
     type: FETCH_POST,
     payload: request
   };
+}
+
+export function deletePost(id, callback) {
+  const request = axios.delete(`${ROOT_URL}/posts/${id}${API_KEY}`)
+.then(() => callback());
+  return {
+    type: DELETE_POST,
+    payload: id
+  };
 }

src/components/posts_index.js

@@ -14,7 +14,7 @@ class PostIndex extends Component {
     return _.map(this.props.posts, post => {
       return (
         <li className="list-group-item" key={post.id}>
-          {post.title}
+          <Link to={`/posts/${post.id}`}>{post.title}</Link>
         </li>
       );
     });
@@ -24,7 +24,9 @@ class PostIndex extends Component {
     return (
       <div>
         <div className="text-xs-right">
-          <Link className="btn btn-primary" to="/posts/new">add a Post</Link>
+          <Link className="btn btn-primary" to="/posts/new">
+            add a Post
+          </Link>
         </div>
 
         <h3>Posts:</h3>

src/components/posts_show.js

@@ -1,30 +1,53 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { fetchPost } from "../actions";
+import { deletePost } from "../actions";
+import { Link } from "react-router-dom";
 
 class PostsShow extends Component {
   componentDidMount() {
+    //To fetch info just once
+    // if (!this.props.post) {
+      const { id } = this.props.match.params;
+      this.props.fetchPost(id);
+    }
+  // }
+
+  onDeleteClick(){
     const { id } = this.props.match.params;
-    this.props.fetchPost(id);
-
+    this.props.deletePost(id, () => {
+      this.props.history.push('/');
+    });
   }
 
   render() {
-
     const { post } = this.props;
-    console.log(post);
+
+    if (!post) {
+      return <div>Loading...</div>;
+    }
+
     return (
       <div>
-        <h3></h3>
-        <h6>Categories: </h6>
-        <p>Content</p>
+        <Link className="btn btn-info" to="/">
+          Back to index
+        </Link>
+        <button
+        className="btn btn-danger pull-xs-right"
+        onClick={this.onDeleteClick.bind(this)}
+
+
+        >Delete Post</button>
+        <h3>{post.title}</h3>
+        <h6>Categories:{post.categories} </h6>
+        <p>{post.content}</p>
       </div>
     );
   }
 }
 
 function mapStateToProps({ posts }, ownProps) {
-  return { post: posts[ ownProps.match.params.id ] };
+  return { post: posts[ownProps.match.params.id] };
 }
 
-export default connect(mapStateToProps, { fetchPost })(PostsShow);
+export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);

src/reducers/reducer_posts.js

@@ -1,20 +1,21 @@
 import _ from "lodash";
-import { FETCH_POSTS,FETCH_POST } from "../actions";
+import { FETCH_POSTS, FETCH_POST } from "../actions";
 
 export default function(state = {}, action) {
   switch (action.type) {
+
+
     case FETCH_POST:
-    // const post = action.payload.data;
-    // const newState = { ...state };
-    // newState[post.id] = post;
-    // return newState;
+      // const post = action.payload.data;
+      // const newState = { ...state };
+      // newState[post.id] = post;
+      // return newState;
+
+      return { ...state, [action.payload.data.id]: action.payload.data };
 
-    return { ...state, [action.payload.data.id]: action.payload.data};
-
     case FETCH_POSTS:
-
-      return _.mapKeys(action.payload.data, 'id');
-
+      return _.mapKeys(action.payload.data, "id");
+
     default:
       return state;
   }