feat(image-edit): allow changing images after publication

src/App.js

@@ -25,7 +25,7 @@ function App() {
           <Route path="/contact" exact element={<ContactForm />} />
 
           {/* Private routes */}
-          <Route element={<RequiresAuth allowedRoles={["admin"]} />}>
+          <Route element={<RequiresAuth allowedRoles={["moderator"]} />}>
             <Route path="/admin" exact element={<HomePage />} />
             <Route path="/posts/:id" element={<PostForm />} />
             <Route path="/new" exact element={<PostForm />} />

src/api/posts.js

@@ -41,9 +41,18 @@ export const deletePostRequest = async (id) =>
 export const getPostRequest = async (id) =>
   await axios.get(PostId + id);
 
-export const updatePostRequest = async (id, newFields) =>
-  await axios.put(`${UpdatePost}/${id}`, newFields, {
-    headers: {
-      Authorization: `Bearer ${getTokenFromCookie()}`, 
-    },
-  });
+  export const updatePostRequest = async (id, formData) => {
+    try {
+      const response = await axios.put(`${UpdatePost}/${id}`, formData, {
+        headers: {
+          Authorization: `Bearer ${getTokenFromCookie()}`,
+          'Content-Type': 'multipart/form-data', 
+        },
+      });
+
+      return response.data;
+    } catch (error) {
+
+      throw error;
+    }
+  };

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 { setAuth } = useAuth();
 
   const handleLogout = () => {
@@ -32,7 +32,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">
@@ -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`}
           >
-            {!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"

src/context/postContext.js

@@ -27,39 +27,45 @@ export const PostProvider = ({ children }) => {
     } catch (error) {
       toast.error(error);
     }
-  }
+  };
 
   const createPost = async (post) => {
     try {
       const res = await createPostRequest(post, auth.token);
       setPosts([...posts, res.data]);
-    } catch (error) {
-
-    }
+    } catch (error) {}
   };
 
   const deletePost = async (id) => {
     await deletePostRequest(id, auth.token);
     setPosts(posts.filter((post) => post._id !== id));
-    getAllPost()
+    getAllPost();
   };
 
   const getPost = async (id) => {
-
     try {
       const res = await getPostRequest(id);
       return res.data;
-    } catch (error) {
-
-    }
+    } catch (error) {}
   };
 
   const updatePost = async (id, post) => {
-    const res = await updatePostRequest(id, post, auth.token);
-    setPosts(posts.map((post) => (post.id === id ? res.data : post)));
+    try {
+      const formData = new FormData();
+      formData.append("title", post.title);
+      formData.append("description", post.description);
+      formData.append("categories", post.categories);
+      formData.append("source", post.source);
+      formData.append("author", post.author);
+      formData.append("image", post.image);
 
-    getAllPost()
+      const res = await updatePostRequest(id, formData, auth.token);
+      setPosts(posts.map((post) => (post.id === id ? res.data : post)));
 
+      getAllPost();
+    } catch (error) {
+      toast.error("Error updating post.");
+    }
   };
 
   return (

src/hooks/useAuthentication.js

@@ -22,7 +22,7 @@ const useAuthentication = () => {
       Cookies.set("token", token, { secure: true, sameSite: "strict" });
 
 
-      if (roles === "admin") {
+      if (roles === "moderator") {
         navigate("/");
       } else {
         navigate("/admin");

src/pages/PostForm.js

@@ -29,6 +29,7 @@ export function PostForm() {
           categories: post.categories,
           source: post.source,
           author: post.author,
+          image: post.image,
         });
       }
     })();
@@ -39,7 +40,6 @@ export function PostForm() {
       <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>
-
         </header>
 
         <Formik
@@ -164,7 +164,20 @@ export function PostForm() {
                 type="file"
                 name="image"
                 className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
-                onChange={(e) => setFieldValue("image", e.target.files[0])}
+                onChange={(e) => {
+                  const selectedImage = e.target.files[0];
+                  setFieldValue("image", selectedImage);
+
+                  const imageUrl = URL.createObjectURL(selectedImage);
+
+                  document.getElementById("image-preview").src = imageUrl;
+                }}
+              />
+              <img
+                id="image-preview"
+                src={post.image ? post.image.url : ""}
+                alt="original imagen"
+                style={{ maxWidth: "100%", maxHeight: "200px" }}
               />
 
               <button

src/pages/Users.js

@@ -11,7 +11,7 @@ function UserList() {
         setUsers(response.data);
       })
       .catch((error) => {
-        // Manejar errores aquí si es necesario
+
       });
   }, []);