Skip to content

Commit 77806e0

Browse files
pablo-schpablo-sch
committed
the loader is made
1 parent 8e55384 commit 77806e0

File tree

16 files changed

+167
-60
lines changed

16 files changed

+167
-60
lines changed

‎views/index.html‎ renamed to ‎index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
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">
78
</head>
89
<body>
10+
<div class="loader hidden"></div> <!-- by defaul "loader" is hidden -->
911
<div class="posts-container"></div>
10-
11-
<script type="module" src="../src/main.js"></script>
12+
<script type="module" src="src/js/main.js"></script>
1213
</body>
1314
</html>

‎src/components/footer/footer.js‎ renamed to ‎src/js/components/footer/footer.js‎

File renamed without changes.

‎src/components/header/header.js‎ renamed to ‎src/js/components/header/header.js‎

File renamed without changes.

‎src/js/components/loader/loaderController.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// the "loader" in loaderController(loader) is the class '.loader' from index.html"
3+
export function loaderController(loader) { // 'loader' comes from ShowPostsController.js
4+
5+
const show = () => {
6+
7+
// <div class="loader hidden -> X"></div>
8+
loader.classList.remove("hidden");
9+
}
10+
const hide = () => {
11+
12+
// <div class="loader + hidden"></div>
13+
loader.classList.add("hidden");
14+
}
15+
16+
return {
17+
show,
18+
hide
19+
}
20+
}

‎src/js/main.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { loaderController } from "./components/loader/loaderController.js";
2+
import { showPostsController } from "./modules/show-posts/showPostsController.js";
3+
4+
5+
// Get the DOM nodes we need to interact with.
6+
document.addEventListener("DOMContentLoaded", () => {
7+
8+
// Here I go to the DOM and select the nodes I need to manage in my code.
9+
const container = document.querySelector(".posts-container")
10+
const loader = document.querySelector(".loader")
11+
12+
const { show, hide } = loaderController(loader)
13+
14+
/*
15+
'main.js' needs to know when posts start and finish loading,
16+
which is handled inside 'showPostsController.js'.
17+
18+
For that reason, we use 'CustomEvent' in 'showPostsController.js'.
19+
20+
Here, we listen to those custom events ('load-posts-started' and 'load-posts-finished')
21+
on the container element. When triggered, we call 'show()' to display the loader,
22+
and 'hide()' to remove it once loading is complete.
23+
*/
24+
container.addEventListener('load-posts-started', () => {
25+
show()
26+
})
27+
container.addEventListener('load-posts-finished', () => {
28+
hide()
29+
/*showNotification('Posts Loaded')*/
30+
})
31+
container.addEventListener('load-tweets-error', (event) => {
32+
/* const errorMesage = event.detail;
33+
showNotification(errorMesage) */
34+
})
35+
36+
// Then this next code happens in showPostsController.js
37+
showPostsController(container)
38+
39+
})

‎src/modules/create-post/create-post.js‎ renamed to ‎src/js/modules/create-post/create-post.js‎

File renamed without changes.

‎src/modules/login/login.js‎ renamed to ‎src/js/modules/login/login.js‎

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { getPosts } from "./showPostsModel.js"
2+
import { buildPost } from './showPostsView.js';
3+
4+
export async function showPostsController(container) { // the container is ".posts-container"
5+
6+
try {
7+
8+
container.dispatchEvent(new CustomEvent("load-posts-started"))
9+
/* const event = new CustomEvent("load-posts-started");
10+
container.dispatchEvent(event); */
11+
12+
const posts = await getPosts();
13+
drawPosts(posts, container)
14+
15+
} catch (error) {
16+
17+
const event = new CustomEvent("load-posts-error", {
18+
// We attach additional data to our "CustomEvent" using a property called "detail".
19+
// The "detail" is attached to the "event" variable.
20+
detail: error.message
21+
})
22+
23+
// By sending the following line "main.js" will listen for this event and do what we told it to do,
24+
// in this case "showNotification(errorMesage)" method.
25+
container.dispatchEvent(event)
26+
27+
alert(error.message) // this error comes from showPostsModel.js.
28+
29+
} finally {
30+
31+
container.dispatchEvent(new CustomEvent("load-posts-finished"))
32+
/* const event = new CustomEvent("load-posts-finished")
33+
container.dispatchEvent(event) */
34+
35+
}
36+
}
37+
38+
function drawPosts(posts, container) {
39+
40+
container.innerHTML = ''; // I clean all displayed posts if any.
41+
42+
if (posts.length === 0) {
43+
alert("Sorry, no posts available!")
44+
} else { // I add this "else" to have more clarity of the code.
45+
46+
posts.forEach((post) => { // If "posts" is an empty array, the "forEach" will not be executed.
47+
48+
const postHtml = document.createElement("div");
49+
// Creates an empty HTML element in memory (postHtml), which is not yet in the DOM.
50+
51+
postHtml.innerHTML = buildPost(post)
52+
// In an already cleaned container,
53+
// I assign to "postHtml" whatever the buildPost(post) function returns.
54+
55+
container.appendChild(postHtml)
56+
// I insert this new div in the container.
57+
// Requires you to pass a node object (postHtml), not plain text or HTML.
58+
})
59+
}
60+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export async function getPosts() {
2+
3+
let posts = [];
4+
5+
try {
6+
const response = await fetch('http://localhost:8000/api/posts')
7+
posts = await response.json();
8+
// This code line won't be executed if fech fails.
9+
// Automatically catch(error) will be executed.
10+
} catch (error) {
11+
/* being in the model if an error occurs on fech,
12+
the error will have a better context so you have a better answer for detecting problems with BD. */
13+
14+
// here "error" would return a 'status code'.
15+
16+
/* the error should not be sent to the file driver for it to handle, but directly send the error itself. */
17+
18+
19+
20+
throw new Error("It was not possible to get the posts. Please try again later.") // this error is sended to showPostsController.js
21+
}
22+
23+
return posts;
24+
}

0 commit comments

Comments
 (0)