the createProduct is created according to what has been learned in classes

Author: pablo-sch

src/js/modules/create-post/createPost.js

@@ -0,0 +1,12 @@
+import { createPostController } from "../create-post/createPostController.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const token = localStorage.getItem('accessToken');
+
+  if (!token) {
+    window.location = '/views/login.html'
+  }
+
+  const createPostForm = document.querySelector('#createPostForm')
+  createPostController(createPostForm)
+})

src/js/modules/create-post/createPostController.js

@@ -0,0 +1,61 @@
+import { createPost } from "./createPostModel.js";
+
+export const createPostController = (createPostForm) => {
+    createPostForm.addEventListener('submit', async (event) => {
+
+        event.preventDefault();
+
+        const postImage = createPostForm.querySelector('#post-image').value;
+        const postName = createPostForm.querySelector('#post-name').value;
+        const postDescription = createPostForm.querySelector('#post-description').value;
+        const postPrice = createPostForm.querySelector('#post-price').value;
+        const transactionType = createPostForm.querySelector('input[name="transactionType"]:checked').value;
+
+        const isPurchase = transactionType === 'purchase';
+
+        const postData = {
+            image: postImage,
+            name: postName,
+            description: postDescription,
+            price: postPrice,
+            isPurchase: isPurchase
+        }
+
+        handlecreatePost(postData, createPostForm)
+
+    })
+
+    const handlecreatePost = async (postData, createPostForm) => {
+
+        try {
+
+            await createPost(postData);
+
+            dispatchCreateProductSuccess(createPostForm, 'Post created successfully.');
+
+            setTimeout(() => {
+                window.location = '/';
+            }, 2000)
+
+        } catch (error) {
+            dispatchCreateProductError(createPostForm, error.message);
+        }
+    }
+
+    function dispatchCreateProductSuccess(createPostForm, successMessage) {
+        const event = new CustomEvent("createPost-ok", {
+            detail: {
+                message: successMessage,
+                type: 'success'
+            }
+        });
+        createPostForm.dispatchEvent(event)
+    }
+
+    function dispatchCreateProductError(createPostForm, errorMessage) {
+        const event = new CustomEvent("createPost-error", {
+            detail: errorMessage
+        });
+        createPostForm.dispatchEvent(event)
+    }
+}

src/js/modules/create-post/createPostModel.js

@@ -0,0 +1,34 @@
+export const createPost = async (postData) => {
+  try {
+    const token = localStorage.getItem("accessToken");
+
+    const response = await fetch("http://localhost:8000/api/posts", {
+      method: "POST",
+      body: JSON.stringify({
+        photo: postData.image,
+        name: postData.name,
+        description: postData.description,
+        price: postData.price,
+        isPurchase: postData.isPurchase
+      }),
+      headers: {
+        "Content-type": "application/json",
+        "Authorization": `Bearer ${token}`
+      }
+    });
+
+    const data = await response.json();
+
+    // If response is not OK, throw an error with the response message
+    if (!response.ok) {
+      const errorMessage = data.message;
+      console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
+      throw new Error(errorMessage);
+    }
+
+  } catch (error) {
+    throw error;
+
+  }
+
+}

src/js/modules/show-posts/showPostsModel.js

@@ -5,15 +5,15 @@ export async function getPosts() {
   try {
     const response = await fetch('http://localhost:8000/api/posts')
 
-    const data = await response.json();
+    posts = await response.json();
 
     if (!response.ok) {
-      const errorMessage = data.message || 'Error desconocido';
+      const errorMessage = posts.message;
       console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
       throw new Error(errorMessage);
     }
 
-    if (data.length === 0) {
+    if (posts.length === 0) {
       const apiMessage = 'No posts to fetch in the API';
       console.error(`Response: ${response.status} (${response.statusText}) --> ${apiMessage}`);
       throw new Error(apiMessage);

src/js/modules/signup/signUpController.js

@@ -36,7 +36,7 @@ export const signUpController = (signupForm) => {
       errors.push('The email format is incorrect.')
     }
 
-    // check that the passwords are the sameH
+    // check that the passwords are the same
     if (password !== passwordConfirm) {
       errors.push('Passwords are not the same.')
     }
@@ -45,8 +45,8 @@ export const signUpController = (signupForm) => {
       handleCreateUser(name, email, password, signupForm)
     } else {
       errors.forEach(error => {
-        const event = new CustomEvent("sigup-error", {
-          detail: error // <-- "error" are actually theh
+        const event = new CustomEvent("signup-error", {
+          detail: error // <-- "error" is actually the descriptions
         });
         signupForm.dispatchEvent(event)
       })
@@ -58,7 +58,7 @@ export const signUpController = (signupForm) => {
 
       /* Insert User to API REST VVVVVVVVVVVVVVVVVVV */
       await createUser(name, email, password);
-      const event = new CustomEvent("sigup-ok", {
+      const event = new CustomEvent("signup-ok", {
         detail: {
           message: 'You have successfully registered.',
           type: 'success'
@@ -73,7 +73,7 @@ export const signUpController = (signupForm) => {
 
     } catch (error) {
 
-      const event = new CustomEvent("sigup-error", {
+      const event = new CustomEvent("signup-error", {
         detail: error.message
       });
 

src/js/modules/signup/signup.js

@@ -8,12 +8,12 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const { showNotification } = notificationsController(notifications)
 
-  sigupForm.addEventListener("sigup-error", (event) => {
+  sigupForm.addEventListener("signup-error", (event) => {
     const message = event.detail;
     showNotification(message)
   })
 
-  sigupForm.addEventListener("sigup-ok", (event) => {
+  sigupForm.addEventListener("signup-ok", (event) => {
     const message = event.detail.message;
     const type = event.detail.type;
     showNotification(message, type)

views/create-post.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Create Post</title>
+    <link rel="stylesheet" href="../src/styles/notifications.css">
 </head>
 
 <body>
@@ -39,7 +40,7 @@ <h1>Create Post</h1>
         <button>Create Post</button>
     </form>
 
-    <script type="module" src="../src/js/modules/create-post/create-post.js"></script>
+    <script type="module" src="../src/js/modules/create-post/createPost.js"></script>
 </body>
 
 </html>