Skip to content

Commit ab6e36e

Browse files
pablo-schpablo-sch
committed
the project allow to up images
1 parent 679b3e0 commit ab6e36e

File tree

8 files changed

+167
-73
lines changed

8 files changed

+167
-73
lines changed

‎docs/README.es.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ Esto levantará el servidor y pondrá en funcionamiento el API REST para que pue
122122

123123
1. Descargue el comprimido del proyecto desde GitHub a su ordenador.
124124

125-
2. Una vez desarcargado el comprimido, abra el proyecto en Visual Studio agregando el directorio del proyecto a su espacio de trabajo.
125+
2. Una vez descarcargado el comprimido, abra el proyecto en Visual Studio agregando el directorio del proyecto a su espacio de trabajo.
126126

127127
### Notas
128128

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

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,62 @@ export const createPostController = (createPostForm) => {
88

99
event.preventDefault();
1010

11-
const image = createPostForm.querySelector('#post-image').value;
12-
let postImage;
11+
const image = createPostForm.querySelector('#post-image').files[0];
12+
13+
const name = createPostForm.querySelector('#post-name').value;
14+
const description = createPostForm.querySelector('#post-description').value;
15+
const price = createPostForm.querySelector('#post-price').value;
16+
17+
const tag = createPostForm.querySelector('#post-tag').value;
18+
19+
const isPurchase = createPostForm.querySelector('input[name="transactionType"]:checked').value === 'purchase';
20+
1321

14-
if (!image) {
15-
postImage = '../public/no-image-available.jpg';
16-
}
1722

18-
const postName = createPostForm.querySelector('#post-name').value;
19-
const postTag = createPostForm.querySelector('#post-tag').value;
20-
const postDescription = createPostForm.querySelector('#post-description').value;
21-
const postPrice = createPostForm.querySelector('#post-price').value;
22-
const transactionType = createPostForm.querySelector('input[name="transactionType"]:checked').value;
23-
24-
const isPurchase = transactionType === 'purchase';
25-
26-
const postData = {
27-
image: postImage,
28-
name: postName,
29-
tag: postTag,
30-
description: postDescription,
31-
price: postPrice,
32-
isPurchase: isPurchase
23+
const post = {
24+
image: image,
25+
name: name,
26+
description: description,
27+
price: price,
28+
tag: tag || null,
29+
isPurchase: isPurchase,
3330
}
3431

35-
handlecreatePost(postData)
32+
if (!post.image) {
33+
post.image = '../../../../public/no-image-available.jpg';
34+
}
3635

36+
handlecreatePost(post)
3737
})
3838

3939
//-------------------------------------------------------------------------------------------------------------------
40-
const handlecreatePost = async (postData) => {
40+
const handlecreatePost = async (post) => {
4141
try {
4242
//----------------------------------------------------
4343
const event = new CustomEvent("load-posts-started");
4444
createPostForm.dispatchEvent(event);
4545
//----------------------------------------------------
4646

47+
/* try {
48+
49+
if (!image) {
50+
image = '../../../../public/no-image-available.jpg';
51+
postData.image = image
52+
} else {
53+
//====================================================
54+
image = await uploadImage(image);
55+
//====================================================
56+
postData.image = image
57+
}
58+
59+
} catch (error) {
60+
dispatchNotification('createPost-error', error.message)
61+
} */
62+
63+
64+
4765
//====================================================
48-
await createPost(postData);
66+
await createPost(post);
4967
//====================================================
5068

5169
//dispatchCreateProductSuccess(createPostForm, 'Post created successfully.');
@@ -54,7 +72,7 @@ export const createPostController = (createPostForm) => {
5472
type: 'success'
5573
})
5674

57-
setTimeout(() => { window.location = '/'; }, 1000)
75+
setTimeout(() => { window.location = '/index.html'; }, 1000)
5876

5977
} catch (error) {
6078
//dispatchCreateProductError(createPostForm, error.message);

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

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,69 @@
1-
export const createPost = async (postData) => {
1+
2+
export const createPost = async (post) => {
23
try {
34
const token = localStorage.getItem("accessToken");
45

5-
const response = await fetch("http://localhost:8000/api/posts", {
6+
const formData = new FormData();
7+
formData.append('file', post.image);
8+
9+
const responseImage = await fetch('http://localhost:8000/upload', {
10+
method: 'POST',
11+
headers: {
12+
'Authorization': `Bearer ${token}`
13+
},
14+
body: formData
15+
});
16+
17+
if (!responseImage.ok) {
18+
console.error(`Error: ${responseImage.status} (${responseImage.statusText})`);
19+
throw new Error(responseImage.status + " " + responseImage.statusText);
20+
}
21+
22+
const dataImage = await responseImage.json();
23+
const imageURL = dataImage.path
24+
25+
//===================================================================================================================
26+
27+
const responseCreatePost = await fetch("http://localhost:8000/api/posts", {
628
method: "POST",
729
body: JSON.stringify({
8-
image: postData.image,
9-
name: postData.name,
10-
tag: postData.tag,
11-
description: postData.description,
12-
price: postData.price,
13-
isPurchase: postData.isPurchase
30+
31+
image: imageURL,
32+
name: post.name,
33+
tag: post.tag,
34+
description: post.description,
35+
price: post.price,
36+
isPurchase: post.isPurchase
1437
}),
1538
headers: {
1639
"Content-type": "application/json",
1740
"Authorization": `Bearer ${token}`
1841
}
1942
});
2043

21-
if (!response.ok) {
22-
const errorMessage = data.message;
23-
console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
44+
/*
45+
const response = await fetch("http://localhost:8000/api/posts", {
46+
method: "POST",
47+
body: formData, // Aquí se está enviando FormData, no JSON
48+
headers: {
49+
"Authorization": `Bearer ${token}`,
50+
},
51+
});
52+
*/
53+
54+
const data = await responseCreatePost.json();
55+
56+
if (!responseCreatePost.ok) {
57+
console.error(`Error: ${response.status} (${response.statusText})`);
2458
throw new Error(response.status + " " + response.statusText);
2559
}
2660

27-
const data = await response.json();
61+
return data;
2862

2963
} catch (error) {
3064
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
3165
throw new Error('Oops... There was a problem with the server connection.');
3266
}
3367
throw error
3468
}
35-
3669
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@ import { tags } from "../../utils/constants.js";
22

33
export const buildCreatePostForm = () => {
44

5-
const tagOptions = tags.map(tag => {
6-
return `<option value="${tag}">${tag}</option>`;
7-
}).join('');
5+
const tagSelector = `
6+
<option value="" selected>None</option>
7+
${tags.map(tag => {
8+
return `<option value="${tag}">${tag}</option>`;
9+
}).join('')}
10+
`;
11+
812

913

1014
let createPostFormView = `
@@ -38,7 +42,7 @@ export const buildCreatePostForm = () => {
3842
3943
<label for="post-tag">Tag: </label>
4044
<select id="post-tag" name="tag">
41-
${tagOptions}
45+
${tagSelector}
4246
</select>
4347
4448
<button>Create Post</button>

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

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ export const postDetailController = async (postContainer, postId) => {
66
let postDetail = null;
77
let user = null;
88
let isEditing = false;
9-
9+
1010
try {
11+
//----------------------------------------------------
1112
const event = new CustomEvent("load-posts-started");
1213
postContainer.dispatchEvent(event);
14+
//----------------------------------------------------
1315

1416
try {
1517
//===================================
@@ -34,8 +36,10 @@ export const postDetailController = async (postContainer, postId) => {
3436
} catch (error) {
3537
dispatchNotification('post-error', error.message);
3638
} finally {
39+
//----------------------------------------------------
3740
const event = new CustomEvent("load-posts-finished");
3841
postContainer.dispatchEvent(event);
42+
//----------------------------------------------------
3943
}
4044

4145
//===================================================================================================================
@@ -83,7 +87,8 @@ export const postDetailController = async (postContainer, postId) => {
8387

8488
dispatchNotification('post-success', {
8589
message: "Post successfully deleted.",
86-
type: 'success'
90+
type: 'success',
91+
type_success: 'post-deleted'
8792
});
8893
} catch (error) {
8994
dispatchNotification('post-error', error.message);
@@ -93,40 +98,44 @@ export const postDetailController = async (postContainer, postId) => {
9398

9499
//------------------------------------------------------------------------
95100
async function handleSave(post) {
101+
96102
const editPostForm = postContainer.querySelector('#editPostForm');
97103

104+
const image = editPostForm.querySelector('#post-image').files[0];
105+
98106
const name = editPostForm.querySelector('#post-name').value;
99107
const description = editPostForm.querySelector('#post-description').value;
100108
const price = editPostForm.querySelector('#post-price').value;
101-
const tag = editPostForm.querySelector('#edit-tag').value;
102-
const isPurchase = editPostForm.querySelector('input[name="transactionType"]:checked').value === 'purchase';
103109

104-
const fileInput = editPostForm.querySelector('#post-image');
105-
const newImage = fileInput.files[0];
110+
const tag = editPostForm.querySelector('#post-tag').value;
106111

112+
const isPurchase = editPostForm.querySelector('input[name="transactionType"]:checked').value === 'purchase';
113+
114+
post.image = image;
107115
post.name = name;
108116
post.description = description;
109117
post.price = price;
110-
post.tag = tag;
118+
post.tag = tag || null;
111119
post.isPurchase = isPurchase;
112120

113-
if (newImage) {
114-
post.photo = newImage;
121+
if (!post.image) {
122+
post.image = '../../../../public/no-image-available.jpg';
115123
}
116124

117125
try {
118126
//===================================
119-
const updatedPost = await updatePost(post.id, post);
127+
const updatedPost = await updatePost(post);
120128
//===================================
121129

122-
postDetail = updatedPost; // actualizar info local
130+
postDetail = updatedPost;
131+
123132
dispatchNotification('post-success', {
124133
message: "Post successfully updated.",
125-
type: 'success'
134+
type: 'success',
126135
});
127136

128-
renderReadOnlyView(updatedPost, true);
129-
137+
renderReadOnlyView(postDetail, true);
138+
130139
} catch (error) {
131140
dispatchNotification('post-error', error.message);
132141
}
@@ -136,8 +145,8 @@ export const postDetailController = async (postContainer, postId) => {
136145
function dispatchNotification(eventType, message) {
137146
const event = new CustomEvent(eventType, { detail: message });
138147

139-
if (message.type === 'success') {
140-
setTimeout(() => window.location = '/index.html', 7000);
148+
if (message.type_success === 'post-deleted') {
149+
setTimeout(() => window.location = '/index.html', 500);
141150
}
142151

143152
postContainer.dispatchEvent(event);

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

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,18 +76,38 @@ export async function getLoggedInUserInfo() {
7676
}
7777

7878
//-----------------------------------------------------------------------------------------------
79-
export const updatePost = async (postId, postData) => {
79+
export const updatePost = async (post) => {
8080
try {
8181
const token = localStorage.getItem("accessToken");
8282

83-
const response = await fetch(`http://localhost:8000/api/posts/${postId}`, {
83+
const formData = new FormData();
84+
formData.append('file', post.image);
85+
86+
const responseImage = await fetch('http://localhost:8000/upload', {
87+
method: 'POST',
88+
headers: {
89+
'Authorization': `Bearer ${token}`
90+
},
91+
body: formData
92+
});
93+
94+
if (!responseImage.ok) {
95+
console.error(`Error: ${responseImage.status} (${responseImage.statusText})`);
96+
throw new Error(responseImage.status + " " + responseImage.statusText);
97+
}
98+
99+
const dataImage = await responseImage.json();
100+
const imageURL = dataImage.path
101+
102+
const response = await fetch(`http://localhost:8000/api/posts/${post.id}?_expand=user`, {
84103
method: "PUT",
85104
body: JSON.stringify({
86-
photo: postData.image,
87-
name: postData.name,
88-
description: postData.description,
89-
price: postData.price,
90-
isPurchase: postData.isPurchase
105+
image: imageURL,
106+
name: post.name,
107+
tag: post.tag,
108+
description: post.description,
109+
price: post.price,
110+
isPurchase: post.isPurchase
91111
}),
92112
headers: {
93113
"Content-type": "application/json",
@@ -100,9 +120,9 @@ export const updatePost = async (postId, postData) => {
100120
throw new Error(response.status + " " + response.statusText);
101121
}
102122

103-
const post = await response.json();
123+
const updatedPost = await response.json();
104124

105-
return post;
125+
return updatedPost;
106126

107127
} catch (error) {
108128
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {

0 commit comments

Comments
 (0)