Skip to content

Commit befa126

Browse files
pablo-schpablo-sch
committed
post and submits upload handling such as login and sigup is completed.
updated and improved notification handling.
1 parent 482be45 commit befa126

21 files changed

+330
-122
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Document</title>
7-
<link rel="stylesheet" href="src/styles/loader.css">
87
<link rel="stylesheet" href="src/styles/notifications.css">
8+
<link rel="stylesheet" href="src/styles/loader.css">
99

1010
</head>
1111
<body>

‎src/js/auth/auth.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export function isAuthenticated() {
22
return !!localStorage.getItem('accessToken');
33
}
44

5-
export function redirectIfNotAuthenticated(path2) {
5+
export function redirectIfNotAuthenticated() {
66

77
const token = isAuthenticated();
88
const path = window.location.pathname;

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { buildNotification } from "./notificationsView.js";
22

3-
export function notificationsController(container){ // container is ".notifications"
4-
5-
// Internal function.
3+
export function notificationsController(container) { // container is ".notifications"
4+
5+
// Internal function.
66
const removeNotification = (newNotification) => {
77
newNotification.remove();
88
}
@@ -11,22 +11,33 @@ export function notificationsController(container){ // container is ".notificati
1111
const showNotification = (message, type = 'error') => {
1212

1313
const newNotification = document.createElement('div');
14-
1514
newNotification.classList.add('notification') // <-- Here we add the "notification" class so "notification.css" will detect it.
1615
newNotification.classList.add(type) // <-- Here we add the class of the container we pass to "type".
1716
newNotification.innerHTML = buildNotification(message, type) // <-- If "type" is not added, the default will be “error”.
1817

1918
container.appendChild(newNotification) // <-- Here we insert our HTML ready to use.
2019

2120
const closeButton = newNotification.querySelector("button"); // <-- It will select only the button element of the container that we pass it.
22-
2321
closeButton.addEventListener("click", () => {
2422
removeNotification(newNotification);
2523
});
2624

27-
setTimeout(() => {
28-
removeNotification(newNotification)
29-
}, 5000);
25+
if (type === 'error') {
26+
// Searches for all error notifications, excluding the new one.
27+
const oldErrors = Array.from(container.querySelectorAll('.notification.error'))
28+
.filter(n => n !== newNotification);
29+
30+
// The previous ones are automatically deleted.
31+
oldErrors.forEach(n => {
32+
setTimeout(() => removeNotification(n), 500);
33+
});
34+
35+
// The new (most recent) one is not automatically deleted.
36+
}
37+
38+
if (type !== 'error') {
39+
setTimeout(() => { removeNotification(newNotification) }, 5000);
40+
}
3041
}
3142

3243
return {

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { createPostController } from "../create-post/createPostController.js";
2+
23
import {notificationsController} from "../../components/notifications/notificationsController.js"
4+
import { loaderController } from "../../components/loader/loaderController.js";
5+
36

47
export function initCreatePost() {
58
const token = localStorage.getItem('accessToken');
@@ -10,8 +13,18 @@ export function initCreatePost() {
1013

1114
const createPostForm = document.querySelector('#createPostForm')
1215
const notifications = document.querySelector("#notifications");
16+
const loader = document.querySelector(".loader")
1317

1418
const { showNotification } = notificationsController(notifications)
19+
const { show, hide } = loaderController(loader);
20+
21+
createPostForm.addEventListener('load-posts-started', () => {
22+
show();
23+
})
24+
25+
createPostForm.addEventListener('load-posts-finished', () => {
26+
hide();
27+
})
1528

1629
createPostForm.addEventListener("createPost-ok", (event) => {
1730
const message = event.detail.message;

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

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { createPost } from "./createPostModel.js";
22

3+
//===================================================================================================================
34
export const createPostController = (createPostForm) => {
5+
6+
//-------------------------------------------------------------------------------------------------------------------
47
createPostForm.addEventListener('submit', async (event) => {
58

69
event.preventDefault();
@@ -21,39 +24,60 @@ export const createPostController = (createPostForm) => {
2124
isPurchase: isPurchase
2225
}
2326

24-
handlecreatePost(postData, createPostForm)
27+
handlecreatePost(postData)
2528

2629
})
2730

28-
const handlecreatePost = async (postData, createPostForm) => {
31+
//-------------------------------------------------------------------------------------------------------------------
32+
const handlecreatePost = async (postData) => {
2933
try {
34+
//----------------------------------------------------
35+
const event = new CustomEvent("load-posts-started");
36+
createPostForm.dispatchEvent(event);
37+
//----------------------------------------------------
38+
39+
//====================================================
3040
await createPost(postData);
41+
//====================================================
3142

32-
dispatchCreateProductSuccess(createPostForm, 'Post created successfully.');
43+
//dispatchCreateProductSuccess(createPostForm, 'Post created successfully.');
44+
dispatchNotification('createPost-ok', {
45+
message: 'Post created successfully.',
46+
type: 'success'
47+
})
3348

34-
setTimeout(() => {
35-
window.location = '/';
36-
}, 2000)
49+
setTimeout(() => { window.location = '/'; }, 3000)
3750

3851
} catch (error) {
39-
dispatchCreateProductError(createPostForm, error.message);
52+
//dispatchCreateProductError(createPostForm, error.message);
53+
dispatchNotification('createPost-error', error.message)
54+
} finally {
55+
//----------------------------------------------------
56+
const event = new CustomEvent("load-posts-finished")
57+
createPostForm.dispatchEvent(event)
58+
//----------------------------------------------------
4059
}
4160
}
42-
43-
function dispatchCreateProductSuccess(createPostForm, successMessage) {
44-
const event = new CustomEvent("createPost-ok", {
45-
detail: {
46-
message: successMessage,
47-
type: 'success'
48-
}
49-
});
50-
createPostForm.dispatchEvent(event)
51-
}
52-
53-
function dispatchCreateProductError(createPostForm, errorMessage) {
54-
const event = new CustomEvent("createPost-error", {
55-
detail: errorMessage
56-
});
61+
//-------------------------------------------------------------------------------------------------------------------
62+
function dispatchNotification(eventType, message) {
63+
const event = new CustomEvent(eventType, { detail: message })
5764
createPostForm.dispatchEvent(event)
5865
}
66+
//-------------------------------------------------------------------------------------------------------------------
67+
/* function dispatchCreateProductSuccess(createPostForm, successMessage) {
68+
const event = new CustomEvent("createPost-ok", {
69+
detail: {
70+
message: successMessage,
71+
type: 'success'
72+
}
73+
});
74+
createPostForm.dispatchEvent(event)
75+
}
76+
77+
function dispatchCreateProductError(createPostForm, errorMessage) {
78+
const event = new CustomEvent("createPost-error", {
79+
detail: errorMessage
80+
});
81+
createPostForm.dispatchEvent(event)
82+
} */
5983
}

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,19 @@ export const createPost = async (postData) => {
1717
}
1818
});
1919

20-
const data = await response.json();
21-
22-
// If response is not OK, throw an error with the response message
2320
if (!response.ok) {
2421
const errorMessage = data.message;
2522
console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
26-
throw new Error(errorMessage);
23+
throw new Error(response.status + " " + response.statusText);
2724
}
2825

29-
} catch (error) {
30-
throw error;
26+
const data = await response.json();
3127

28+
} catch (error) {
29+
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
30+
throw new Error('Oops... There was a problem with the server connection.');
31+
}
32+
throw error
3233
}
3334

3435
}

‎src/js/modules/login/login.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
import { loginController } from "./loginController.js"
2-
import {notificationsController} from "../../components/notifications/notificationsController.js"
3-
2+
3+
import { notificationsController } from "../../components/notifications/notificationsController.js"
4+
import { loaderController } from "../../components/loader/loaderController.js";
5+
46
export function initLogin() {
57

68
const loginForm = document.querySelector("#loginForm")
79
const notifications = document.querySelector("#notifications");
10+
const loader = document.querySelector(".loader")
811

912
const { showNotification } = notificationsController(notifications)
13+
const { show, hide } = loaderController(loader);
14+
15+
loginForm.addEventListener('load-posts-started', () => {
16+
show();
17+
})
18+
19+
loginForm.addEventListener('load-posts-finished', () => {
20+
hide();
21+
})
1022

1123
loginForm.addEventListener("login-error", (event) => {
1224
const message = event.detail;

‎src/js/modules/login/loginController.js‎

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { REGEXP } from "../../utils/constants.js";
22
import { loginUser } from "./loginModel.js";
33

4+
//===================================================================================================================
45
export function loginController(loginForm) {
56

7+
//-------------------------------------------------------------------------------------------------------------------
68
loginForm.addEventListener("submit", (event) => {
79
event.preventDefault();
810

@@ -16,57 +18,79 @@ export function loginController(loginForm) {
1618

1719
if (emailRegExp.test(userEmail)) {
1820

19-
handleLoginUser(userEmail, password, loginForm)
21+
handleLoginUser(userEmail, password)
2022

2123
} else {
2224

23-
dispatchLoginError(loginForm, 'Incorrect mail format');
25+
dispatchNotification('login-error', 'Incorrect mail format')
26+
//dispatchLoginError(loginForm, 'Incorrect mail format');
2427
}
2528
})
2629

27-
async function handleLoginUser(userEmail, password, loginForm) {
30+
//-------------------------------------------------------------------------------------------------------------------
31+
async function handleLoginUser(userEmail, password) {
2832

2933
try {
3034

35+
/*
3136
const existingToken = localStorage.getItem("accessToken");
3237
3338
if (existingToken) {
3439
throw new Error("There is already an active session. Log out before logging in with another user.");
35-
}
40+
}
41+
*/
3642

43+
//----------------------------------------------------
44+
const event = new CustomEvent("load-posts-started");
45+
loginForm.dispatchEvent(event);
46+
//----------------------------------------------------
47+
48+
//====================================================
3749
const token = await loginUser(userEmail, password);
50+
//====================================================
3851

39-
dispatchLoginSuccess(loginForm, 'You have successfully logged in.');
52+
dispatchNotification('login-ok', {
53+
message: "You have successfully logged in.",
54+
type: 'success'
55+
})
56+
//dispatchLoginSuccess(loginForm, 'You have successfully logged in.');
4057

4158
localStorage.setItem("accessToken", token)
4259

43-
setTimeout(() => {
44-
window.location = '/index.html'
45-
}, 500);
46-
60+
setTimeout(() => { window.location = '/index.html' }, 500);
4761

4862
} catch (error) {
4963

50-
dispatchLoginError(loginForm, error.message);
51-
64+
dispatchNotification('login-error', error.message)
65+
//dispatchLoginError(loginForm, error.message);
66+
} finally {
67+
//----------------------------------------------------
68+
const event = new CustomEvent("load-posts-finished")
69+
loginForm.dispatchEvent(event)
70+
//----------------------------------------------------
5271
}
5372
}
54-
55-
function dispatchLoginSuccess(loginForm, successMessage) {
56-
const event = new CustomEvent("login-ok", {
57-
detail: {
58-
message: successMessage,
59-
type: 'success'
60-
}
61-
});
62-
loginForm.dispatchEvent(event);
63-
}
64-
65-
function dispatchLoginError(loginForm, errorMessage) {
66-
const event = new CustomEvent("login-error", {
67-
detail: errorMessage
68-
});
69-
loginForm.dispatchEvent(event);
73+
//-------------------------------------------------------------------------------------------------------------------
74+
function dispatchNotification(eventType, message) {
75+
const event = new CustomEvent(eventType, { detail: message })
76+
loginForm.dispatchEvent(event)
7077
}
78+
//-------------------------------------------------------------------------------------------------------------------
79+
/* function dispatchLoginSuccess(loginForm, successMessage) {
80+
const event = new CustomEvent("login-ok", {
81+
detail: {
82+
message: successMessage,
83+
type: 'success'
84+
}
85+
});
86+
loginForm.dispatchEvent(event);
87+
}
88+
89+
function dispatchLoginError(loginForm, errorMessage) {
90+
const event = new CustomEvent("login-error", {
91+
detail: errorMessage
92+
});
93+
loginForm.dispatchEvent(event);
94+
} */
7195
}
7296

‎src/js/modules/login/loginModel.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,21 @@ export async function loginUser(email, password) {
1717
if (!response.ok) {
1818
const errorMessage = data.message;
1919
console.error(`Error: ${response.status} (${response.statusText}) --> ${errorMessage}`);
20-
throw new Error(errorMessage);
20+
throw new Error(response.status + " " + response.statusText);
2121
}
2222

23-
/* if (!response.ok) {
24-
throw new Error("error iniciando sesión")
25-
} */
26-
2723
const { accessToken } = data;
2824

2925
if (!accessToken) {
30-
throw new Error("No se recibió el token de acceso");
26+
throw new Error("The access token was not received.");
3127
}
3228

3329
return accessToken;
3430

3531
} catch (error) {
36-
throw error;
32+
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
33+
throw new Error('Oops... There was a problem with the server connection.');
34+
}
35+
throw error
3736
}
3837
}

0 commit comments

Comments
 (0)