From 4e73ad0f6b71691e44168fbf934aa17dc416cb12 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 19 Sep 2023 14:19:41 -0400
Subject: [PATCH 1/5] Fix: navigate to home by clicking on the logo

---
 src/components/Navbar/Navbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index b53a610..f9419b5 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -34,7 +34,7 @@ const Navbar = () => {
         <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 ">
           <div className="flex flex-row items-center justify-between p-4">
             <Link
-              to="/"
+              to="#"
               className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline "
             >
               TechTalk News

From 835786ef0c157631a0dc705e87ecf5b22407c159 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 19 Sep 2023 22:31:52 -0400
Subject: [PATCH 2/5] Refactor semantic html in login and navbar

---
 src/components/Login/Login.jsx   | 41 ++++++++++++--------------------
 src/components/Navbar/Navbar.jsx | 12 +++++-----
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
index eb47b3a..f570819 100644
--- a/src/components/Login/Login.jsx
+++ b/src/components/Login/Login.jsx
@@ -17,41 +17,35 @@ const Signin = () => {
   return (
     <div className="bg-black dark:bg-gray-900">
       <div className="flex justify-center h-screen">
-        <div
-          className="hidden bg-cover lg:block lg:w-2/3"
-          style={{ backgroundImage: `url('${backgroundImage}')` }}
-        >
+        <section className="hidden bg-cover lg:block lg:w-2/3" style={{ backgroundImage: `url('${backgroundImage}')` }}>
           <div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
-            <div>
-              <h2 className="text-4xl font-bold text-white">TechTalk News</h2>
+            <article>
+              <h1 className="text-4xl font-bold text-white">TechTalk News</h1>
               <p className="max-w-xl mt-3 text-gray-300">
                 Welcome to TechTalk, the go-to social network for technology and
                 news enthusiasts! Here, you can connect with a passionate
                 community that shares your interests and discover the latest
                 trends in the digital world.
               </p>
-            </div>
+            </article>
           </div>
-        </div>
+        </section>
 
-        <div className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
+        <aside className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
           <div className="flex-1">
-            <div className="text-center">
-              <h2 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
+            <header className="text-center">
+              <h1 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
                 TechTalk
-              </h2>
+              </h1>
               <p className="mt-3 text-gray-500 dark:text-gray-300">
                 Sign in to access your account
               </p>
-            </div>
+            </header>
 
             <div className="mt-8">
               <form onSubmit={handleSubmit}>
                 <div>
-                  <label
-                    htmlFor="email"
-                    className="block mb-2 text-sm text-gray-600 dark:text-gray-200"
-                  >
+                  <label htmlFor="email" className="block mb-2 text-sm text-gray-600 dark:text-gray-200">
                     Email Address
                   </label>
                   <input
@@ -68,16 +62,10 @@ const Signin = () => {
 
                 <div className="mt-6">
                   <div className="flex justify-between mb-2">
-                    <label
-                      htmlFor="password"
-                      className="text-sm text-gray-600 dark:text-gray-200"
-                    >
+                    <label htmlFor="password" className="text-sm text-gray-600 dark:text-gray-200">
                       Password
                     </label>
-                    <a
-                      href="*"
-                      className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline"
-                    >
+                    <a href="*" className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">
                       Forgot password?
                     </a>
                   </div>
@@ -122,9 +110,10 @@ const Signin = () => {
               </p>
             </div>
           </div>
-        </div>
+        </aside>
       </div>
     </div>
   );
 };
+
 export default Signin;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index f9419b5..0df6552 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -29,8 +29,8 @@ const Navbar = () => {
   };
 
   return (
-    <div className="antialiased bg-white dark-mode:bg-gray-900">
-      <div className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
+    <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">
         <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 ">
           <div className="flex flex-row items-center justify-between p-4">
             <Link
@@ -65,7 +65,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`}
           >
-           {!isAdminPage && !isFormPage && !userListPage && (
+            {!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"
@@ -92,7 +92,7 @@ const Navbar = () => {
               </Link>
             )}
 
-            {!isHomePage && isAdminPage &&(
+            {!isHomePage && isAdminPage && (
               <Link
                 to="/users"
                 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"
@@ -122,8 +122,8 @@ const Navbar = () => {
             )}
           </nav>
         </div>
-      </div>
-    </div>
+      </nav>
+    </header>
   );
 };
 

From a9dd00f7f5bbcad398bddbcfcb558ed5935e6627 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 19 Sep 2023 23:25:57 -0400
Subject: [PATCH 3/5] feat(semantics): Change HTML tags for semantic tags
 Replaced most non-semantic HTML tags in the code by appropriate semantic tags
 to improve the structure and content accessibility.

---
 src/components/PostCard.jsx         |   8 +-
 src/components/PostCardUser.jsx     |  20 ++---
 src/components/signup/Signup.jsx    |  32 ++++----
 src/components/signup/SignupForm.js | 121 +++++++++++++---------------
 src/pages/Contact.js                |  12 +--
 src/pages/HomePage.js               |  23 +++---
 src/pages/NotFoundPage.js           |   4 +-
 src/pages/PostForm.js               |  12 +--
 8 files changed, 106 insertions(+), 126 deletions(-)

diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 58e39f6..3121254 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -83,8 +83,8 @@ export function PostCard({ post }) {
   };
 
   return (
-    <div 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">
-      <div className="flex items-center justify-between px-4">
+    <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">
@@ -116,7 +116,7 @@ export function PostCard({ post }) {
             </span>
           </button>
         </div>
-      </div>
+      </header>
 
       {post.image && insertMedia(post.image.url)}
 
@@ -126,6 +126,6 @@ export function PostCard({ post }) {
           {post.description}
         </p>
       </div>
-    </div>
+    </article>
   );
 }
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index 021a655..ba2a790 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -4,11 +4,10 @@ import logoImg from "../Images/postimg.jpg";
 
 export function PostCardUser({ post }) {
   const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
+  
   return (
-       
-    <div 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 ">
-      
-      <div className="flex items-center justify-between px-4">
+    <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">
@@ -16,7 +15,6 @@ export function PostCardUser({ post }) {
               TechTalk
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-             
               {normalDate}
             </p>
           </div>
@@ -33,18 +31,20 @@ export function PostCardUser({ post }) {
               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 "
+              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>
-      </div>
+      </header>
+
       {post.image && insertMedia(post.image.url)}
 
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
-        <p className="text-lg font font-thin  text-black text-justify">{post.description}</p>
+        <p className="text-lg font font-thin text-black text-justify">
+          {post.description}
+        </p>
       </div>
-    </div>
-    
+    </article>
   );
 }
diff --git a/src/components/signup/Signup.jsx b/src/components/signup/Signup.jsx
index e9e4e81..56b8074 100644
--- a/src/components/signup/Signup.jsx
+++ b/src/components/signup/Signup.jsx
@@ -5,16 +5,16 @@ const Signup = () => {
   const { data, error, handleChange, handleSubmit } = useSignupLogic();
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-black dark:bg-gray-900 ">
-      <div className="flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-3xl w-50 max-w-md animate-flip-down animate-once animate-duration-[4000ms] animate-ease-out">
-        <div className="font-medium self-center text-xl sm:text-3xl text-gray-800">
+    <section className="min-h-screen flex flex-col items-center justify-center bg-black dark:bg-gray-900 ">
+      <article className="flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-3xl w-50 max-w-md animate-flip-down animate-once animate-duration-[4000ms] animate-ease-out">
+        <header className="font-medium self-center text-xl sm:text-3xl text-gray-800">
           Join us Now
-        </div>
-        <div className="mt-4 self-center text-xl sm:text-sm text-gray-800">
+        </header>
+        <p className="mt-4 self-center text-xl sm:text-sm text-gray-800">
           Enter your credentials to get access account
-        </div>
+        </p>
 
-        <div className="mt-10">
+        <section className="mt-10">
           <form onSubmit={handleSubmit}>
             <div className="flex flex-col mb-5">
               <label
@@ -110,14 +110,10 @@ const Signup = () => {
               </button>
             </div>
           </form>
-        </div>
-      </div>
-      <div className="flex justify-center items-center mt-6">
-        <a
-          href="/login"
-          target="_blank"
-          className="inline-flex items-center text-white font-medium text-xs text-center"
-        >
+        </section>
+      </article>
+      <footer className="flex justify-center items-center mt-6">
+        <p className="inline-flex items-center text-white font-medium text-xs text-center">
           <span className="ml-2">
             You have an account?{" "}
             <a
@@ -127,9 +123,9 @@ const Signup = () => {
               Login here
             </a>
           </span>
-        </a>
-      </div>
-    </div>
+        </p>
+      </footer>
+    </section>
   );
 };
 
diff --git a/src/components/signup/SignupForm.js b/src/components/signup/SignupForm.js
index 238008b..be13c1e 100644
--- a/src/components/signup/SignupForm.js
+++ b/src/components/signup/SignupForm.js
@@ -38,80 +38,67 @@ const SignupForm = ({ onSuccess }) => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col mb-5">
-        <label
-          htmlFor="username"
-          className="mb-1 text-xs tracking-wide text-gray-600"
-        >
-          UserName:
-        </label>
-        <div className="relative">
-          <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
-            <i className="fas fa-user text-blue-500"></i>
-          </div>
-          <input
-            id="username"
-            type="text"
-            name="username"
-            className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
-            placeholder="Enter your Username"
-            onChange={handleChange}
-            value={data.username}
-            required
-          />
+      <label htmlFor="username" className="mb-1 text-xs tracking-wide text-gray-600">
+        UserName:
+      </label>
+      <div className="relative mb-5">
+        <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
+          <i className="fas fa-user text-blue-500"></i>
         </div>
+        <input
+          id="username"
+          type="text"
+          name="username"
+          className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
+          placeholder="Enter your Username"
+          onChange={handleChange}
+          value={data.username}
+          required
+        />
       </div>
-      <div className="flex flex-col mb-5">
-        <label
-          htmlFor="email"
-          className="mb-1 text-xs tracking-wide text-gray-600"
-        >
-          E-Mail Address:
-        </label>
-        <div className="relative">
-          <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
-            <i className="fas fa-at text-blue-500"></i>
-          </div>
-          <input
-            id="email"
-            type="email"
-            name="email"
-            className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
-            placeholder="Enter your email"
-            onChange={handleChange}
-            value={data.email}
-            required
-          />
+      
+      <label htmlFor="email" className="mb-1 text-xs tracking-wide text-gray-600">
+        E-Mail Address:
+      </label>
+      <div className="relative mb-5">
+        <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
+          <i className="fas fa-at text-blue-500"></i>
         </div>
+        <input
+          id="email"
+          type="email"
+          name="email"
+          className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
+          placeholder="Enter your email"
+          onChange={handleChange}
+          value={data.email}
+          required
+        />
       </div>
-      <div className="flex flex-col mb-6">
-        <label
-          htmlFor="password"
-          className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600"
-        >
-          Password:
-        </label>
-        <div className="relative">
-          <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
-            <span>
-              <i className="fas fa-lock text-blue-500"></i>
-            </span>
-          </div>
-          <input
-            id="password"
-            type="password"
-            name="password"
-            className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
-            placeholder="Enter your password"
-            onChange={handleChange}
-            value={data.password}
-            required
-          />
+      
+      <label htmlFor="password" className="mb-1 text-xs sm:text-sm tracking-wide text-gray-600">
+        Password:
+      </label>
+      <div className="relative mb-6">
+        <div className="inline-flex items-center justify-center absolute left-0 top-0 h-full w-10 text-gray-400">
+          <span>
+            <i className="fas fa-lock text-blue-500"></i>
+          </span>
         </div>
+        <input
+          id="password"
+          type="password"
+          name="password"
+          className="text-sm placeholder-gray-500 pl-10 pr-4 rounded-2xl border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
+          placeholder="Enter your password"
+          onChange={handleChange}
+          value={data.password}
+          required
+        />
       </div>
 
       <div className="flex w-full">
-            <span> {error} </span>
+        <span> {error} </span>
         <button
           type="submit"
           className="flex mt-2 items-center justify-center focus:outline-none text-white text-sm sm:text-base bg-blue-500 hover:bg-blue-600 rounded-2xl py-2 w-full transition duration-150 ease-in"
@@ -136,4 +123,4 @@ const SignupForm = ({ onSuccess }) => {
   );
 };
 
-export default SignupForm;
\ No newline at end of file
+export default SignupForm;
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 1175a33..0a47cb1 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -33,16 +33,13 @@ const ContactForm = () => {
         body: JSON.stringify(Object.fromEntries(formData)),
       })
         .then(async (response) => {
-          
           if (response.status === 200) {
-            toast.success('Submitted successfully!');
+            toast.success("Submitted successfully!");
           } else {
             toast.error("Something has gone wrong");
           }
         })
-        .catch((error) => {
-          
-        });
+        .catch((error) => {});
 
       setFormValues({
         name: "",
@@ -57,7 +54,7 @@ const ContactForm = () => {
     <div className="flex min-h-screen items-center justify-start bg-white">
       <div className="mx-auto w-full max-w-lg">
         <h1 className="text-4xl font-medium animate-bounce">Contact Us</h1>
-        <p className="mt-3 ">
+        <p className="mt-3">
           Email us at help@techtalk12.com or message us here:
         </p>
 
@@ -65,7 +62,6 @@ const ContactForm = () => {
           action="https://api.web3forms.com/submit"
           className="mt-10"
           onSubmit={handleSubmit}
-          
         >
           <input
             type="hidden"
@@ -118,7 +114,7 @@ const ContactForm = () => {
           </div>
           <button
             type="submit"
-            className="mt-5 rounded-md py-2 px-4 bg-transparent text-black font-semibold border border-black  hover:bg-black hover:text-white hover:border-transparent transition ease-in duration-200 transform hover:-translate-y-1 active:translate-y-0 "
+            className="mt-5 rounded-md py-2 px-4 bg-transparent text-black font-semibold border border-black hover:bg-black hover:text-white hover:border-transparent transition ease-in duration-200 transform hover:-translate-y-1 active:translate-y-0"
             required
           >
             Send Message
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 8feee22..501e51c 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,22 +1,21 @@
 import { useEffect } from "react";
 import { usePosts } from "../context/postContext";
-import { VscEmptyWindow } from 'react-icons/vsc'
+import { VscEmptyWindow } from "react-icons/vsc";
 import { PostCard } from "../components/PostCard";
 
 export function HomePage() {
-
   const { posts, getAllPost } = usePosts();
 
   useEffect(() => {
     getAllPost();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // 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 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>
     );
   }
@@ -24,10 +23,12 @@ export function HomePage() {
   const reversedPosts = [...posts].reverse();
 
   return (
-    <div className="flex flex-row  flex-wrap">
-      {reversedPosts.map(post => (
-        <PostCard post={post} key={post._id}/>
+    <main className="flex flex-row flex-wrap">
+      {reversedPosts.map((post) => (
+        <article key={post._id} className="m-4">
+          <PostCard post={post} />
+        </article>
       ))}
-    </div>
+    </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/NotFoundPage.js b/src/pages/NotFoundPage.js
index 4969238..46d1549 100644
--- a/src/pages/NotFoundPage.js
+++ b/src/pages/NotFoundPage.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 export function NotFoundPage() {
   return (
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index c3ace26..cf4862f 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -5,6 +5,7 @@ import * as Yup from "yup";
 import { useEffect, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
 import { getPostsRequest } from "../api/posts";
+
 export function PostForm() {
   const { createPost, getPost, updatePost } = usePosts();
   const navigate = useNavigate();
@@ -28,7 +29,7 @@ export function PostForm() {
   }, [params.id, getPost]);
 
   return (
-    <div className="flex items-center justify-center ">
+    <div className="flex items-center justify-center">
       <div className="bg-blue-950 p-10 shadow-md shadow-black mt-7 animate-fade-down animate-once animate-duration-500 animate-ease-linear">
         <header className="flex justify-between items-center py-4 text-white">
           <h3 className="text-xl">New Post</h3>
@@ -54,7 +55,6 @@ export function PostForm() {
             }
 
             try {
-             
               toast.success("Post saved successfully and posts list updated!");
             } catch (error) {
               toast.error("Error updating posts list.");
@@ -94,7 +94,7 @@ export function PostForm() {
                 component="textarea"
                 name="description"
                 placeholder="Description"
-                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full "
+                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
                 rows={5}
               />
               <ErrorMessage
@@ -103,15 +103,15 @@ export function PostForm() {
                 className="text-red-400 text-sm"
               />
               <label
-                htmlFor="title"
+                htmlFor="image"
                 className="text-sm block font-bold text-gray-400"
               >
-                Imagen
+                Image
               </label>
               <input
                 type="file"
                 name="image"
-                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white  w-full"
+                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
                 onChange={(e) => setFieldValue("image", e.target.files[0])}
               />
 

From 13cf881e774cc6ce1213eecbe754ad6c95a29c6b Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 19 Sep 2023 23:51:25 -0400
Subject: [PATCH 4/5] Fix warning in cosole

---
 src/components/signup/SignupForm.js |  3 ++-
 src/pages/Users.js                  | 10 ++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/signup/SignupForm.js b/src/components/signup/SignupForm.js
index be13c1e..6c8372d 100644
--- a/src/components/signup/SignupForm.js
+++ b/src/components/signup/SignupForm.js
@@ -3,7 +3,7 @@ import useForm from "../../hooks/useForm";
 import useAuth from "../../hooks/useAuth";
 import axios from "axios";
 import toast from 'react-hot-toast';
-
+import Cookies from 'js-cookie'
 const SignupForm = ({ onSuccess }) => {
   const initialState = {
     username: "",
@@ -22,6 +22,7 @@ const SignupForm = ({ onSuccess }) => {
       const roles = res?.roles;
       const token = res?.token;
       setAuth({ roles, token });
+      Cookies.set("token", token, { secure: true, sameSite: "strict" });
       resetForm();
       onSuccess();
     } catch (error) {
diff --git a/src/pages/Users.js b/src/pages/Users.js
index 1c2dc22..14c2475 100644
--- a/src/pages/Users.js
+++ b/src/pages/Users.js
@@ -4,7 +4,6 @@ import axios from "axios";
 function UserList() {
   const [users, setUsers] = useState([]);
 
-
   useEffect(() => {
     axios
       .get("http://localhost:4000/api/users")
@@ -12,16 +11,14 @@ function UserList() {
         setUsers(response.data);
       })
       .catch((error) => {
-        
+        // Manejar errores aquí si es necesario
       });
   }, []);
 
   return (
     <div className="p-4">
       <div className="bg-white p-4 rounded-md">
-        <h2 className="mb-4 text-xl font-bold text-gray-700">
-          Users List
-        </h2>
+        <h2 className="mb-4 text-xl font-bold text-gray-700">Users List</h2>
         <div className="overflow-x-auto">
           <table className="w-full border-collapse border border-gray-300">
             <thead>
@@ -38,10 +35,7 @@ function UserList() {
                 <tr key={user.id} className="text-sm font-normal">
                   <td className="py-2 px-4">{user.username}</td>
                   <td className="py-2 px-4">{user.email}</td>
-                  
-                  <td className="py-2 px-4">
                   <td className="py-2 px-4">{user.roles}</td>
-                  </td>
                   <td className="py-2 px-4">{user.createdAt}</td>
                   <td className="py-2 px-4">
                     <button className="bg-blue-500 text-white py-1 px-2 rounded-md">

From 9fcd1aa2e89f03e7630a47e9432c03074bbbcb66 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Wed, 27 Sep 2023 13:54:23 -0400
Subject: [PATCH 5/5] Fix  The admin cannot have the user view and vice versa.

---
 src/components/Navbar/Navbar.jsx | 34 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 0df6552..256182e 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
 import { Link, useLocation } from "react-router-dom";
 import useAuth from "../../hooks/useAuth";
-import Cookies from 'js-cookie';
+import Cookies from "js-cookie";
 
 const Navbar = () => {
   const location = useLocation();
@@ -11,14 +11,15 @@ const Navbar = () => {
   const isHomePage = location.pathname === "/";
   const isFormPage = location.pathname === "/new";
   const isAdminPage = location.pathname === "/admin";
-  const userListPage = location.pathname === "/users"
-  const isContactPage = location.pathname === "/contact"
+  const userListPage = location.pathname === "/users";
+  const isContactPage = location.pathname === "/contact";
+
   const { setAuth } = useAuth();
 
   const handleLogout = () => {
     setAuth({ roles: null, token: null });
-    Cookies.remove('token');
-    Cookies.remove('roles');
+    Cookies.remove("token");
+    Cookies.remove("roles");
     window.location = "/login";
   };
 
@@ -27,6 +28,9 @@ const Navbar = () => {
   const toggleMenu = () => {
     setOpen(!open);
   };
+  if (isLoginPage) {
+    return null;
+  }
 
   return (
     <header className="antialiased bg-white dark-mode:bg-gray-900">
@@ -83,14 +87,16 @@ const Navbar = () => {
               </Link>
             )}
 
-            {!isHomePage && isFormPage && !isContactPage && (
-              <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"
-              >
-                Admin Page
-              </Link>
-            )}
+            {(!isHomePage || (userListPage && !isContactPage)) &&
+              !isAdminPage &&
+              location.pathname !== "/contact" && (
+                <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"
+                >
+                  Admin Page
+                </Link>
+              )}
 
             {!isHomePage && isAdminPage && (
               <Link
@@ -115,7 +121,7 @@ const Navbar = () => {
                   className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline 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  "
                   onClick={handleLogout}
                 >
-                  {Cookies.get('token') ? "Logout" : "Login"}{" "}
+                  {Cookies.get("token") ? "Logout" : "Login"}{" "}
                   <FontAwesomeIcon icon={faSignOutAlt} />
                 </button>
               </div>