post delete option and logic done

client/src/actions/post.js

@@ -1,5 +1,11 @@
 import axios from 'axios'
-import { GET_POSTS_FAILURE, GET_POSTS_SUCCESS, UPDATE_LIKES } from './types'
+import {
+  GET_POSTS_FAILURE,
+  GET_POSTS_SUCCESS,
+  POST_DELETED,
+  UPDATE_LIKES
+} from './types'
+import { setAlert } from './alert'
 
 export const getPosts = () => async (dispatch) => {
   try {
@@ -51,3 +57,19 @@ export const removeLike = (postId) => async (dispatch) => {
     })
   }
 }
+export const deletePost = (postId) => async (dispatch) => {
+  try {
+    await axios.delete(`http://localhost:5000/api/posts/${postId}`)
+
+    dispatch({ type: POST_DELETED, payload: postId })
+    dispatch(setAlert('Post Deleted', 'success'))
+  } catch (error) {
+    dispatch({
+      type: GET_POSTS_FAILURE,
+      payload: {
+        msg: error.response?.statusText,
+        status: error.response?.status
+      }
+    })
+  }
+}

client/src/actions/types.js

@@ -27,5 +27,6 @@ export const GET_PROFILES_SUCCESS = 'GET_PROFILES_SUCCESS'
 
 export const GET_POSTS_SUCCESS = 'GET_POSTS_SUCCESS'
 export const GET_POSTS_FAILURE = 'GET_POSTS_FAILURE'
+export const POST_DELETED = 'POST_DELETED'
 
 export const UPDATE_LIKES = 'UPDATE_LIKES'

client/src/components/posts/PostItem.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
-import { removeLike, addLike } from './../../actions/post'
+import { removeLike, addLike, deletePost } from './../../actions/post'
 
 const PostItem = ({
   post: { _id, date, avatar, comments, name, likes, user, text },
   auth,
   addLike,
+  deletePost,
   removeLike
 }) => {
   return (
@@ -46,7 +47,12 @@ const PostItem = ({
           )}
         </Link>
         {!auth.loading && user === auth.user?._id && (
-          <button type="button" data-id={user} className="btn btn-danger">
+          <button
+            onClick={() => deletePost(_id)}
+            type="button"
+            data-id={user}
+            className="btn btn-danger"
+          >
             <i className="fas fa-times"></i>
           </button>
         )}
@@ -59,7 +65,8 @@ PostItem.propTypes = {
   post: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
   addLike: PropTypes.func.isRequired,
-  removeLike: PropTypes.func.isRequired
+  removeLike: PropTypes.func.isRequired,
+  deletePost: PropTypes.func.isRequired
 }
 
-export default connect(null, { addLike, removeLike })(PostItem)
+export default connect(null, { addLike, removeLike, deletePost })(PostItem)

client/src/reducers/post.js

@@ -1,6 +1,7 @@
 import {
   GET_POSTS_FAILURE,
   GET_POSTS_SUCCESS,
+  POST_DELETED,
   UPDATE_LIKES
 } from './../actions/types'
 
@@ -18,6 +19,12 @@ export default (state = initialState, { type, payload }) => {
         ),
         loading: false
       }
+    case POST_DELETED:
+      return {
+        ...state,
+        posts: state.posts.filter((post) => post._id !== payload),
+        loading: false
+      }
     case GET_POSTS_FAILURE:
       return { ...state, error: payload, loading: false }
     default: