From a839fdd8632eb31bfdf572fbefec96fcb138288b Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 19 Dec 2023 14:59:25 -0400
Subject: [PATCH 01/13] Feat: View implementation to see the details of a post
 Details: -posts now have a see more button -all posts have a maximum size
 -changed the way of organizing from the backend using a best practice

---
 src/App.js                         |  4 +-
 src/components/PostCard.jsx        | 23 +++++++++---
 src/components/PostDetailsCard.jsx | 59 ++++++++++++++++++++++++++++++
 src/pages/HomePage.js              |  4 +-
 src/pages/PostDetails.js           | 39 ++++++++++++++++++++
 5 files changed, 121 insertions(+), 8 deletions(-)
 create mode 100644 src/components/PostDetailsCard.jsx
 create mode 100644 src/pages/PostDetails.js

diff --git a/src/App.js b/src/App.js
index 0dae341..f6abc00 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import Navbar from "./components/Navbar/Navbar";
 import ContactForm from "./pages/Contact";
 import { DefaultCarousel } from "./components/Carousel/Carousel";
 import UserList from "./pages/Users";
+import { PostDetailsCard } from "./components/PostDetailsCard";
 
 function App() {
   return (
@@ -23,11 +24,12 @@ function App() {
           <Route path="login" exact element={<Login />} />
           <Route path="/" exact element={<HomePageWithCarousel />} />
           <Route path="/contact" exact element={<ContactForm />} />
+          <Route path="/post/:id" exact element={<PostDetailsCard />} />
 
           {/* Private routes */}
           <Route element={<RequiresAuth allowedRoles={["moderator"]} />}>
             <Route path="/admin" exact element={<HomePage />} />
-            <Route path="/posts/:id" element={<PostForm />} />
+            <Route path="/edit/:id" element={<PostForm />} />
             <Route path="/new" exact element={<PostForm />} />
             <Route path="/users" exact element={<UserList />} />
           </Route>
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 53f5ecd..447323c 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -4,7 +4,7 @@ import ReactMarkdown from "react-markdown";
 import { useNavigate } from "react-router-dom";
 import moment from "moment";
 import logoImg from "../Images/postimg.jpg";
-
+import { Link } from "react-router-dom";
 export function insertMedia(filePath) {
   var extension = filePath.split(".").pop().toLowerCase();
 
@@ -31,7 +31,6 @@ export function insertMedia(filePath) {
 export function PostCard({ post }) {
   const { deletePost } = usePosts();
   const navigate = useNavigate();
-
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
 
   const handleDelete = (id) => {
@@ -101,7 +100,7 @@ export function PostCard({ post }) {
         <div>
           <button
             className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
-            onClick={() => navigate(`/posts/${post._id}`)}
+            onClick={() => navigate(`/edit/${post._id}`)}
           >
             <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
             <span className="relative text-black group-hover:text-white">
@@ -126,10 +125,24 @@ export function PostCard({ post }) {
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
 
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description}
+          {post.description
+            ? `${post.description.substr(0, 330)}...`
+            : "sin descripción"}
         </ReactMarkdown>
 
-        <h4 className="text-gray-400 capitalize my-2"> Source: {post.source}</h4>
+        <Link
+          to={`/post/${post._id}`}
+          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+          state={{ post}}
+          
+        >
+          Read more
+        </Link>
+
+        <h4 className="text-gray-400 capitalize my-2">
+          {" "}
+          Source: {post.source}
+        </h4>
       </div>
     </article>
   );
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
new file mode 100644
index 0000000..55994b3
--- /dev/null
+++ b/src/components/PostDetailsCard.jsx
@@ -0,0 +1,59 @@
+import moment from "moment";
+import ReactMarkdown from "react-markdown";
+import { insertMedia } from "./PostCard";
+import logoImg from "../Images/postimg.jpg";
+import { useLocation } from "react-router-dom";
+
+export function PostDetailsCard( ) {
+  let {state}= useLocation();
+  const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
+  
+  return (
+    <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
+      <header className="flex items-center justify-between px-4">
+        <div className="flex justify-between items-center py-4">
+          <img className="w-12 rounded-full" src={logoImg} alt="logo" />
+          <div className="ml-3">
+            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+              {state.post.author}
+            </h1>
+            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+              {normalDate}
+            </p>
+            <p className="text-blue-400 capitalize "> {state.post.categories}</p>
+          </div>
+        </div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-7 w-7 cursor-not-allowed"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+            />
+          </svg>
+        </div>
+      </header>
+
+      {state.post.image && insertMedia(state.post.image.url)}
+
+      <div className="p-6">
+        <h2 className="text-xl text-gray-800 font-semibold">{state.post.title}</h2>
+        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+          {state.post.description}
+        </ReactMarkdown>
+        <h4 className="text-gray-400 capitalize my-2">
+          {" "}
+          Source: {state.post.source}
+        </h4>
+        <h3> {state.post.comments}</h3>
+      </div>
+    </article>
+  );
+}
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 501e51c..90918a9 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -20,11 +20,11 @@ export function HomePage() {
     );
   }
 
-  const reversedPosts = [...posts].reverse();
+ 
 
   return (
     <main className="flex flex-row flex-wrap">
-      {reversedPosts.map((post) => (
+      {posts.map((post) => (
         <article key={post._id} className="m-4">
           <PostCard post={post} />
         </article>
diff --git a/src/pages/PostDetails.js b/src/pages/PostDetails.js
new file mode 100644
index 0000000..fee9463
--- /dev/null
+++ b/src/pages/PostDetails.js
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom"; // Importa useParams de React Router
+import { usePosts } from "../context/postContext";
+import { VscEmptyWindow } from "react-icons/vsc";
+import { PostdetailsCard } from "../components/PostDetailsCard";
+
+export function HomePage() {
+  const { posts,  getPost } = usePosts();
+  const { postId } = useParams(); // Obtén el ID de la ruta
+
+  useEffect(() => {
+    
+      // Si hay un ID en la ruta, obtén solo ese post
+      getPost(postId);
+  
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Asegúrate de ejecutar el efecto cuando cambia el ID
+
+  if (posts.length === 0) {
+    return (
+      <div className="flex flex-col justify-center items-center">
+        <VscEmptyWindow className="w-48 h-48 text-white" />
+        <h1 className="text-white text-2xl">There are no posts</h1>
+      </div>
+    );
+  }
+
+  
+
+  return (
+    <main className="flex flex-row flex-wrap">
+      {posts.map((post) => (
+        <article key={post._id} className="m-4">
+          <PostdetailsCard post={post} />
+        </article>
+      ))}
+    </main>
+  );
+}

From a3ffa99980a92d2ec3def77510abd55b211a10bf Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Wed, 20 Dec 2023 21:21:55 -0400
Subject: [PATCH 02/13] Feat: implementation of view where comments are seen

---
 src/components/Comments.jsx        | 20 ++++++++++++++++++++
 src/components/PostCardUser.jsx    | 15 +++++++++++++--
 src/components/PostDetailsCard.jsx | 19 ++++++++++++-------
 src/pages/PostDetails.js           | 11 ++++++-----
 4 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Comments.jsx

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..241780c
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const Comment = ({ author, text }) => (
+  <div className="comentario">
+    <strong>{author}:</strong> {text}
+  </div>
+);
+
+export const Comments = ({ comments }) => (
+  <div className="comentarios">
+    <h3>Comentarios</h3>
+    {comments.map((comment) => (
+      <Comment
+        key={comment._id} // Usar el identificador único como clave
+        author={comment.author} // Corregir el nombre de la propiedad
+        text={comment.text} // Corregir el nombre de la propiedad
+      />
+    ))}
+  </div>
+);
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index a696402..54d1c3f 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -2,7 +2,7 @@ import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
-
+import { Link } from "react-router-dom";
 export function PostCardUser({ post }) {
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
 
@@ -44,8 +44,19 @@ export function PostCardUser({ post }) {
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description}
+          {post.description
+            ? `${post.description.substr(0, 330)}...`
+            : "sin descripción"}
         </ReactMarkdown>
+
+        <Link
+          to={`/post/${post._id}`}
+          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+          state={{ post}}
+          
+        >
+          Read more
+        </Link>
         <h4 className="text-gray-400 capitalize my-2">
           {" "}
           Source: {post.source}
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 55994b3..ae4744b 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -3,11 +3,12 @@ import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
 import { useLocation } from "react-router-dom";
+import { Comments } from "./Comments";
 
-export function PostDetailsCard( ) {
-  let {state}= useLocation();
+export function PostDetailsCard() {
+  let { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
-  
+
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
@@ -20,7 +21,10 @@ export function PostDetailsCard( ) {
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
               {normalDate}
             </p>
-            <p className="text-blue-400 capitalize "> {state.post.categories}</p>
+            <p className="text-blue-400 capitalize ">
+              {" "}
+              {state.post.categories}
+            </p>
           </div>
         </div>
         <div>
@@ -44,15 +48,16 @@ export function PostDetailsCard( ) {
       {state.post.image && insertMedia(state.post.image.url)}
 
       <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{state.post.title}</h2>
+        <h2 className="text-xl text-gray-800 font-semibold">
+          {state.post.title}
+        </h2>
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
           {state.post.description}
         </ReactMarkdown>
         <h4 className="text-gray-400 capitalize my-2">
-          {" "}
           Source: {state.post.source}
         </h4>
-        <h3> {state.post.comments}</h3>
+        <Comments comments={state.post.comments} />
       </div>
     </article>
   );
diff --git a/src/pages/PostDetails.js b/src/pages/PostDetails.js
index fee9463..020c359 100644
--- a/src/pages/PostDetails.js
+++ b/src/pages/PostDetails.js
@@ -1,20 +1,21 @@
 import { useEffect } from "react";
-import { useParams } from "react-router-dom"; // Importa useParams de React Router
+import { useParams } from "react-router-dom"; 
 import { usePosts } from "../context/postContext";
 import { VscEmptyWindow } from "react-icons/vsc";
 import { PostdetailsCard } from "../components/PostDetailsCard";
 
 export function HomePage() {
   const { posts,  getPost } = usePosts();
-  const { postId } = useParams(); // Obtén el ID de la ruta
+  const { postId } = useParams(); 
 
   useEffect(() => {
     
-      // Si hay un ID en la ruta, obtén solo ese post
+      
       getPost(postId);
   
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Asegúrate de ejecutar el efecto cuando cambia el ID
+    
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); 
 
   if (posts.length === 0) {
     return (

From 89121d128110afeeede1e41a6d46129e239b17c6 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Wed, 3 Jan 2024 16:09:49 -0400
Subject: [PATCH 03/13] Feat: comments in the app

---
 package-lock.json                  | 32 +++++++-------
 package.json                       |  2 +-
 src/components/Comments.jsx        |  8 ++--
 src/components/PostDetailsCard.jsx | 71 +++++++++++++++++++++++++-----
 src/pages/HomePageUser.js          | 18 ++++----
 src/pages/PostDetails.js           | 40 -----------------
 src/pages/PostForm.js              |  1 -
 7 files changed, 91 insertions(+), 81 deletions(-)
 delete mode 100644 src/pages/PostDetails.js

diff --git a/package-lock.json b/package-lock.json
index 5c35d07..5831e0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^4.8.0",
         "react-markdown": "^9.0.0",
-        "react-router-dom": "^6.14.2",
+        "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "react-simplemde-editor": "^5.2.0",
         "simplemde": "^1.11.2",
@@ -3616,11 +3616,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
-      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/plugin-babel": {
@@ -15475,29 +15475,29 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
-      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2"
+        "@remix-run/router": "1.14.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
-      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2",
-        "react-router": "6.14.2"
+        "@remix-run/router": "1.14.1",
+        "react-router": "6.21.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
diff --git a/package.json b/package.json
index 8904574..1c8cf0e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",
     "react-markdown": "^9.0.0",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "react-simplemde-editor": "^5.2.0",
     "simplemde": "^1.11.2",
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 241780c..14f2378 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -8,12 +8,12 @@ export const Comment = ({ author, text }) => (
 
 export const Comments = ({ comments }) => (
   <div className="comentarios">
-    <h3>Comentarios</h3>
+    
     {comments.map((comment) => (
       <Comment
-        key={comment._id} // Usar el identificador único como clave
-        author={comment.author} // Corregir el nombre de la propiedad
-        text={comment.text} // Corregir el nombre de la propiedad
+        key={comment._id} 
+        author={comment.author} 
+        text={comment.text} 
       />
     ))}
   </div>
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index ae4744b..d765935 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -1,14 +1,49 @@
+import React, { useState} from "react";
 import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
+import axios from "axios";
 import { useLocation } from "react-router-dom";
 import { Comments } from "./Comments";
+import toast from "react-hot-toast";
 
 export function PostDetailsCard() {
-  let { state } = useLocation();
+  const { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
+  const [commentText, setCommentText] = useState("");
 
+
+  const handleCommentSubmit = async (e) => {
+    e.preventDefault();
+
+    const postId = state.post._id;
+
+    try {
+      const response = await axios.post(
+        `http://localhost:4000/api/posts/${postId}/comments`,
+        { text: commentText },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${""}`,
+          },
+        }
+      );
+
+      if (response.status === 201) {
+        toast.success('successful comment')
+        setCommentText("");
+        
+      } else {
+        
+      }
+    } catch (error) {
+      toast.error("This didn't work.")
+    }
+  };
+
+  
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
@@ -21,10 +56,7 @@ export function PostDetailsCard() {
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
               {normalDate}
             </p>
-            <p className="text-blue-400 capitalize ">
-              {" "}
-              {state.post.categories}
-            </p>
+            <p className="text-blue-400 capitalize ">{state.post.categories}</p>
           </div>
         </div>
         <div>
@@ -48,15 +80,32 @@ export function PostDetailsCard() {
       {state.post.image && insertMedia(state.post.image.url)}
 
       <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">
-          {state.post.title}
-        </h2>
+        <h2 className="text-xl text-gray-800 font-semibold">{state.post.title}</h2>
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
           {state.post.description}
         </ReactMarkdown>
-        <h4 className="text-gray-400 capitalize my-2">
-          Source: {state.post.source}
-        </h4>
+        <h4 className="text-gray-400 capitalize my-2">Source: {state.post.source}</h4>
+
+        
+        <form onSubmit={handleCommentSubmit}>
+          <label htmlFor="commentText" className="block text-gray-800 font-medium mb-1">
+          write your comment:
+          </label>
+          <textarea
+            id="commentText"
+            name="commentText"
+            value={commentText}
+            onChange={(e) => setCommentText(e.target.value)}
+            rows={4}
+            className="w-full border p-2 mb-2"
+            required
+          />
+          <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded">
+          Send comment
+          </button>
+        </form>
+
+       
         <Comments comments={state.post.comments} />
       </div>
     </article>
diff --git a/src/pages/HomePageUser.js b/src/pages/HomePageUser.js
index d2ba200..1687189 100644
--- a/src/pages/HomePageUser.js
+++ b/src/pages/HomePageUser.js
@@ -21,13 +21,15 @@ export function HomePageUser() {
         );
     }
     
-    const reversedPosts = [...posts].reverse();
+   
 
     return (
-        <div className="grid gap-4 w-25">
-            {reversedPosts.map(post => (
-                <PostCardUser post={post} key={post._id}/>
-            ))}
-        </div>
-    );
-}
+        <main className="flex flex-row flex-wrap">
+          {posts.map((post) => (
+            <article key={post._id} className="m-4">
+              <PostCardUser post={post} />
+            </article>
+          ))}
+        </main>
+      );
+    }
diff --git a/src/pages/PostDetails.js b/src/pages/PostDetails.js
deleted file mode 100644
index 020c359..0000000
--- a/src/pages/PostDetails.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom"; 
-import { usePosts } from "../context/postContext";
-import { VscEmptyWindow } from "react-icons/vsc";
-import { PostdetailsCard } from "../components/PostDetailsCard";
-
-export function HomePage() {
-  const { posts,  getPost } = usePosts();
-  const { postId } = useParams(); 
-
-  useEffect(() => {
-    
-      
-      getPost(postId);
-  
-    
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); 
-
-  if (posts.length === 0) {
-    return (
-      <div className="flex flex-col justify-center items-center">
-        <VscEmptyWindow className="w-48 h-48 text-white" />
-        <h1 className="text-white text-2xl">There are no posts</h1>
-      </div>
-    );
-  }
-
-  
-
-  return (
-    <main className="flex flex-row flex-wrap">
-      {posts.map((post) => (
-        <article key={post._id} className="m-4">
-          <PostdetailsCard post={post} />
-        </article>
-      ))}
-    </main>
-  );
-}
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index f82d82a..0307ecf 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -51,7 +51,6 @@ export function PostForm() {
             title: Yup.string().required("Title is Required"),
             description: Yup.string().required("Description is Required"),
             categories: Yup.string().transform((value, originalValue) => {
-              // Convert the value to a string
               return originalValue ? originalValue.toString() : value;
             }).required("Categories is Required"),
             source: Yup.string(),

From 8c0fa81eceb7c816945457c6b676b1abfff16375 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Fri, 5 Jan 2024 12:11:00 -0400
Subject: [PATCH 04/13] Feat: subscription view implementation details: -user
 can subscribe to newsletters -the user can unsubscribe from newsletters -the
 user will be able to enter that view through the navbar

---
 src/App.js                       |   4 +-
 src/components/Navbar/Navbar.jsx |  17 ++++-
 src/components/PostCardUser.jsx  |   3 +-
 src/pages/HomePageUser.js        |   3 +-
 src/pages/SubscribePage.js       | 125 +++++++++++++++++++++++++++++++
 src/pages/index.js               |   1 +
 6 files changed, 147 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/SubscribePage.js

diff --git a/src/App.js b/src/App.js
index f6abc00..886134e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import { HomePage, PostForm, NotFoundPage } from "./pages/index";
+import { HomePage, PostForm, NotFoundPage, SubscriptionPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
@@ -25,7 +25,7 @@ function App() {
           <Route path="/" exact element={<HomePageWithCarousel />} />
           <Route path="/contact" exact element={<ContactForm />} />
           <Route path="/post/:id" exact element={<PostDetailsCard />} />
-
+          <Route path="/subscription" exact element={<SubscriptionPage />} />
           {/* Private routes */}
           <Route element={<RequiresAuth allowedRoles={["moderator"]} />}>
             <Route path="/admin" exact element={<HomePage />} />
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index feaf65a..4b1b51a 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -14,7 +14,7 @@ const Navbar = () => {
   const isAdminPage = location.pathname === "/admin";
   const userListPage = location.pathname === "/users";
   const isContactPage = location.pathname === "/contact";
-  
+  const isSubscribePage = location.pathname === "/subscription";
   const { setAuth } = useAuth();
 
   const handleLogout = () => {
@@ -70,7 +70,7 @@ const Navbar = () => {
               open ? "flex" : "hidden"
             } pb-4 md:pb-0 md:flex md:justify-end md:flex-row navbar-transition animate-flip-down duration-700`}
           >
-            { !hideHomeLink &&!isAdminPage && !isFormPage && !userListPage && (
+            {!hideHomeLink && !isAdminPage && !isFormPage && !userListPage && (
               <Link
                 to="/"
                 className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
@@ -78,6 +78,18 @@ const Navbar = () => {
                 Home
               </Link>
             )}
+            {!hideHomeLink &&
+              !isAdminPage &&
+              !isFormPage &&
+              !userListPage &&
+              !isSubscribePage && (
+                <Link
+                  to="/subscription"
+                  className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
+                >
+                  Subscribe
+                </Link>
+              )}
 
             {!isHomePage && isAdminPage && (
               <Link
@@ -90,6 +102,7 @@ const Navbar = () => {
 
             {(!isHomePage || (userListPage && !isContactPage)) &&
               !isAdminPage &&
+              !isSubscribePage &&
               location.pathname !== "/contact" && (
                 <Link
                   to="/admin"
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index 54d1c3f..73e7067 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -51,7 +51,7 @@ export function PostCardUser({ post }) {
 
         <Link
           to={`/post/${post._id}`}
-          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+          className="text-white bg-blue-800 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
           state={{ post}}
           
         >
@@ -63,5 +63,6 @@ export function PostCardUser({ post }) {
         </h4>
       </div>
     </article>
+    
   );
 }
diff --git a/src/pages/HomePageUser.js b/src/pages/HomePageUser.js
index 1687189..3b3b0b5 100644
--- a/src/pages/HomePageUser.js
+++ b/src/pages/HomePageUser.js
@@ -24,12 +24,13 @@ export function HomePageUser() {
    
 
     return (
-        <main className="flex flex-row flex-wrap">
+        <main className="flex flex-row flex-wrap justify-center items-center">
           {posts.map((post) => (
             <article key={post._id} className="m-4">
               <PostCardUser post={post} />
             </article>
           ))}
         </main>
+        
       );
     }
diff --git a/src/pages/SubscribePage.js b/src/pages/SubscribePage.js
new file mode 100644
index 0000000..e448856
--- /dev/null
+++ b/src/pages/SubscribePage.js
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
+
+export const SubscriptionPage = () => {
+  const [email, setEmail] = useState("");
+
+  const handleSubscribe = async (e) => {
+    e.preventDefault();
+
+    if (!email.trim()) {
+      toast.error("Please enter your email address.");
+      return;
+    }
+
+    try {
+      const response = await axios.post(
+        "http://localhost:4000/api/users/activate-subscription",
+        {
+          email: email,
+        }
+      );
+
+      if (response.status === 200) {
+        toast.success("Subscription successful!");
+        setEmail("");
+      } else {
+        toast.error("Failed to subscribe");
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        toast.error("Email not registered with us.");
+      } else {
+        toast.error("An error occurred:", error);
+      }
+    }
+  };
+
+  const handleUnsubscribe = async (e) => {
+    e.preventDefault();
+
+    if (!email.trim()) {
+      toast.error("Please enter your email address.");
+      return;
+    }
+
+    try {
+      const response = await axios.post(
+        "http://localhost:4000/api/users/unsubscribe",
+        {
+          email: email,
+        }
+      );
+
+      if (response.status === 200) {
+        toast.success("Unsubscribe successful!");
+        setEmail("");
+      } else {
+        toast.error("Failed to unsubscribe");
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        toast.error("Email not registered with us.");
+      } else {
+        toast.error("An error occurred:", error);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center h-screen bg-black dark:bg-gray-900">
+      <div className="w-full md:max-w-[510px] mx-auto px-4">
+        <div className="flex justify-end">
+          <Link to="/">
+            <img
+              width="32"
+              height="32"
+              src="https://img.icons8.com/ios/50/ffffff/delete-sign--v1.png"
+              alt="delete-sign--v1"
+              className="cursor-pointer"
+            />
+          </Link>
+        </div>
+        <div className="text-white text-center mt-4">
+          <div className="font-semibold text-2xl pb-4">
+            Do you want to receive notifications when there is a new post?
+          </div>
+          <p className="text-sm md:text-base">
+            Enter your email address to which you wish to receive notifications
+            from us. If you are already subscribed and want to unsubscribe,
+            enter your email and click on the unsubscribe button.
+          </p>
+        </div>
+        <div className="flex flex-col mt-8">
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="bg-transparent border-2 rounded-full py-4 px-6 text-[16px] leading-[22.4px] font-light placeholder:text-white text-white"
+            placeholder="E-mail Address"
+          />
+          <div className="flex flex-col mt-4 md:mt-6 md:flex-row md:space-x-4">
+            <button
+              onClick={handleUnsubscribe}
+              className="flex-1 h-auto rounded-full bg-white text-black py-3 px-6 hover:bg-red-500"
+            >
+              <span className="text-teal-900 font-semibold">Unsubscribe</span>
+            </button>
+            <button
+              type="submit"
+              onClick={handleSubscribe}
+              className="flex-1 h-auto rounded-full bg-white text-black py-3 px-6 mt-4 md:mt-0 hover:bg-green-400"
+            >
+              <span className="text-teal-900 font-semibold">Subscribe</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/index.js b/src/pages/index.js
index efc7606..ed83361 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,3 +1,4 @@
 export {HomePage }from "./HomePage";
 export {PostForm} from "./PostForm";
 export {NotFoundPage} from "./NotFoundPage";
+export {SubscriptionPage} from './SubscribePage';
\ No newline at end of file

From af12a1dd1dcf0c8d5d38638eff73bacd718fa733 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Sat, 6 Jan 2024 12:20:14 -0400
Subject: [PATCH 05/13] Feat: implementation sharing to social networks
 Details: -removal of icon without function in posts -new menu in single post
 view -sharing functionality on whatsapp -facebook sharing functionality
 -Linkedin sharing functionality -By clicking on the link on each social
 network you will be redirected to techtalk

---
 src/components/PostCardUser.jsx    | 15 +--------
 src/components/PostDetailsCard.jsx | 50 +++++++++++++-----------------
 src/components/SocialShare.jsx     | 43 +++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 43 deletions(-)
 create mode 100644 src/components/SocialShare.jsx

diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index 73e7067..f2f28ec 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -22,20 +22,7 @@ export function PostCardUser({ post }) {
           </div>
         </div>
         <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-7 w-7 cursor-not-allowed"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-            />
-          </svg>
+         
         </div>
       </header>
 
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index d765935..557f613 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -1,4 +1,4 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
@@ -7,13 +7,13 @@ import axios from "axios";
 import { useLocation } from "react-router-dom";
 import { Comments } from "./Comments";
 import toast from "react-hot-toast";
+import { SocialShare } from "./SocialShare";
 
 export function PostDetailsCard() {
   const { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
   const [commentText, setCommentText] = useState("");
 
-
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
 
@@ -32,18 +32,15 @@ export function PostDetailsCard() {
       );
 
       if (response.status === 201) {
-        toast.success('successful comment')
+        toast.success("successful comment");
         setCommentText("");
-        
       } else {
-        
       }
     } catch (error) {
-      toast.error("This didn't work.")
+      toast.error("This didn't work.");
     }
   };
 
-  
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
@@ -60,36 +57,29 @@ export function PostDetailsCard() {
           </div>
         </div>
         <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-7 w-7 cursor-not-allowed"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-            />
-          </svg>
+          <SocialShare />
         </div>
       </header>
 
       {state.post.image && insertMedia(state.post.image.url)}
 
       <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{state.post.title}</h2>
+        <h2 className="text-xl text-gray-800 font-semibold">
+          {state.post.title}
+        </h2>
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
           {state.post.description}
         </ReactMarkdown>
-        <h4 className="text-gray-400 capitalize my-2">Source: {state.post.source}</h4>
+        <h4 className="text-gray-400 capitalize my-2">
+          Source: {state.post.source}
+        </h4>
 
-        
         <form onSubmit={handleCommentSubmit}>
-          <label htmlFor="commentText" className="block text-gray-800 font-medium mb-1">
-          write your comment:
+          <label
+            htmlFor="commentText"
+            className="block text-gray-800 font-medium mb-1"
+          >
+            write your comment:
           </label>
           <textarea
             id="commentText"
@@ -100,12 +90,14 @@ export function PostDetailsCard() {
             className="w-full border p-2 mb-2"
             required
           />
-          <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded">
-          Send comment
+          <button
+            type="submit"
+            className="bg-blue-500 text-white py-2 px-4 rounded"
+          >
+            Send comment
           </button>
         </form>
 
-       
         <Comments comments={state.post.comments} />
       </div>
     </article>
diff --git a/src/components/SocialShare.jsx b/src/components/SocialShare.jsx
new file mode 100644
index 0000000..0401665
--- /dev/null
+++ b/src/components/SocialShare.jsx
@@ -0,0 +1,43 @@
+import { Dropdown } from "flowbite-react";
+import { FaFacebook, FaWhatsapp, FaLinkedin } from "react-icons/fa";
+
+export function SocialShare() {
+  const currentUrl = window.location.href;
+
+  console.log("Current URL:", currentUrl);
+
+  return (
+    <Dropdown label="Share">
+      <Dropdown.Header>
+        <span className="block text-sm">TechTalk</span>
+        <span className="block truncate text-sm font-medium">
+          help@techtalk12.com
+        </span>
+      </Dropdown.Header>
+      <Dropdown.Item
+        icon={FaFacebook}
+        href={`https://www.facebook.com/sharer/sharer.php?u=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Facebook
+      </Dropdown.Item>
+      <Dropdown.Item
+        icon={FaWhatsapp}
+        href={`https://api.whatsapp.com/send?text=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        WhatsApp
+      </Dropdown.Item>
+      <Dropdown.Item
+        icon={FaLinkedin}
+        href={`http://www.linkedin.com/shareArticle?url=https://techtalk-frontend-eotw69lik-edwin6666.vercel.app`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Linkedin
+      </Dropdown.Item>
+    </Dropdown>
+  );
+}

From 68f4695372449b2a0a6bdf243e6f1c5c42f2da5f Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 8 Jan 2024 10:45:01 -0400
Subject: [PATCH 06/13] style: design change in comments

---
 src/components/Comments.jsx        | 20 +++++++++++++-------
 src/components/Navbar/Navbar.jsx   |  1 +
 src/components/PostDetailsCard.jsx | 25 +++++++++++++++++++++----
 src/components/SocialShare.jsx     |  4 ----
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 14f2378..96561d8 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -1,19 +1,25 @@
 import React from "react";
+import moment from "moment"; 
 
-export const Comment = ({ author, text }) => (
-  <div className="comentario">
-    <strong>{author}:</strong> {text}
+export const Comment = ({ author, text, createdAt }) => (
+  <div className="comentario mb-3"> 
+    <div className="comentario-info">
+      <strong className="text-base font-semibold text-gray-900">{author}</strong>
+      <small className="text-sm font-normal text-gray-500 ml-1">-{moment(createdAt).format("DD/MM/YYYY")}</small>
+    </div>
+    <div className="text-sm text-gray-600">{text}</div>
   </div>
 );
 
+
 export const Comments = ({ comments }) => (
   <div className="comentarios">
-    
     {comments.map((comment) => (
       <Comment
-        key={comment._id} 
-        author={comment.author} 
-        text={comment.text} 
+        key={comment._id}
+        author={comment.author}
+        text={comment.text}
+        createdAt={comment.createdAt}
       />
     ))}
   </div>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 4b1b51a..b0cfa1b 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -15,6 +15,7 @@ const Navbar = () => {
   const userListPage = location.pathname === "/users";
   const isContactPage = location.pathname === "/contact";
   const isSubscribePage = location.pathname === "/subscription";
+  
   const { setAuth } = useAuth();
 
   const handleLogout = () => {
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 557f613..2a8c60d 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -32,9 +32,10 @@ export function PostDetailsCard() {
       );
 
       if (response.status === 201) {
-        toast.success("successful comment");
+        toast.success("Successful comment");
         setCommentText("");
       } else {
+        toast.error("Error posting comment");
       }
     } catch (error) {
       toast.error("This didn't work.");
@@ -79,7 +80,7 @@ export function PostDetailsCard() {
             htmlFor="commentText"
             className="block text-gray-800 font-medium mb-1"
           >
-            write your comment:
+            Write your comment:
           </label>
           <textarea
             id="commentText"
@@ -87,17 +88,33 @@ export function PostDetailsCard() {
             value={commentText}
             onChange={(e) => setCommentText(e.target.value)}
             rows={4}
-            className="w-full border p-2 mb-2"
+            placeholder="Type your comment..."
+            className="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
+            focus:outline-none focus:ring-1 bg-gray-50 focus:ring-blue-600 focus:border-blue-600 text-sm"
             required
           />
           <button
             type="submit"
-            className="bg-blue-500 text-white py-2 px-4 rounded"
+            className="mt-2 inline-flex items-center justify-center text-gray-100 font-medium leading-none
+            bg-blue-600 rounded-md py-2 px-3 border border-transparent transform-gpu hover:-translate-y-0.5 
+            transition-all ease-in duration-300 hover:text-gray-200 hover:bg-blue-700 text-sm "
           >
             Send comment
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4 ml-2 rotate-90 "
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+            </svg>
           </button>
         </form>
 
+        <div className=" text-base font-bold text-gray-700  mt-3 my-2">
+          {state.post.comments.length} Comment(s)
+        </div>
+
         <Comments comments={state.post.comments} />
       </div>
     </article>
diff --git a/src/components/SocialShare.jsx b/src/components/SocialShare.jsx
index 0401665..fee3e23 100644
--- a/src/components/SocialShare.jsx
+++ b/src/components/SocialShare.jsx
@@ -2,10 +2,6 @@ import { Dropdown } from "flowbite-react";
 import { FaFacebook, FaWhatsapp, FaLinkedin } from "react-icons/fa";
 
 export function SocialShare() {
-  const currentUrl = window.location.href;
-
-  console.log("Current URL:", currentUrl);
-
   return (
     <Dropdown label="Share">
       <Dropdown.Header>

From 5e39a312df43667c616f98277cfa477bb4a55b7c Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 8 Jan 2024 11:59:19 -0400
Subject: [PATCH 07/13] feat: comment working immediately

---
 src/components/PostDetailsCard.jsx | 39 +++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 2a8c60d..c6602bc 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
@@ -8,12 +8,14 @@ import { useLocation } from "react-router-dom";
 import { Comments } from "./Comments";
 import toast from "react-hot-toast";
 import { SocialShare } from "./SocialShare";
-
+import { usePosts } from "../context/postContext";
 export function PostDetailsCard() {
   const { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
   const [commentText, setCommentText] = useState("");
-
+  const [isCommentSubmitted, setIsCommentSubmitted] = useState(false);
+  const { getPost } = usePosts();
+  const [postData, setPostData] = useState(state.post);
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
 
@@ -34,6 +36,7 @@ export function PostDetailsCard() {
       if (response.status === 201) {
         toast.success("Successful comment");
         setCommentText("");
+        setIsCommentSubmitted(true);
       } else {
         toast.error("Error posting comment");
       }
@@ -41,6 +44,20 @@ export function PostDetailsCard() {
       toast.error("This didn't work.");
     }
   };
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (isCommentSubmitted) {
+          const data = await getPost(state.post._id);
+          setPostData(data);
+          
+        }
+      } catch (error) {
+        toast.error("Error fetching data:", error);
+      }
+    };
+    fetchData();
+  }, [state, isCommentSubmitted, getPost]);
 
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
@@ -49,12 +66,12 @@ export function PostDetailsCard() {
           <img className="w-12 rounded-full" src={logoImg} alt="logo" />
           <div className="ml-3">
             <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-              {state.post.author}
+              {postData.author}
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
               {normalDate}
             </p>
-            <p className="text-blue-400 capitalize ">{state.post.categories}</p>
+            <p className="text-blue-400 capitalize ">{postData.categories}</p>
           </div>
         </div>
         <div>
@@ -62,17 +79,17 @@ export function PostDetailsCard() {
         </div>
       </header>
 
-      {state.post.image && insertMedia(state.post.image.url)}
+      {postData.image && insertMedia(postData.image.url)}
 
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">
-          {state.post.title}
+          {postData.title}
         </h2>
         <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {state.post.description}
+          {postData.description}
         </ReactMarkdown>
         <h4 className="text-gray-400 capitalize my-2">
-          Source: {state.post.source}
+          Source: {postData.source}
         </h4>
 
         <form onSubmit={handleCommentSubmit}>
@@ -112,10 +129,10 @@ export function PostDetailsCard() {
         </form>
 
         <div className=" text-base font-bold text-gray-700  mt-3 my-2">
-          {state.post.comments.length} Comment(s)
+          {postData.comments.length} Comment(s)
         </div>
 
-        <Comments comments={state.post.comments} />
+        <Comments comments={postData.comments} />
       </div>
     </article>
   );

From cee0a018a487cee2ab3ed9db39b1c39ccb92fffb Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 8 Jan 2024 16:10:15 -0400
Subject: [PATCH 08/13] feat: add useRouteVariables hook Details: Created a new
 hook, useRouteVariables, to encapsulate the logic for extracting
 route-related variables. This hook is utilized in the Navbar component to
 manage route-specific behavior. This change improves organization and
 readability.

---
 src/components/Navbar/Location.jsx | 18 +++++++++++++++++
 src/components/Navbar/Navbar.jsx   | 31 +++++++++++++++++-------------
 2 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Navbar/Location.jsx

diff --git a/src/components/Navbar/Location.jsx b/src/components/Navbar/Location.jsx
new file mode 100644
index 0000000..44ab7f9
--- /dev/null
+++ b/src/components/Navbar/Location.jsx
@@ -0,0 +1,18 @@
+import { useLocation } from "react-router-dom";
+
+export const useRouteVariables = () => {
+  const location = useLocation();
+
+  return {
+    isLoginPage: location.pathname === "/login",
+    isHomePage: location.pathname === "/",
+    isSignupPage: location.pathname === "/signup",
+    isFormPage: location.pathname === "/new",
+    isAdminPage: location.pathname === "/admin",
+    userListPage: location.pathname === "/users",
+    isContactPage: location.pathname === "/contact",
+    isSubscribePage: location.pathname === "/subscription",
+    isDetailPage: location.pathname.startsWith("/post/"),
+    hideHomeLink: location.pathname.startsWith("/posts/"),
+  };
+};
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index b0cfa1b..3a2098d 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,21 +1,25 @@
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import useAuth from "../../hooks/useAuth";
 import Cookies from "js-cookie";
-
+import { useLocation } from "react-router-dom";
+import { useRouteVariables } from "./Location";
 const Navbar = () => {
   const location = useLocation();
-  const isLoginPage = location.pathname === "/login";
-  const isHomePage = location.pathname === "/";
-  const isSignupPage = location.pathname === "/signup";
-  const isFormPage = location.pathname === "/new";
-  const isAdminPage = location.pathname === "/admin";
-  const userListPage = location.pathname === "/users";
-  const isContactPage = location.pathname === "/contact";
-  const isSubscribePage = location.pathname === "/subscription";
-  
+  const {
+    isLoginPage,
+    isSignupPage,
+    hideHomeLink,
+    isAdminPage,
+    isDetailPage,
+    isFormPage,
+    userListPage,
+    isSubscribePage,
+    isHomePage,
+    isContactPage,
+  } = useRouteVariables();
   const { setAuth } = useAuth();
 
   const handleLogout = () => {
@@ -33,7 +37,7 @@ const Navbar = () => {
   if (isLoginPage || isSignupPage) {
     return null;
   }
-  const hideHomeLink = location.pathname.startsWith("/posts/");
+
   return (
     <header className="antialiased bg-white dark-mode:bg-gray-900">
       <nav className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
@@ -104,7 +108,8 @@ const Navbar = () => {
             {(!isHomePage || (userListPage && !isContactPage)) &&
               !isAdminPage &&
               !isSubscribePage &&
-              location.pathname !== "/contact" && (
+              location.pathname !== "/contact" &&
+              !isDetailPage && (
                 <Link
                   to="/admin"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"

From 23dd2c84396c4c676336cbc352c7af8d66259118 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 8 Jan 2024 16:21:03 -0400
Subject: [PATCH 09/13] feat(postcard): make entire post card clickable Wrap
 the entire post card in a Link component to enable clicking anywhere on the
 card to navigate to the post details. This improves usability by providing a
 more intuitive interaction for users.

---
 src/components/PostCard.jsx     | 111 +++++++++++++++-----------------
 src/components/PostCardUser.jsx |  71 +++++++++-----------
 2 files changed, 83 insertions(+), 99 deletions(-)

diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 447323c..58e21cb 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,10 +1,10 @@
 import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
 import ReactMarkdown from "react-markdown";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import moment from "moment";
 import logoImg from "../Images/postimg.jpg";
-import { Link } from "react-router-dom";
+
 export function insertMedia(filePath) {
   var extension = filePath.split(".").pop().toLowerCase();
 
@@ -83,67 +83,60 @@ export function PostCard({ post }) {
   };
 
   return (
-    <article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10  animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
-      <header className="flex items-center justify-between px-4">
-        <div className="flex justify-between items-center py-4">
-          <img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
-          <div className="ml-3">
-            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-              {post.author}
-            </h1>
-            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-              {normalDate}
-            </p>
-            <p className="text-blue-400 capitalize "> {post.categories}</p>
+    <Link to={`/post/${post._id}`} className="post-card-link" state={{ post }}>
+      <article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10  animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
+        <header className="flex items-center justify-between px-4">
+          <div className="flex justify-between items-center py-4">
+            <img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
+            <div className="ml-3">
+              <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+                {post.author}
+              </h1>
+              <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+                {normalDate}
+              </p>
+              <p className="text-blue-400 capitalize "> {post.categories}</p>
+            </div>
           </div>
-        </div>
-        <div>
-          <button
-            className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
-            onClick={() => navigate(`/edit/${post._id}`)}
-          >
-            <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-            <span className="relative text-black group-hover:text-white">
-              Edit
-            </span>
-          </button>
-          <button
-            className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
-            onClick={() => handleDelete(post._id)}
-          >
-            <div className="absolute inset-0 w-0 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-            <span className="relative text-black group-hover:text-white">
-              Delete
-            </span>
-          </button>
-        </div>
-      </header>
-
-      {post.image && insertMedia(post.image.url)}
+          <div>
+            <button
+              className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
+              onClick={() => navigate(`/edit/${post._id}`)}
+            >
+              <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+              <span className="relative text-black group-hover:text-white">
+                Edit
+              </span>
+            </button>
+            <button
+              className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
+              onClick={() => handleDelete(post._id)}
+            >
+              <div className="absolute inset-0 w-0 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+              <span className="relative text-black group-hover:text-white">
+                Delete
+              </span>
+            </button>
+          </div>
+        </header>
 
-      <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
+        {post.image && insertMedia(post.image.url)}
 
-        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description
-            ? `${post.description.substr(0, 330)}...`
-            : "sin descripción"}
-        </ReactMarkdown>
+        <div className="p-6">
+          <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
 
-        <Link
-          to={`/post/${post._id}`}
-          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
-          state={{ post}}
-          
-        >
-          Read more
-        </Link>
+          <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+            {post.description
+              ? `${post.description.substr(0, 330)}...Read More`
+              : "not description"}
+          </ReactMarkdown>
 
-        <h4 className="text-gray-400 capitalize my-2">
-          {" "}
-          Source: {post.source}
-        </h4>
-      </div>
-    </article>
+          <h4 className="text-gray-400 capitalize my-2">
+            {" "}
+            Source: {post.source}
+          </h4>
+        </div>
+      </article>
+    </Link>
   );
 }
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index f2f28ec..c2791cf 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -3,53 +3,44 @@ import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
 import { Link } from "react-router-dom";
+
 export function PostCardUser({ post }) {
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
 
   return (
-    <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
-      <header className="flex items-center justify-between px-4">
-        <div className="flex justify-between items-center py-4">
-          <img className="w-12 rounded-full" src={logoImg} alt="logo" />
-          <div className="ml-3">
-            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-              {post.author}
-            </h1>
-            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-              {normalDate}
-            </p>
-            <p className="text-blue-400 capitalize "> {post.categories}</p>
+    <Link to={`/post/${post._id}`} state={{ post }}>
+      <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
+        <header className="flex items-center justify-between px-4">
+          <div className="flex justify-between items-center py-4">
+            <img className="w-12 rounded-full" src={logoImg} alt="logo" />
+            <div className="ml-3">
+              <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+                {post.author}
+              </h1>
+              <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+                {normalDate}
+              </p>
+              <p className="text-blue-400 capitalize ">{post.categories}</p>
+            </div>
           </div>
-        </div>
-        <div>
-         
-        </div>
-      </header>
+        </header>
 
-      {post.image && insertMedia(post.image.url)}
+        {post.image && insertMedia(post.image.url)}
 
-      <div className="p-6">
-        <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
-        <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-          {post.description
-            ? `${post.description.substr(0, 330)}...`
-            : "sin descripción"}
-        </ReactMarkdown>
+        <div className="p-6">
+          <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
+          <ReactMarkdown className="text-lg font font-thin text-black text-justify">
+            {post.description
+              ? `${post.description.substr(0, 330)}...Read More`
+              : "not description"}
+          </ReactMarkdown>
 
-        <Link
-          to={`/post/${post._id}`}
-          className="text-white bg-blue-800 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
-          state={{ post}}
-          
-        >
-          Read more
-        </Link>
-        <h4 className="text-gray-400 capitalize my-2">
-          {" "}
-          Source: {post.source}
-        </h4>
-      </div>
-    </article>
-    
+          <h4 className="text-gray-400 capitalize my-2">
+            {" "}
+            Source: {post.source}
+          </h4>
+        </div>
+      </article>
+    </Link>
   );
 }

From 801906208819818a82d1d795dbe73441a2a112c3 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Wed, 10 Jan 2024 13:15:31 -0400
Subject: [PATCH 10/13] fix: bug that when clicking a button redirects where it
 was not

---
 src/components/Comments.jsx        | 27 ++++++++--
 src/components/PostCard.jsx        | 87 ++++++++++++++++--------------
 src/components/PostDetailsCard.jsx |  6 ++-
 3 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 96561d8..090c182 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -1,17 +1,34 @@
 import React from "react";
-import moment from "moment"; 
+import moment from "moment";
 
 export const Comment = ({ author, text, createdAt }) => (
-  <div className="comentario mb-3"> 
+  <div className="comentario mb-3">
     <div className="comentario-info">
-      <strong className="text-base font-semibold text-gray-900">{author}</strong>
-      <small className="text-sm font-normal text-gray-500 ml-1">-{moment(createdAt).format("DD/MM/YYYY")}</small>
+      <strong className="text-base font-semibold text-gray-900">
+        {author}
+      </strong>
+      <small className="text-sm font-normal text-gray-500 ml-1">
+        -{moment(createdAt).format("DD/MM/YYYY")}
+        <span className="isolate inline-flex rounded-md shadow-sm">
+          <button
+            type="button"
+            className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+          >
+            Delete
+          </button>
+        </span>
+      </small>
     </div>
     <div className="text-sm text-gray-600">{text}</div>
   </div>
 );
 
-
 export const Comments = ({ comments }) => (
   <div className="comentarios">
     {comments.map((comment) => (
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 58e21cb..f487d9b 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -14,14 +14,22 @@ export function insertMedia(filePath) {
     extension === "png" ||
     extension === "gif"
   ) {
-    return <img src={filePath} alt="Imagen" />;
+    return <img src={filePath} alt="Imagen" className="w-full" />;
   } else if (
     extension === "mp4" ||
     extension === "webm" ||
     extension === "ogv"
   ) {
     return (
-      <video src={filePath} alt="Video" controls autoPlay muted loop></video>
+      <video
+        src={filePath}
+        alt="Video"
+        controls
+        autoPlay
+        muted
+        loop
+        className="w-full"
+      ></video>
     );
   } else {
     return <p>Unsupported file type</p>;
@@ -83,45 +91,44 @@ export function PostCard({ post }) {
   };
 
   return (
-    <Link to={`/post/${post._id}`} className="post-card-link" state={{ post }}>
-      <article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10  animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
-        <header className="flex items-center justify-between px-4">
-          <div className="flex justify-between items-center py-4">
-            <img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
-            <div className="ml-3">
-              <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-                {post.author}
-              </h1>
-              <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-                {normalDate}
-              </p>
-              <p className="text-blue-400 capitalize "> {post.categories}</p>
-            </div>
+    <article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10  animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
+      <header className="flex items-center justify-between px-4">
+        <div className="flex justify-between items-center py-4">
+          <img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
+          <div className="ml-3">
+            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+              {post.author}
+            </h1>
+            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+              {normalDate}
+            </p>
+            <p className="text-blue-400 capitalize "> {post.categories}</p>
           </div>
-          <div>
-            <button
-              className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
-              onClick={() => navigate(`/edit/${post._id}`)}
-            >
-              <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-              <span className="relative text-black group-hover:text-white">
-                Edit
-              </span>
-            </button>
-            <button
-              className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
-              onClick={() => handleDelete(post._id)}
-            >
-              <div className="absolute inset-0 w-0 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-              <span className="relative text-black group-hover:text-white">
-                Delete
-              </span>
-            </button>
-          </div>
-        </header>
+        </div>
+        <div>
+          <button
+            className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
+            onClick={() => navigate(`/edit/${post._id}`)}
+          >
+            <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+            <span className="relative text-black group-hover:text-white">
+              Edit
+            </span>
+          </button>
+          <button
+            className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
+            onClick={() => handleDelete(post._id)}
+          >
+            <div className="absolute inset-0 w-0 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
+            <span className="relative text-black group-hover:text-white">
+              Delete
+            </span>
+          </button>
+        </div>
+      </header>
 
+      <Link to={`/post/${post._id}`} state={{ post }}>
         {post.image && insertMedia(post.image.url)}
-
         <div className="p-6">
           <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
 
@@ -136,7 +143,7 @@ export function PostCard({ post }) {
             Source: {post.source}
           </h4>
         </div>
-      </article>
-    </Link>
+      </Link>
+    </article>
   );
 }
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index c6602bc..16471d2 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -9,6 +9,7 @@ import { Comments } from "./Comments";
 import toast from "react-hot-toast";
 import { SocialShare } from "./SocialShare";
 import { usePosts } from "../context/postContext";
+
 export function PostDetailsCard() {
   const { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
@@ -16,6 +17,7 @@ export function PostDetailsCard() {
   const [isCommentSubmitted, setIsCommentSubmitted] = useState(false);
   const { getPost } = usePosts();
   const [postData, setPostData] = useState(state.post);
+
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
 
@@ -44,13 +46,13 @@ export function PostDetailsCard() {
       toast.error("This didn't work.");
     }
   };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isCommentSubmitted) {
           const data = await getPost(state.post._id);
           setPostData(data);
-          
         }
       } catch (error) {
         toast.error("Error fetching data:", error);
@@ -128,7 +130,7 @@ export function PostDetailsCard() {
           </button>
         </form>
 
-        <div className=" text-base font-bold text-gray-700  mt-3 my-2">
+        <div className="text-base font-bold text-gray-700 mt-3 my-2">
           {postData.comments.length} Comment(s)
         </div>
 

From 976b398526c0bdcfe3b18442cea46fe3d6f15c62 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Wed, 10 Jan 2024 16:57:04 -0400
Subject: [PATCH 11/13] feat: implement functionality to display edit/delete
 buttons for comments - Updated Comments.jsx in the frontend to render edit
 and delete buttons only if commentator's name matches the username in
 cookies. - In the PostDetailsCard component, adjusted handleDeleteComment to
 check if the comment can be deleted before making the server request. -
 Tweaked success and error toast messages for better reflection of actions
 performed. - Removed unused code block in handleDeleteComment in
 PostDetailsCard."

---
 src/components/Comments.jsx        | 91 +++++++++++++++++++-----------
 src/components/PostDetailsCard.jsx | 13 ++++-
 2 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 090c182..1ff21ab 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -1,43 +1,68 @@
 import React from "react";
 import moment from "moment";
+import axios from "axios";
+import toast from "react-hot-toast";
+import Cookies from "js-cookie";
 
-export const Comment = ({ author, text, createdAt }) => (
-  <div className="comentario mb-3">
-    <div className="comentario-info">
-      <strong className="text-base font-semibold text-gray-900">
-        {author}
-      </strong>
-      <small className="text-sm font-normal text-gray-500 ml-1">
-        -{moment(createdAt).format("DD/MM/YYYY")}
-        <span className="isolate inline-flex rounded-md shadow-sm">
-          <button
-            type="button"
-            className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-          >
-            Edit
-          </button>
-          <button
-            type="button"
-            className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-          >
-            Delete
-          </button>
-        </span>
-      </small>
+export const Comment = ({ comment, onDelete }) => {
+  const handleDeleteComment = async () => {
+    try {
+      await axios.delete(
+        `http://localhost:4000/api/posts/${comment._id}/comments/`,
+        {
+          withCredentials: true,
+        }
+      );
+
+      onDelete(comment._id);
+
+      toast.success("Comment successfully deleted.");
+    } catch (error) {
+      toast.error("Error deleting the comment", error);
+    }
+  };
+
+  const canEditAndDelete =
+    comment.commentator.trim() === Cookies.get("username").trim();
+
+  return (
+    <div className="comentario mb-3">
+      <div className="comentario-info">
+        <strong className="text-base font-semibold text-gray-900">
+          {comment.commentator}
+        </strong>
+        <small className="text-sm font-normal text-gray-500 ml-1">
+          -{moment(comment.createdAt).format("DD/MM/YYYY")}
+          <span className="isolate inline-flex rounded-md shadow-sm">
+            {canEditAndDelete && (
+              <>
+                <button
+                  type="button"
+                  className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                  onClick={handleDeleteComment}
+                >
+                  Delete
+                </button>
+              </>
+            )}
+          </span>
+        </small>
+      </div>
+      <div className="text-sm text-gray-600">{comment.text}</div>
     </div>
-    <div className="text-sm text-gray-600">{text}</div>
-  </div>
-);
+  );
+};
 
-export const Comments = ({ comments }) => (
+export const Comments = ({ comments, onDeleteComment }) => (
   <div className="comentarios">
     {comments.map((comment) => (
-      <Comment
-        key={comment._id}
-        author={comment.author}
-        text={comment.text}
-        createdAt={comment.createdAt}
-      />
+      <Comment key={comment._id} comment={comment} onDelete={onDeleteComment} />
     ))}
   </div>
 );
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 16471d2..63b8812 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -47,6 +47,14 @@ export function PostDetailsCard() {
     }
   };
 
+  const handleDeleteComment = async (commentId) => {
+    try {
+      setIsCommentSubmitted(true);
+    } catch (error) {
+      toast.error("Error deleting comment");
+    }
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -134,7 +142,10 @@ export function PostDetailsCard() {
           {postData.comments.length} Comment(s)
         </div>
 
-        <Comments comments={postData.comments} />
+        <Comments
+          comments={postData.comments}
+          onDeleteComment={handleDeleteComment}
+        />
       </div>
     </article>
   );

From f7ee683872d7558dcec13074629093e4d9308415 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Thu, 11 Jan 2024 15:35:59 -0400
Subject: [PATCH 12/13] Fix(comments): update automatically make or delete a
 comment details: -When deleting a comment it sent 2 alerts, one correct and
 one error (corrected) -When you post or delete a comment, after the first
 comment they were not updated and the deleted ones remained on the page

---
 src/components/Comments.jsx        |  3 ++-
 src/components/PostDetailsCard.jsx | 28 +++++++---------------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 1ff21ab..d4aee5f 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -23,7 +23,8 @@ export const Comment = ({ comment, onDelete }) => {
   };
 
   const canEditAndDelete =
-    comment.commentator.trim() === Cookies.get("username").trim();
+  comment?.commentator?.trim() === Cookies.get("username")?.trim();
+
 
   return (
     <div className="comentario mb-3">
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 63b8812..9270974 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, {  useState } from "react";
 import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
@@ -14,7 +14,6 @@ export function PostDetailsCard() {
   const { state } = useLocation();
   const normalDate = moment(state.post.createdAt).format("DD/MM/YYYY");
   const [commentText, setCommentText] = useState("");
-  const [isCommentSubmitted, setIsCommentSubmitted] = useState(false);
   const { getPost } = usePosts();
   const [postData, setPostData] = useState(state.post);
 
@@ -38,7 +37,8 @@ export function PostDetailsCard() {
       if (response.status === 201) {
         toast.success("Successful comment");
         setCommentText("");
-        setIsCommentSubmitted(true);
+        const updatedPost = await getPost(postId);
+        setPostData(updatedPost);
       } else {
         toast.error("Error posting comment");
       }
@@ -47,28 +47,14 @@ export function PostDetailsCard() {
     }
   };
 
-  const handleDeleteComment = async (commentId) => {
+  const handleDeleteComment = async () => {
     try {
-      setIsCommentSubmitted(true);
+      const updatedPost = await getPost(state.post._id);
+      setPostData(updatedPost);
     } catch (error) {
-      toast.error("Error deleting comment");
+      toast.error("Error deleting comment", error);
     }
   };
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        if (isCommentSubmitted) {
-          const data = await getPost(state.post._id);
-          setPostData(data);
-        }
-      } catch (error) {
-        toast.error("Error fetching data:", error);
-      }
-    };
-    fetchData();
-  }, [state, isCommentSubmitted, getPost]);
-
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">

From 86404ce674cbe04be175657d59d7d58cd980edb2 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Thu, 11 Jan 2024 16:54:35 -0400
Subject: [PATCH 13/13] Feat(comments):comment editing implementation Details:
 -When you click the "edit" button in your own comment, a text area will open
 with your text so you can edit it in real time (only if you are the author of
 the comment).

---
 src/components/Comments.jsx        | 97 ++++++++++++++++++++++++------
 src/components/PostDetailsCard.jsx | 26 ++++++--
 2 files changed, 100 insertions(+), 23 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index d4aee5f..b848635 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -3,8 +3,12 @@ import moment from "moment";
 import axios from "axios";
 import toast from "react-hot-toast";
 import Cookies from "js-cookie";
+import { useState } from "react";
+
+export const Comment = ({ comment, onDelete, onEdit }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedText, setEditedText] = useState(comment.text);
 
-export const Comment = ({ comment, onDelete }) => {
   const handleDeleteComment = async () => {
     try {
       await axios.delete(
@@ -22,9 +26,29 @@ export const Comment = ({ comment, onDelete }) => {
     }
   };
 
-  const canEditAndDelete =
-  comment?.commentator?.trim() === Cookies.get("username")?.trim();
+  const handleEditComment = async () => {
+    try {
+      const response = await axios.put(
+        `http://localhost:4000/api/posts/${comment._id}/comments/`,
+        { text: editedText },
+        {
+          withCredentials: true,
+        }
+      );
+
+      if (onEdit) {
+        onEdit(response.data);
+      }
 
+      toast.success("Comment successfully edited.");
+      setIsEditing(false);
+    } catch (error) {
+      toast.error("Error editing the comment", error);
+    }
+  };
+
+  const canEditAndDelete =
+    comment?.commentator?.trim() === Cookies.get("username")?.trim();
 
   return (
     <div className="comentario mb-3">
@@ -37,33 +61,68 @@ export const Comment = ({ comment, onDelete }) => {
           <span className="isolate inline-flex rounded-md shadow-sm">
             {canEditAndDelete && (
               <>
-                <button
-                  type="button"
-                  className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                >
-                  Edit
-                </button>
-                <button
-                  type="button"
-                  className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                  onClick={handleDeleteComment}
-                >
-                  Delete
-                </button>
+                {isEditing ? (
+                  <>
+                    <button
+                      type="button"
+                      className="relative inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={handleEditComment}
+                    >
+                      Save
+                    </button>
+                    <button
+                      type="button"
+                      className="relative -ml-px inline-flex items-center rounded-r-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={() => setIsEditing(false)}
+                    >
+                      Cancel
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={() => setIsEditing(true)}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      className="relative -ml-px inline-flex items-center bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      onClick={handleDeleteComment}
+                    >
+                      Delete
+                    </button>
+                  </>
+                )}
               </>
             )}
           </span>
         </small>
       </div>
-      <div className="text-sm text-gray-600">{comment.text}</div>
+      {isEditing ? (
+        <textarea
+          value={editedText}
+          onChange={(e) => setEditedText(e.target.value)}
+          className="text-sm text-gray-600 border p-1 mt-2"
+        />
+      ) : (
+        <div className="text-sm text-gray-600">{comment.text}</div>
+      )}
     </div>
   );
 };
 
-export const Comments = ({ comments, onDeleteComment }) => (
+export const Comments = ({ comments, onDeleteComment, onEditComment }) => (
   <div className="comentarios">
     {comments.map((comment) => (
-      <Comment key={comment._id} comment={comment} onDelete={onDeleteComment} />
+      <Comment
+        key={comment._id}
+        comment={comment}
+        onDelete={onDeleteComment}
+        onEdit={onEditComment}
+      />
     ))}
   </div>
 );
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 9270974..184494e 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -1,4 +1,4 @@
-import React, {  useState } from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
@@ -47,14 +47,31 @@ export function PostDetailsCard() {
     }
   };
 
-  const handleDeleteComment = async () => {
+  const handleDeleteComment = async (deletedCommentId) => {
     try {
-      const updatedPost = await getPost(state.post._id);
-      setPostData(updatedPost);
+      setPostData((prevPostData) => ({
+        ...prevPostData,
+        comments: prevPostData.comments.filter(
+          (comment) => comment._id !== deletedCommentId
+        ),
+      }));
     } catch (error) {
       toast.error("Error deleting comment", error);
     }
   };
+
+  const handleEditComment = async (editedComment) => {
+    try {
+      setPostData((prevPostData) => ({
+        ...prevPostData,
+        comments: prevPostData.comments.map((comment) =>
+          comment._id === editedComment._id ? editedComment : comment
+        ),
+      }));
+    } catch (error) {
+      toast.error("Error editing comment", error);
+    }
+  };
   return (
     <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
@@ -131,6 +148,7 @@ export function PostDetailsCard() {
         <Comments
           comments={postData.comments}
           onDeleteComment={handleDeleteComment}
+          onEditComment={handleEditComment}
         />
       </div>
     </article>