Skip to content

Commit d741010

Browse files
pablo-schpablo-sch
committed
Product Detail is made according to what has been learned in class
1 parent 7e56fd6 commit d741010

File tree

11 files changed

+242
-41
lines changed

11 files changed

+242
-41
lines changed

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,28 @@
11
import { createPostController } from "../create-post/createPostController.js";
2+
import {notificationsController} from "../../components/notifications/notificationsController.js"
23

34
document.addEventListener("DOMContentLoaded", () => {
4-
const token = localStorage.getItem('accessToken');
5+
const token = localStorage.getItem('accessToken');
56

6-
if (!token) {
7-
window.location = '/views/login.html'
8-
}
7+
if (!token) {
8+
window.location = '/views/login.html'
9+
}
910

10-
const createPostForm = document.querySelector('#createPostForm')
11-
createPostController(createPostForm)
11+
const createPostForm = document.querySelector('#createPostForm')
12+
const notifications = document.querySelector("#notifications");
13+
14+
const { showNotification } = notificationsController(notifications)
15+
16+
createPostForm.addEventListener("createPost-ok", (event) => {
17+
const message = event.detail.message;
18+
const type = event.detail.type;
19+
showNotification(message, type)
20+
})
21+
22+
createPostForm.addEventListener("createPost-error", (event) => {
23+
const message = event.detail;
24+
showNotification(message)
25+
})
26+
27+
createPostController(createPostForm)
1228
})

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@ export const createPostController = (createPostForm) => {
2626
})
2727

2828
const handlecreatePost = async (postData, createPostForm) => {
29-
3029
try {
31-
3230
await createPost(postData);
3331

3432
dispatchCreateProductSuccess(createPostForm, 'Post created successfully.');

‎src/js/modules/post-detail/post-detail.js‎

Whitespace-only changes.

‎src/js/modules/post-detail/postDetail.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { postDetailController } from "../post-detail/postDetailController.js";
2+
import { notificationsController } from "../../components/notifications/notificationsController.js";
3+
4+
5+
document.addEventListener("DOMContentLoaded", () => {
6+
7+
const searchParams = new URLSearchParams(window.location.search);
8+
const postId = searchParams.get("id");
9+
10+
const notifications = document.querySelector("#notifications")
11+
12+
const { showNotification } = notificationsController(notifications)
13+
14+
if (postId) {
15+
16+
const postContainer = document.querySelector(".post-container")
17+
18+
document.addEventListener("post-error", (event) => {
19+
showNotification(event.detail)
20+
})
21+
22+
document.addEventListener("post-success", (event) => {
23+
showNotification(event.detail.message, event.detail.type)
24+
})
25+
26+
postDetailController(postContainer, postId)
27+
} else {
28+
window.location = '/'
29+
}
30+
})

‎src/js/modules/post-detail/postDetailController.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { postDetailModel, getLoggedInUserInfo, removepost } from "./postDetailModel.js"
2+
import { buildpostDetailView, buildRemovepostButton } from "./postDetailView.js"
3+
4+
export const postDetailController = async (postContainer, postId) => {
5+
6+
const showRemovepostButton = (postId) => {
7+
const removeButton = buildRemovepostButton()
8+
postContainer.appendChild(removeButton)
9+
10+
removeButton.addEventListener("click", async () => {
11+
if (confirm("Are you sure about deleting the post?")) {
12+
try {
13+
await removepost(postId)
14+
15+
dispatchEventWithMessage('post-success', {
16+
message: "Post successfully deleted.",
17+
type: 'success'
18+
})
19+
20+
setTimeout(() => window.location = '/', 2000)
21+
22+
} catch (error) {
23+
dispatchEventWithMessage('post-error', error.message)
24+
}
25+
}
26+
})
27+
}
28+
29+
try {
30+
const postDetail = await postDetailModel(postId)
31+
32+
postContainer.innerHTML = buildpostDetailView(postDetail)
33+
34+
try {
35+
const user = await getLoggedInUserInfo()
36+
if (user?.id === postDetail?.userId) {
37+
showRemovepostButton(postId)
38+
}
39+
} catch (error) {
40+
dispatchEventWithMessage('post-error', error.message)
41+
}
42+
43+
} catch (error) {
44+
dispatchEventWithMessage('post-error', error.message)
45+
}
46+
47+
function dispatchEventWithMessage(eventType, message) {
48+
const event = new CustomEvent(eventType, {
49+
detail: message
50+
})
51+
setTimeout(() => window.location = '/', 2000)
52+
document.dispatchEvent(event)
53+
}
54+
55+
}

‎src/js/modules/post-detail/postDetailModel.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
//-----------------------------------------------------------------------------------------------
2+
export async function postDetailModel(postId) {
3+
try {
4+
const response = await fetch(`http://localhost:8000/api/posts/${postId}?_expand=user`);
5+
6+
if (!response.ok) {
7+
const errorMessage = posts.message;
8+
console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
9+
throw new Error(errorMessage);
10+
}
11+
12+
const postDetail = await response.json();
13+
14+
return postDetail;
15+
16+
} catch (error) {
17+
throw error;
18+
}
19+
}
20+
//-----------------------------------------------------------------------------------------------
21+
export async function removepost(postId) {
22+
try {
23+
const token = localStorage.getItem('accessToken');
24+
25+
const response = await fetch(`http://localhost:8000/api/posts/${postId}`, {
26+
method: "DELETE",
27+
headers: {
28+
"Content-type": "application/json",
29+
"Authorization": `Bearer ${token}`
30+
}
31+
});
32+
33+
if (!response.ok) {
34+
const errorMessage = posts.message;
35+
console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
36+
throw new Error(errorMessage);
37+
}
38+
} catch (error) {
39+
throw error;
40+
}
41+
}
42+
//-----------------------------------------------------------------------------------------------
43+
export async function getLoggedInUserInfo() {
44+
try {
45+
const token = localStorage.getItem('accessToken');
46+
47+
const response = await fetch(`http://localhost:8000/auth/me`, {
48+
headers: {
49+
"Content-type": "application/json",
50+
"Authorization": `Bearer ${token}`
51+
}
52+
});
53+
54+
if (!response.ok) {
55+
const errorMessage = posts.message;
56+
console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
57+
throw new Error(errorMessage);
58+
}
59+
60+
const user = await response.json();
61+
62+
return user;
63+
} catch (error) {
64+
throw error;
65+
}
66+
}
67+
//-----------------------------------------------------------------------------------------------

‎src/js/modules/post-detail/postDetailView.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const buildpostDetailView = (post) => {
2+
let postView = `
3+
<p>${post.user.name}</p>
4+
<p>${post.name}</p>
5+
<p>${post.photo}</p>
6+
<p>${post.description}</p>
7+
<p>${post.price}</p>
8+
<p>${post.isPurchase}</p>
9+
`;
10+
11+
return postView
12+
}
13+
14+
export const buildRemovepostButton = () => {
15+
const removeButton = document.createElement("button");
16+
removeButton.textContent = 'Borrar post';
17+
18+
return removeButton;
19+
}

‎src/js/modules/show-posts/showPostsController.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ function drawPosts(posts, container) {
4444

4545
posts.forEach((post) => { // If "posts" is an empty array, the "forEach" will not be executed.
4646

47-
const postHtml = document.createElement("div");
47+
const postHtml = document.createElement("a");
48+
postHtml.setAttribute("href", `./views/post-detail.html?id=${post.id}`)
4849
// Creates an empty HTML element in memory (postHtml), which is not yet in the DOM.
4950

5051
postHtml.innerHTML = buildPost(post)

‎views/create-post.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
<body>
1212
<h1>Create Post</h1>
13+
<div id="notifications"></div>
1314

1415
<form id="createPostForm">
1516
<label for="post-image">Photo: </label>

‎views/login.html‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Login</title>
7-
<link rel="stylesheet" href="../src/styles/notifications.css">
8-
9-
</head>
10-
<body>
11-
<h1>Login</h1>
12-
13-
<div id="notifications"></div>
14-
<form id="loginForm">
15-
<label for="mail">mail</label>
16-
<input type="mail" id="mail" name="mail" required />
17-
18-
<br />
19-
20-
<label for="password">password</label>
21-
<input
22-
type="password"
23-
id="password"
24-
name="password"
25-
required
26-
minlength="6"
27-
/>
28-
29-
<button type="submit">Login</button>
30-
</form>
31-
32-
<script type="module" src="../src/js/modules/login/login.js"></script>
33-
</body>
34-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Login</title>
8+
<link rel="stylesheet" href="../src/styles/notifications.css">
9+
10+
</head>
11+
12+
<body>
13+
<h1>Login</h1>
14+
<div id="notifications"></div>
15+
16+
<form id="loginForm">
17+
<label for="mail">mail</label>
18+
<input type="mail" id="mail" name="mail" required />
19+
20+
<br />
21+
22+
<label for="password">password</label>
23+
<input type="password" id="password" name="password" required minlength="6" />
24+
25+
<button type="submit">Login</button>
26+
</form>
27+
28+
<script type="module" src="../src/js/modules/login/login.js"></script>
29+
</body>
30+
31+
</html>

0 commit comments

Comments
 (0)