bug fixed finally

src/ActionTypes/actionTypes.js

@@ -2,3 +2,4 @@ export const FETCH_ALL = 'FETCH_ALL';
 export const CREATE = 'CREATE';
 export const UPDATE = 'UPDATE';
 export const DELETE = 'DELETE';
+export const lIKE_POST = 'LIKE_POST';

src/actions/posts.js

@@ -1,17 +1,14 @@
 import * as api from '../api';
-import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../ActionTypes/actionTypes';
+import { FETCH_ALL, CREATE, UPDATE, DELETE, lIKE_POST } from '../ActionTypes/actionTypes';
 
 // Create the actions.
 
 export const getPosts = () => async (dispatch) => {
   try {
     const { data } = await api.fetchPosts();
-    // debug line
-
     const action = { type: FETCH_ALL, payload: data };
     dispatch(action);
   } catch (error) {
-    /* eslint-disable no-console */
     console.log(error);
   }
 };
@@ -45,3 +42,13 @@ export const deletePost = (id) => async (dispatch) => {
     console.log(error);
   }
 };
+
+export const likePost = (id) => async (dispatch) => {
+  try {
+    const { data } = await api.likePost(id);
+    const action = { type: lIKE_POST, payload: data };
+    dispatch(action);
+  } catch (error) {
+    console.log(error);
+  }
+};

src/api/index.js

@@ -13,3 +13,6 @@ export const updatePost = (id, updatedPost) =>
 
 export const deletePost = (id) =>
   axios.delete(`${url}/${id}`, { headers: { 'Access-Control-Allow-Origin': '*' } });
+
+export const likePost = (id) =>
+  axios.patch(`${url}/${id}/likedPost`, { headers: { 'Access-Control-Allow-Origin': '*' } });

src/components/Form/Form.js

@@ -35,8 +35,6 @@ const Form = ({ currentId, setCurrentId }) => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    console.log(postData);
-
     if (currentId) {
       dispatch(updatePost(currentId, postData));
     } else {

src/components/Posts/Post/Post.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { deletePost } from '../../../actions/posts';
+import { deletePost, likePost } from '../../../actions/posts';
 
 import makeStyles from './styles';
 
@@ -17,6 +17,7 @@ const Post = ({ post, setCurrentId }) => {
   const dispatch = useDispatch();
 
   const handleClickEdit = (event) => {
+    console.log(event.target.value);
     setCurrentId(post._id);
   };
 
@@ -25,7 +26,8 @@ const Post = ({ post, setCurrentId }) => {
   };
 
   const handleClickLike = (event) => {
-    console.log('Clicking the Like button');
+    console.log(event.target.value);
+    dispatch(likePost(post._id));
   };
 
   return (
@@ -52,28 +54,18 @@ const Post = ({ post, setCurrentId }) => {
         {post.title}
       </Typography>
       <CardContent>
-        <Typography variant="h5" gutterBottom>
+        <Typography variant="body2" color="textSecondary" component="p">
           {post.message}
         </Typography>
       </CardContent>
       <CardActions className={classes.cardActions}>
-        <Button size="small">
-          <ThumbUpAltIcon
-            className={classes.iconMargin}
-            fontSize="default"
-            color="primary"
-            onClick={handleClickLike}
-          />
-          {`Like ${post.likeCount}`}
+        <Button size="small" onClick={handleClickLike}>
+          <ThumbUpAltIcon className={classes.iconMargin} fontSize="default" color="primary" />
+          {` Like ${post.likeCount}`}
         </Button>
-        <Button size="small">
-          <DeleteIcon
-            className={classes.iconMargin}
-            fontSize="default"
-            color="primary"
-            onClick={handleClickDelete}
-          />
-          {`Delete`}
+        <Button size="small" onClick={handleClickDelete}>
+          <DeleteIcon className={classes.iconMargin} fontSize="default" color="primary" />
+          {` Delete `}
         </Button>
       </CardActions>
     </Card>

src/components/Posts/PostSkeleton/PostSkeleton.js

@@ -1,25 +1,37 @@
 import React, { useState } from 'react';
-import { nanoid } from 'nanoid';
-
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Grid } from '@material-ui/core';
+import { nanoid } from 'nanoid';
 import makeStyles from '../styles';
 
 const PostSkeleton = () => {
   const classes = makeStyles();
-  const [id] = useState(nanoid);
+  const [uuid] = useState(nanoid);
 
   return (
     <Grid className={classes.container} container alignItems="stretch" spacing={3}>
-      {[1, 2, 3, 4].map((index) => (
-        <Grid item key={id} xs={12} sm={6} md={6}>
-          <div>
-            <Skeleton variant="rect" width={300} height={300} />
-            <Skeleton variant="text" width={200} />
-            <Skeleton variant="text" width={250} />
-          </div>
-        </Grid>
-      ))}
+      <Grid item key={uuid} xs={12} sm={6} md={6}>
+        <div>
+          <Skeleton variant="rect" width={300} height={300} />
+          <Skeleton variant="text" width={200} />
+          <Skeleton variant="text" width={250} />
+        </div>
+        <div>
+          <Skeleton variant="rect" width={300} height={300} />
+          <Skeleton variant="text" width={200} />
+          <Skeleton variant="text" width={250} />
+        </div>
+        <div>
+          <Skeleton variant="rect" width={300} height={300} />
+          <Skeleton variant="text" width={200} />
+          <Skeleton variant="text" width={250} />
+        </div>
+        <div>
+          <Skeleton variant="rect" width={300} height={300} />
+          <Skeleton variant="text" width={200} />
+          <Skeleton variant="text" width={250} />
+        </div>
+      </Grid>
     </Grid>
   );
 };

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import thunk from 'redux-thunk';
 import reducers from './reducers';

src/reducers/posts.js

@@ -1,4 +1,4 @@
-import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../ActionTypes/actionTypes';
+import { FETCH_ALL, CREATE, UPDATE, DELETE, lIKE_POST } from '../ActionTypes/actionTypes';
 
 const posts = (posts = [], action) => {
   switch (action.type) {
@@ -15,6 +15,10 @@ const posts = (posts = [], action) => {
     case DELETE:
       return posts.filter((post) => post._id !== action.payload);
 
+    case lIKE_POST:
+      console.log(action.payload._id);
+      return posts.map((post) => (post._id === action.payload._id ? action.payload : post));
+
     default:
       return posts;
   }