he fusionado la rama pagination con redux,y actualizacion comentarios

ferdlg · Oct 15, 2024 · f9cef75 · f9cef75
1 parent 3f1147b
commit f9cef75
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 21 deletions.
diff --git a/social-network/src/components/comments/commentList.jsx b/social-network/src/components/comments/commentList.jsx
@@ -1,31 +1,42 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {useSelector, useDispatch} from "react-redux";
 import { ACTIONSCOMMENTS } from "../../redux/slice/comments/types.js";
-
-import { thunks } from "../../redux/slice/coments/thunk.js";
-
+import { thunks } from "../../redux/slice/comments/thunks.js";
+import Comments from "./comments.jsx";
+import { TextArea } from "./textArea.jsx";
 
 const CommentList = ({postId})=>{
     const dispatch = useDispatch();
     const comments = useSelector((state) => state.comment.comments);
 
     useEffect(()=>{
-        dispatch(thunks[ACTIONSPOST.FETCH_POST](postId));
+        dispatch(thunks[ACTIONSCOMMENTS.FETCH_COMMENTS](postId));
     }, [dispatch]);
+    console.log(comments);
     return(
+        <>
+        <div className="container__title">
+                <h1 className="container__title-comments">Comments</h1>
+        </div>
         <div className="comment__list">
             <div className="comment__list-item">
                 {comments.map(comment =>(
-                    <Post
-                    key = {comment.Id}
+                    <Comments
+                    key = {comment.id}
+                    id = {comment.id}
                     postId = {comment.postId}
                     name = {comment.name}
                     email = {comment.email}
                     body = {comment.body}
                     />
                 ))}
             </div>
+            <div className="container__text-area">
+                <TextArea></TextArea>
+            </div>
         </div>
+        </>
+
     );
 
 }

diff --git a/social-network/src/components/comments/comments.jsx b/social-network/src/components/comments/comments.jsx
@@ -3,12 +3,9 @@ import { Card } from "../card/card";
 import { TextArea } from "./textArea";
 import '../../assets/styles/components/comments.css'
 
-const Comments = ({name, email, body})=>{
+const Comments = ({id,name, email, body})=>{
     return(
-        <Card>
-            <div className="container__title">
-                <h1 className="container__title-comments">Comments</h1>
-            </div>
+        <>
             <div className="container">
                 <ul className="container__list">
                     <li className="container__list-avatar"></li>
@@ -23,10 +20,7 @@ const Comments = ({name, email, body})=>{
                     </li>
                 </ul>
             </div>
-            <div className="container__text-area">
-                <TextArea></TextArea>
-            </div>
-        </Card>
+        </>
     );
 }
 export default Comments;
diff --git a/social-network/src/components/post/post.jsx b/social-network/src/components/post/post.jsx
@@ -2,20 +2,22 @@ import React, { useState } from 'react';
 import { FaThumbsUp, FaComment, FaShare } from 'react-icons/fa'; 
 import '../../assets/styles/components/post.css'; 
 import { Card } from '../card/card';
+import CommentList from '../comments/commentList';
 
 const Post = ({ userId, id, title, body, likes, shares }) => {
-  const [comment, setComment] = useState(false);
+  const [showComment, setShowComment] = useState(false);
   const handleOpenComment = ()=>{
-
+    setShowComment(!showComment);
   }
 
   return (
+    <>
     <Card>
     <div className="post" key={id}>
       <div className="post__header">
         <img className="post__avatar" src="avatar.png" alt="User Avatar" />
         <div className="post__user-info">
-          <h3 className="post__username">Friendly User {userId}</h3>
+          <h3 className="post__username">Friendly User {userId} postId = {id} </h3>
           <h5 className="post__timestamp">2 hours ago</h5>
         </div>
       </div>
@@ -25,7 +27,7 @@ const Post = ({ userId, id, title, body, likes, shares }) => {
         <button className="post__action-button">
           <FaThumbsUp /> Likes  {likes}
         </button>
-        <button className="post__action-button">
+        <button className="post__action-button" onClick={handleOpenComment}>
           <FaComment /> Comments
         </button>
         <button className="post__action-button">
@@ -34,6 +36,13 @@ const Post = ({ userId, id, title, body, likes, shares }) => {
       </div>
     </div>
     </Card>
+    {showComment && 
+    <Card>
+      <CommentList postId={id}/>
+    </Card>
+    }
+    </>
+
   );
 };
 

diff --git a/social-network/src/components/post/postList.jsx b/social-network/src/components/post/postList.jsx
@@ -37,7 +37,8 @@ const PostList = ()=>{
             <div className="post__list-item">
                 {paginationPost.map(post =>(
                     <Post
-                    key = {post.Id}
+                    key = {post.id}
+                    id = {post.id}
                     userId = {post.userId}
                     title = {post.title}
                     body = {post.body}

diff --git a/social-network/src/redux/slice/comments/thunks.js b/social-network/src/redux/slice/comments/thunks.js
@@ -4,6 +4,7 @@ import { ACTIONSCOMMENTS } from "./types";
 export const thunks = {
     [ACTIONSCOMMENTS.FETCH_COMMENTS]: createAsyncThunk('comments/fetchcomments', async(postId)=>{
         const response = await fetch(`https://jsonplaceholder.typicode.com/comments?postId=${postId}`);
+       console.log(response)
         return response.json();
     }),
 };