Skip to content

Commit a9f4440

Browse files
pablo-schpablo-sch
committed
the css from the cards from home are improved and postDetailController too
1 parent d1f3359 commit a9f4440

File tree

11 files changed

+147
-161
lines changed

11 files changed

+147
-161
lines changed

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
<link rel="stylesheet" href="src/styles/components/loader.css">
2424
<link rel="stylesheet" href="src/styles/components/loader-container.css">
2525

26-
<link rel="stylesheet" href="src/styles/components/post-card-container.css">
2726
<link rel="stylesheet" href="src/styles/components/post.css">
2827

2928

‎src/js/components/notifications/notificationsController.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,17 @@ export function notificationsController(container) { // container is ".notificat
3434
n !== newNotification && n.classList.contains('error')
3535
);
3636

37-
oldErrors.forEach(n => {
38-
setTimeout(() => removeNotification(n), 1000);
39-
});
37+
console.log('Error:', message)
4038

41-
setTimeout(() => {
42-
removeNotification(newNotification);
43-
}, 5000);
39+
oldErrors.forEach(n => { setTimeout(() => removeNotification(n), 1000); });
40+
41+
setTimeout(() => { removeNotification(newNotification); }, 5000);
4442
} else {
45-
setTimeout(() => {
46-
removeNotification(newNotification);
47-
}, 5000);
43+
setTimeout(() => { removeNotification(newNotification); }, 5000);
4844
}
4945

50-
console.log('Error:',message)
5146
};
52-
47+
5348

5449
return {
5550
showNotification

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export const buildCreatePostForm = () => {
2121
placeholder="Introduce the name of your post." />
2222
2323
<label for="post-description">Description: </label>
24-
<textarea required name="post-description" id="post-description" maxlength="300"
25-
placeholder="Max. Length 300"></textarea>
24+
<textarea required name="post-description" id="post-description" maxlength="1000"
25+
placeholder="Max. Length 1000"></textarea>
2626
2727
<label for="post-price">Price: </label>
2828
<input required id="post-price" name="post-price" type="number" min="1" max="9999999" step="0.01"

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

Lines changed: 78 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,84 +4,94 @@ import { buildEditableView, buildReadOnlyView } from "./postDetailView.js";
44

55
export const postDetailController = async (postContainer, postId) => {
66

7+
let currentPost = null;
8+
let isOwner = false;
79

8-
let postDetail = null;
9-
let user = null;
10-
let isOwner = false
10+
await readOnlyPost()
1111

12-
try {
13-
//----------------------------------------------------
14-
loadStarted();
15-
//----------------------------------------------------
12+
async function loadPostData() {
13+
14+
let post
15+
let user = null;
1616

1717
try {
18+
//----------------------------------------------------
19+
loadStarted();
20+
//----------------------------------------------------
21+
1822
//===================================
19-
postDetail = await getPost(postId);
23+
post = await getPost(postId);
2024
//===================================
21-
} catch (error) {
22-
dispatchNotification('post-error', error.message);
23-
}
2425

25-
if(!localStorage.getItem('accessToken')){
26-
renderReadOnlyView(postDetail, isOwner);
27-
}else{
28-
try {
29-
//===================================
30-
user = await getLoggedInUserInfo();
31-
//===================================
32-
} catch (error) {
33-
dispatchNotification('post-error', error.message);
26+
if(!post){
27+
throw new Error('No post founded.')
3428
}
35-
36-
isOwner = user.id === postDetail.userId;
37-
38-
renderReadOnlyView(postDetail, isOwner);
29+
30+
if (!localStorage.getItem('accessToken')) {
31+
return {post, owner: false};
32+
}
33+
34+
//===================================
35+
user = await getLoggedInUserInfo();
36+
//===================================
37+
const owner = user.id === post.userId;
38+
39+
return { post, owner };
40+
41+
} catch (error) {
42+
dispatchNotification('post-error', error.message);
43+
} finally {
44+
//----------------------------------------------------
45+
loadFinished();
46+
//----------------------------------------------------
3947
}
40-
} catch (error) {
41-
dispatchNotification('post-error', error.message);
42-
} finally {
43-
//----------------------------------------------------
44-
loadFinished();
45-
//----------------------------------------------------
4648
}
4749

4850
//===================================================================================================================
49-
function renderReadOnlyView(post, isOwner) {
50-
postContainer.innerHTML = buildReadOnlyView(post, isOwner);
51+
async function readOnlyPost() {
52+
53+
const result = await loadPostData();
54+
55+
currentPost = result.post;
56+
isOwner = result.owner;
57+
58+
postContainer.innerHTML = ''
59+
postContainer.innerHTML = buildReadOnlyView(currentPost, isOwner);
5160

5261
if (isOwner) {
5362
const editPost = postContainer.querySelector("#edit-post")
54-
editPost.addEventListener("click", () => renderEditableView(post));
63+
editPost.addEventListener("click", () => editablePost(currentPost));
5564

5665
const deletePost = postContainer.querySelector("#delete-post")
57-
deletePost.addEventListener("click", () => handleDelete(post.id));
66+
deletePost.addEventListener("click", () => handleDelete(currentPost.id));
5867
}
5968
}
6069

6170
//------------------------------------------------------------------------
62-
function renderEditableView(post) {
63-
postContainer.innerHTML = buildEditableView(post);
71+
function editablePost(post) {
6472

65-
const editForm = document.getElementById("edit-post-form");
73+
postContainer.innerHTML = ''
74+
postContainer.innerHTML = buildEditableView(post);
6675

67-
editForm.addEventListener('submit', (event) => {
76+
const form = document.getElementById("edit-post-form");
77+
form.addEventListener('submit', (event) => {
6878
event.preventDefault();
6979

7080
handleSave(post);
7181
});
7282

73-
const cancel = postContainer.querySelector("#cancel-edit")
74-
cancel.addEventListener("click", (event) => {
83+
const cancelEdit = postContainer.querySelector("#cancel-edit")
84+
cancelEdit.addEventListener("click", (event) => {
7585
event.preventDefault();
7686

77-
postContainer.innerHTML = buildReadOnlyView(post, true);
78-
renderReadOnlyView(post, true)
87+
readOnlyPost()
7988
});
8089
}
8190

8291
//------------------------------------------------------------------------
8392
async function handleDelete(postId) {
84-
if (confirm("Are you sure about deleting the post?")) {
93+
if (!confirm("Are you sure about deleting the post?")) return;
94+
8595
try {
8696
//----------------------------------------------------
8797
loadStarted();
@@ -103,23 +113,14 @@ export const postDetailController = async (postContainer, postId) => {
103113
loadFinished();
104114
//----------------------------------------------------
105115
}
106-
}
107116
}
108117

109118
//------------------------------------------------------------------------
110119
async function handleSave(post) {
111120

112-
const editForm = document.getElementById("edit-post-form");
113-
114-
const image = editForm.querySelector('#post-image').files[0];
115-
116-
const name = editForm.querySelector('#post-name').value;
117-
const description = editForm.querySelector('#post-description').value;
118-
const price = editForm.querySelector('#post-price').value;
119-
120-
const tag = editForm.querySelector('#post-tag').value;
121+
const form = document.getElementById("edit-post-form");
121122

122-
const isPurchase = editForm.querySelector('input[name="transactionType"]:checked').value === 'purchase';
123+
const { image, name, description, price, tag, isPurchase } = getFormData(form);
123124

124125
try {
125126
//----------------------------------------------------
@@ -137,32 +138,30 @@ export const postDetailController = async (postContainer, postId) => {
137138
imageURL = '../../../../public/no-image-available.jpg';
138139
}
139140

140-
post.image = imageURL;
141-
post.name = name;
142-
post.description = description;
143-
post.price = price;
144-
post.tag = tag || null;
145-
post.isPurchase = isPurchase;
141+
const updatedPost = {
142+
...post,
143+
image: imageURL,
144+
name: name,
145+
description: description,
146+
price: price,
147+
tag: tag || null,
148+
isPurchase: isPurchase,
149+
};
146150

147151
//===================================
148-
await updatePost(post);
152+
await updatePost(updatedPost);
149153
//===================================
150154

151-
let getUpdatedPost;
152-
153-
const postId = post.id
154155
//===================================
155-
getUpdatedPost = await getPost(postId);
156+
currentPost = await getPost(post.id);
156157
//===================================
157158

158-
postDetail = getUpdatedPost;
159-
160159
dispatchNotification('post-success', {
161160
message: "Post successfully updated.",
162161
type: 'success',
163162
});
164163

165-
render_ReadOnlyView(postDetail, true);
164+
readOnlyPost()
166165

167166
} catch (error) {
168167
dispatchNotification('post-error', error.message);
@@ -173,6 +172,17 @@ export const postDetailController = async (postContainer, postId) => {
173172
}
174173
}
175174

175+
function getFormData(form) {
176+
return {
177+
image: form.querySelector('#post-image').files[0],
178+
name: form.querySelector('#post-name').value,
179+
description: form.querySelector('#post-description').value,
180+
price: form.querySelector('#post-price').value,
181+
tag: form.querySelector('#post-tag').value || null,
182+
isPurchase: form.querySelector('input[name="transactionType"]:checked').value === 'purchase',
183+
};
184+
}
185+
176186
//===================================================================================================================
177187
function dispatchNotification(eventType, message) {
178188
const event = new CustomEvent(eventType, { detail: message });

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export const buildEditableView = (post) => {
7373
placeholder="Introduce the name of your post." value="${post.name}" />
7474
7575
<label for="post-description">Description: </label>
76-
<textarea required name="post-description" id="post-description" maxlength="300"
77-
placeholder="Max. Length 300">${post.description}</textarea>
76+
<textarea required name="post-description" id="post-description" maxlength="1000"
77+
placeholder="Max. Length 1000">${post.description}</textarea>
7878
7979
<label for="post-price">Price: </label>
8080
<input required id="post-price" name="post-price" type="number" min="1" max="9999999" step="0.01"

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,19 @@ export const buildPost = (post) => {
1010
1111
<img src="${post.image}" alt="Product Image" class="post-image">
1212
13-
<p class="title">${post.name}</p>
13+
<div class="post-text">
1414
15-
<p>${post.tag ?? 'None'}</p>
15+
<p class="post-title">${post.name}</p>
1616
17-
<p>€ ${post.price}</p>
17+
<p>${post.tag ?? 'None'}</p>
1818
19-
<p>${post.description}</p>
19+
<p>€ ${post.price}</p>
2020
21-
<p class="sale-label ${postType}">${postType}</p>
21+
<p class="post-description">${post.description}</p>
22+
23+
<p class="sale-label ${postType}">${postType}</p>
24+
25+
</div>
2226
</div>`;
2327

2428
return postView

‎src/styles/components/buttons.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
button,
22
.btn {
33
font-weight: bold;
4-
font-size: large;
4+
font-size: clamp(0.6rem, 2.5vw, 1.5rem);
55
align-self: self-start;
66
width: auto;
77
padding: 0.5rem;
88
padding-right: 1rem;
99
padding-left: 1rem;
1010

11+
white-space: nowrap;
12+
1113
border-radius: 6px;
1214
border: none;
1315
cursor: pointer;

‎src/styles/components/inputs.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.input-search{
22
background-color: var(--bg-search);
3+
font-size: clamp(0.6rem, 2.5vw, 1.5rem);
34
}
45

56
.input-search::placeholder{

‎src/styles/components/post-card-container.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)