Skip to content

Commit c9152af

Browse files
committed
"post Detail" and "create Post" are now mobile first
1 parent c2e887e commit c9152af

File tree

13 files changed

+334
-80
lines changed

13 files changed

+334
-80
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ export const buildCreatePostForm = () => {
4040
</label>
4141
</div>
4242
43-
<label for="post-tag">Tag: </label>
44-
<select id="post-tag" name="tag">
45-
${tagSelector}
46-
</select>
43+
<div class="select-wrapper">
44+
<p class="tag-label"><strong>Category:</strong></p>
45+
<select id='post-tag'>${tagSelector}</select>
46+
</div>
4747
4848
<button>Create Post</button>
4949
`;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function initPostDetail() {
1818

1919
if (postId) {
2020

21-
const postContainer = document.querySelector(".postDetail-container")
21+
const postContainer = document.querySelector(".post-detail-container")
2222

2323
postContainer.addEventListener('load-post-started', () => {
2424
show();

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

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { getPost, getLoggedInUserInfo, removePost, updatePost, uploadImage } from "./postDetailModel.js";
2-
import { buildPostDetail_EditableView, buildPostDetail_ReadOnlyView } from "./postDetailView.js";
2+
import { buildEditableView, buildReadOnlyView } from "./postDetailView.js";
33

44

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

77

88
let postDetail = null;
99
let user = null;
10-
let isEditing = false;
10+
let isOwner = false
1111

1212
try {
1313
//----------------------------------------------------
@@ -22,18 +22,21 @@ export const postDetailController = async (postContainer, postId) => {
2222
dispatchNotification('post-error', error.message);
2323
}
2424

25-
try {
26-
//===================================
27-
user = await getLoggedInUserInfo();
28-
//===================================
29-
} catch (error) {
30-
dispatchNotification('post-error', error.message);
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);
34+
}
35+
36+
isOwner = user.id === postDetail.userId;
37+
38+
renderReadOnlyView(postDetail, isOwner);
3139
}
32-
33-
const isOwner = user.id === postDetail.userId;
34-
35-
render_ReadOnlyView(postDetail, isOwner);
36-
3740
} catch (error) {
3841
dispatchNotification('post-error', error.message);
3942
} finally {
@@ -43,23 +46,21 @@ export const postDetailController = async (postContainer, postId) => {
4346
}
4447

4548
//===================================================================================================================
46-
function render_ReadOnlyView(post, isOwner) {
47-
isEditing = false;
48-
postContainer.innerHTML = buildPostDetail_ReadOnlyView(post, isOwner);
49+
function renderReadOnlyView(post, isOwner) {
50+
postContainer.innerHTML = buildReadOnlyView(post, isOwner);
4951

5052
if (isOwner) {
5153
const editPost = postContainer.querySelector("#edit-post")
52-
editPost.addEventListener("click", () => render_EditableView(post));
54+
editPost.addEventListener("click", () => renderEditableView(post));
5355

5456
const deletePost = postContainer.querySelector("#delete-post")
5557
deletePost.addEventListener("click", () => handleDelete(post.id));
5658
}
5759
}
5860

5961
//------------------------------------------------------------------------
60-
function render_EditableView(post) {
61-
isEditing = true;
62-
postContainer.innerHTML = buildPostDetail_EditableView(post);
62+
function renderEditableView(post) {
63+
postContainer.innerHTML = buildEditableView(post);
6364

6465
const editForm = document.getElementById("edit-post-form");
6566

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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { tags } from "../../utils/constants.js";
22

3-
export const buildPostDetail_ReadOnlyView = (post, isOwner) => {
3+
export const buildReadOnlyView = (post, isOwner) => {
44
const postType = post.isPurchase ? 'purchase' : 'sale';
55

66
const date = new Date(post.updatedAt);
@@ -12,38 +12,36 @@ export const buildPostDetail_ReadOnlyView = (post, isOwner) => {
1212
const formattedDate = `${hours}:${minutes} ${day}-${month}-${year}`;
1313

1414
const postHTML = `
15-
<div class="post-view">
1615
<div class='image-container'>
17-
<img src="${post.image}" alt="Product Image" class='post-image'>
18-
<p class='sale-label ${postType}'>${postType}</p>
16+
<div class="image-wrapper">
17+
<img src="${post.image}" alt="Product Image" class='post-image'>
18+
<p class='sale-label ${postType}'>${postType}</p>
19+
</div>
1920
</div>
2021
2122
<p class="title">
2223
<strong>${post.name} - €${post.price}</strong>
2324
</p>
2425
25-
<p><strong>Owner:</strong></p>
26-
<p>${post.user.name}</p>
26+
<p><strong>Owner: </strong>${post.user.name}</p>
2727
2828
<p><strong>Description:</strong></p>
2929
<p>${post.description}</p>
3030
31-
<p><strong>Tag:</strong></p>
32-
<p>${post.tag != null ? post.tag : 'None'}</p>
31+
<p><strong>Tag: </strong>${post.tag != null ? post.tag : 'None'}</p>
3332
3433
<p><strong>Last update at: </strong>${formattedDate}</p>
3534
3635
${isOwner ? `
3736
<button id="edit-post">Edit</button>
3837
<button id="delete-post">Delete</button>
3938
` : ''}
40-
</div>
4139
`;
4240

4341
return postHTML
4442
};
4543

46-
export const buildPostDetail_EditableView = (post) => {
44+
export const buildEditableView = (post) => {
4745

4846
const tagSelector = `
4947
@@ -80,7 +78,8 @@ export const buildPostDetail_EditableView = (post) => {
8078
<input required id="post-price" name="post-price" type="number" min="1" max="9999999" step="0.01"
8179
placeholder="Introduce the price of your product." value="${post.price}" />
8280
83-
<div>
81+
<div class="radio-button">
82+
8483
<label for="purchase">
8584
<input type="radio" id="purchase" name="transactionType" value="purchase" required ${post.isPurchase ? 'checked' : ''}>
8685
Purchase
@@ -92,11 +91,15 @@ export const buildPostDetail_EditableView = (post) => {
9291
</label>
9392
</div>
9493
95-
<p><strong>Tag:</strong></p>
96-
<select id='post-tag'>${tagSelector}</select>
94+
<div class="select-wrapper">
95+
<p class="tag-label"><strong>Category:</strong></p>
96+
<select id='post-tag'>${tagSelector}</select>
97+
</div>
9798
98-
<button id="save-changes">Save</button>
99-
<button id="cancel-edit">Cancel</button>
99+
<div class="buttons-container">
100+
<button id="save-changes">Save</button>
101+
<button id="cancel-edit">Cancel</button>
102+
</div>
100103
</form>
101104
`;
102105
return postHTML

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { getPost, getLoggedInUserInfo, removePost, updatePost, uploadImage } from "./postDetailModel.js";
2+
import { buildPostDetail_EditableView, buildPostDetail_ReadOnlyView } from "./postDetailView.js";
3+
4+
5+
export const postDetailController = async (postContainer, postId) => {
6+
7+
8+
let postDetail = null;
9+
let user = null;
10+
let isOwner = false
11+
12+
try {
13+
//----------------------------------------------------
14+
loadStarted();
15+
//----------------------------------------------------
16+
17+
try {
18+
//===================================
19+
postDetail = await getPost(postId);
20+
//===================================
21+
} catch (error) {
22+
dispatchNotification('post-error', error.message);
23+
}
24+
25+
if(!localStorage.getItem('accessToken')){
26+
readOnlyView(postDetail, isOwner)
27+
}
28+
29+
try {
30+
//===================================
31+
user = await getLoggedInUserInfo();
32+
//===================================
33+
} catch (error) {
34+
dispatchNotification('post-error', error.message);
35+
}
36+
37+
isOwner = user.id === postDetail.userId;
38+
39+
if(isOwner){
40+
editableView(postDetail)
41+
}else{
42+
readOnlyView(postDetail, isOwner)
43+
}
44+
45+
} catch (error) {
46+
dispatchNotification('post-error', error.message);
47+
} finally {
48+
//----------------------------------------------------
49+
loadFinished();
50+
//----------------------------------------------------
51+
}
52+
53+
//===================================================================================================================
54+
function readOnlyView(post, isOwner) {
55+
postContainer.innerHTML = buildPostDetail_ReadOnlyView(post, isOwner);
56+
}
57+
58+
//===================================================================================================================
59+
function editableView(post) {
60+
61+
const editPost = postContainer.querySelector("#edit-post")
62+
editPost.addEventListener("click", () => render_EditableView(post));
63+
64+
const deletePost = postContainer.querySelector("#delete-post")
65+
deletePost.addEventListener("click", () => handleDelete(post.id));
66+
67+
68+
postContainer.innerHTML = buildPostDetail_EditableView(post);
69+
70+
71+
const editForm = document.getElementById("edit-post-form");
72+
73+
editForm.addEventListener('submit', (event) => {
74+
event.preventDefault();
75+
76+
handleSave(post);
77+
});
78+
79+
const cancel = postContainer.querySelector("#cancel-edit")
80+
cancel.addEventListener("click", (event) => {
81+
event.preventDefault();
82+
83+
render_ReadOnlyView(postDetail, true);
84+
});
85+
}
86+
87+
//------------------------------------------------------------------------
88+
async function handleDelete(postId) {
89+
if (confirm("Are you sure about deleting the post?")) {
90+
try {
91+
//----------------------------------------------------
92+
loadStarted();
93+
//----------------------------------------------------
94+
95+
//===================================
96+
await removePost(postId);
97+
//===================================
98+
99+
dispatchNotification('post-success', {
100+
message: "Post successfully deleted.",
101+
type: 'success',
102+
type_success: 'post-deleted'
103+
});
104+
} catch (error) {
105+
dispatchNotification('post-error', error.message);
106+
} finally {
107+
//----------------------------------------------------
108+
loadFinished();
109+
//----------------------------------------------------
110+
}
111+
}
112+
}
113+
114+
//------------------------------------------------------------------------
115+
async function handleSave(post) {
116+
117+
const editForm = document.getElementById("edit-post-form");
118+
119+
const image = editForm.querySelector('#post-image').files[0];
120+
121+
const name = editForm.querySelector('#post-name').value;
122+
const description = editForm.querySelector('#post-description').value;
123+
const price = editForm.querySelector('#post-price').value;
124+
125+
const tag = editForm.querySelector('#post-tag').value;
126+
127+
const isPurchase = editForm.querySelector('input[name="transactionType"]:checked').value === 'purchase';
128+
129+
try {
130+
//----------------------------------------------------
131+
loadStarted()
132+
//----------------------------------------------------
133+
134+
let imageURL
135+
136+
if (image) {
137+
//===================================
138+
imageURL = await uploadImage(image);
139+
//===================================
140+
141+
} else {
142+
imageURL = '../../../../public/no-image-available.jpg';
143+
}
144+
145+
post.image = imageURL;
146+
post.name = name;
147+
post.description = description;
148+
post.price = price;
149+
post.tag = tag || null;
150+
post.isPurchase = isPurchase;
151+
152+
//===================================
153+
await updatePost(post);
154+
//===================================
155+
156+
let getUpdatedPost;
157+
158+
const postId = post.id
159+
//===================================
160+
getUpdatedPost = await getPost(postId);
161+
//===================================
162+
163+
postDetail = getUpdatedPost;
164+
165+
dispatchNotification('post-success', {
166+
message: "Post successfully updated.",
167+
type: 'success',
168+
});
169+
170+
render_ReadOnlyView(postDetail, true);
171+
172+
} catch (error) {
173+
dispatchNotification('post-error', error.message);
174+
} finally {
175+
//----------------------------------------------------
176+
loadFinished()
177+
//----------------------------------------------------
178+
}
179+
}
180+
181+
//===================================================================================================================
182+
function dispatchNotification(eventType, message) {
183+
const event = new CustomEvent(eventType, { detail: message });
184+
185+
if (message.type_success === 'post-deleted') {
186+
setTimeout(() => window.location = '/index.html', 500);
187+
}
188+
189+
postContainer.dispatchEvent(event);
190+
}
191+
192+
function loadStarted() {
193+
const event = new CustomEvent("load-post-started");
194+
postContainer.dispatchEvent(event);
195+
}
196+
197+
function loadFinished() {
198+
const event = new CustomEvent("load-post-finished");
199+
postContainer.dispatchEvent(event);
200+
}
201+
};

0 commit comments

Comments
 (0)