rehamdling like and getlikes to posts slice

Author: BasharElmetwaliahmed

src/Components/Home/HomeContent/HomeContent.jsx

@@ -4,8 +4,7 @@ import Posts from "../../Posts/Posts"
 
 
 function HomeContent() {
-
-
+ console.log('aaasdasd')
   return (
     <div className="w-1/2 h-full  shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] min-h-[calc(100vh_-_99px)] bg-[rgba(252,250,248,1)]">  
     <div className="w-full  2xl:w-[700px] 2xl:mx-auto !2xl:px-0 px-9">

src/Components/Posts/Post/Post.jsx

@@ -6,52 +6,24 @@ import PostHeader from './PostHeader';
 import useFetch from '../../../CustomHooks/useFetch'; // Import useFetch
 import { getOptions } from '../../../options'; // Import getOptions
 import CommentSection from './PostActions/comment/CommentSection';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchLikesForPost } from '../../../store/posts/fetchLikesForPost';
 
 function Post({ post }) {
-  const [usersLikesThisPost, setUsersLikesThisPost] = useState([]);
-  const [usersCommentsOnPost, setUsersCommentsOnPost] = useState([]);
-
-  const { fetchApi: getLikesData } = useFetch(`http://localhost:8000/api/posts/1/comments/likes`, getOptions);
-  const { fetchApi: getCommentsData } = useFetch(`http://localhost:8000/api/posts/1/comments`, getOptions);
-
-
-      const fetchComments = async () => {
-      try {
-        const resData = await getCommentsData();
-        console.log(resData)
-        if (resData.ok) {
-          setUsersCommentsOnPost(resData.data.comments);
-        }
-
-      } catch (error) {
-        console.error('Error fetching comments:', error);
-      }
-    };
-  useEffect(() => {
-    const fetchLikes = async () => {
-      try {
-        const resData = await getLikesData();
-        if (resData.ok) {
-          setUsersLikesThisPost(resData.data.likeData);
-        }
-      } catch (error) {
-        console.error('Error fetching likes:', error);
-      }
-    };
-
-
-
-    fetchLikes();
-    fetchComments();
-  }, []);
-
+  const dispatch=useDispatch()
+  const likesDataForPost=useSelector(state=>state.posts).postsLikesData
+  const  existedPost=likesDataForPost.find(postData=>{
+    return post.id==postData.postid})
+  useEffect(()=>{
+    dispatch(fetchLikesForPost(post.id))
+  },[])
   return (
     <div className='py-[30px] border-t-[6px] border-t-[rgba(235,235,235,1)] font-medium'>
       <PostHeader post={post} />
       <div >
       <PostContent post={post} />
-      <PostDetails post={post} />
-      <PostActions post={post} usersLikesThisPost={usersLikesThisPost} />
+      <PostDetails post={post}  />
+      <PostActions post={post} usersLikesThisPost={existedPost?existedPost.likesData:[]} />
       </div>
 
      {/* {usersCommentsOnPost.length>0&& <CommentSection fetchedComments={usersCommentsOnPost}  /> } */}

src/Components/Posts/Post/PostActions/LikeButton.jsx

@@ -1,28 +1,33 @@
-import { useState } from 'react';
-import { useEffect } from 'react';
-import likeIcon  from '../../../../assets/images/posts/icons8-like-24 2.svg'
+import { useState, useEffect } from 'react';
+import likeIcon from '../../../../assets/images/posts/icons8-like-24 2.svg';
 import useFetch from '../../../../CustomHooks/useFetch';
-import {  postOptions } from '../../../../options';
+import { postOptions } from '../../../../options';
 
-const user_id=2;
-function LikeButton({post,usersLikesThisPost}) {
+const user_id = 2;
+
+function LikeButton({ post, usersLikesThisPost }) {
   const { fetchApi: likePost } = useFetch(`http://localhost:8000/api/posts/${post.id}/like`, postOptions);
-  const [userLikedPost,setUserLikedPost]=useState(false)
+  const [userLikedPost, setUserLikedPost] = useState(false);
+
+
+
   useEffect(() => {
-     const condition = usersLikesThisPost.some((like) => like.user_id === user_id)
-     console.log(condition)
-    setUserLikedPost(condition)
-  },[])
-
- const likePostHandler=async()=>{
-   const resData=await likePost()
-   if(resData.ok){
-    setUserLikedPost(!userLikedPost)
-   }
-  }
+    const condition =  usersLikesThisPost.some((like) => like.user_id === user_id);
+    setUserLikedPost(condition);  }, [usersLikesThisPost]);
+
+  const likePostHandler = async () => {
+    const resData = await likePost();
+    if (resData.ok) {
+      setUserLikedPost(!userLikedPost);
+    }
+  };
+
   return (
-    <button onClick={likePostHandler} className='flex flex-row-reverse items-center gap-2 '  ><img src={likeIcon} alt='like icon' className={`${userLikedPost?'invert-[0.5]':''} w-5`}/>Like</button>
-  )
+    <button onClick={likePostHandler} className='flex flex-row-reverse items-center gap-2'>
+      <img src={likeIcon} alt='like icon' className={`${userLikedPost ? 'invert-[0.5]' : ''} w-5`} />
+      Like
+    </button>
+  );
 }
 
-export default LikeButton
+export default LikeButton;

src/Components/Posts/Posts.jsx

@@ -3,12 +3,14 @@ import {useSelector} from 'react-redux'
 
 function Posts() {
   const posts=useSelector(state=>state.posts).posts
+ if(posts.length)
   return (
     <div  >
    {posts.map(post=><Post post={post} key={post.id}/>)}
 
     </div>
   )
+  else return <></>
 }
 
 export default Posts

src/store/posts/fetchLikesForPost.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-useless-catch */
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getOptions } from '../../options';
+
+// Replace 'YOUR_API_ENDPOINT' with your actual API endpoint
+const API_ENDPOINT = 'http://localhost:8000/api/posts';
+
+// Define the async thunk function
+export const fetchLikesForPost = createAsyncThunk(
+  'posts/fetchLikesForPost',
+  async (postId) => {
+    try {
+      const response = await fetch(`${API_ENDPOINT}/${postId}/likes`,getOptions('38|sum7kFXDl4oezUHHh6BgP6RhKAmdKPJ7YKGKK8bC'));
+      if (!response.ok) {
+        throw 'Failed to fetch likes data';
+      }
+      const resData = await response.json();
+      return resData.data; // Return the fetched like data
+    } catch (error) {
+      return error;
+    }
+  }
+);

src/store/posts/postsSlice.js

@@ -1,9 +1,11 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { fetchLikesForPost } from './fetchLikesForPost';
 
 const postsSlice=createSlice({
     name:'posts',
     initialState:{
-        posts:[]
+        posts:[],
+        postsLikesData:[]
     },
     reducers:{
         setPosts:(state,action)=>{
@@ -30,8 +32,30 @@ const postsSlice=createSlice({
                 return post
             }
            })
+        },
+        
+    },
+  extraReducers: (builder) => {
+    builder.addCase(fetchLikesForPost.fulfilled, (state, action) => {
+      const fetchedData = action.payload.likeData;
+
+      if (fetchedData.length > 0) {
+        const postId = fetchedData[0].post_id;
+
+        // Check if like data for the post already exists
+        const existingPostLikeDataIndex = state.postsLikesData.findIndex((item) => item.postid === postId);
+
+        if (existingPostLikeDataIndex === -1) {
+          // If it doesn't exist, add it to the state
+          state.postsLikesData.push({ postid: postId, likesData: fetchedData });
+        } else {
+          // If it already exists, update the likesData for that post
+          state.postsLikesData[existingPostLikeDataIndex].likesData = fetchedData;
         }
-    }
+      }
+        
+    });
+  },
 })
 
 export const postsReducer=postsSlice.reducer