Skip to content

Commit 63a5fa1

Browse files
pablo-schpablo-sch
committed
a simple paging system is added to the project
1 parent 862bc23 commit 63a5fa1

File tree

9 files changed

+89
-27
lines changed

9 files changed

+89
-27
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ <h1>Posts</h1>
3939
<div class="notifications"></div>
4040

4141
<div class="showPosts-container"></div>
42+
43+
<div class="pages" id="pages"></div>
4244
</main>
4345

4446
<div class="footer"></div>

‎src/assets/web_icon.png‎

1.16 KB
Loading

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ export function initShowPosts() {
1313
const loader = document.querySelector(".loader")
1414
const notifications = document.querySelector(".notifications")
1515
const session = document.querySelector(".session")
16+
17+
1618

1719
const { show, hide } = loaderController(loader);
1820
const { showNotification } = notificationsController(notifications)
1921

20-
2122
/*
2223
'ShowPostsController.js' needs to know when posts start and finish loading,
2324
which is handled inside 'showPostsController.js'.

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

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,22 @@ import { buildPost } from './showPostsView.js';
44
//===================================================================================================================
55
export async function showPostsController(container) { // the container is ".posts-container"
66

7+
const pages = document.getElementById('pages');
8+
9+
const POSTS_PER_PAGE = 10;
10+
let currentPage = 1;
11+
712
try {
813
//container.dispatchEvent(new CustomEvent("load-posts-started"))
914
const event = new CustomEvent("load-posts-started");
1015
container.dispatchEvent(event); // --> This "event" goes to "load-posts-started".
1116

1217
//===================================
13-
const posts = await getPosts();
18+
const { posts, totalPosts } = await getPosts(currentPage);
1419
//===================================
1520

16-
drawPosts(posts, container)
21+
drawPosts(posts, container);
22+
drawPages(totalPosts);
1723

1824
} catch (error) {
1925

@@ -23,6 +29,8 @@ export async function showPostsController(container) { // the container is ".pos
2329
detail: error.message
2430
})
2531

32+
console.log(error)
33+
2634
// By sending the following line "main.js" will listen for this event and do what we told it to do,
2735
// in this case "showNotification(errorMesage)" method.
2836
container.dispatchEvent(event) // --> This "event" goes to "load-posts-error".
@@ -32,31 +40,72 @@ export async function showPostsController(container) { // the container is ".pos
3240
const event = new CustomEvent("load-posts-finished")
3341
container.dispatchEvent(event) // --> This "event" goes to "load-posts-finished".
3442
}
35-
}
3643

37-
//-------------------------------------------------------------------------------------------------------------------
38-
function drawPosts(posts, container) {
3944

40-
container.innerHTML = ''; // I clean all displayed posts if any.
45+
//-------------------------------------------------------------------------------------------------------------------
46+
function drawPosts(posts, container) {
4147

42-
if (posts.length === 0) {
43-
//alert("Sorry, no posts available!")
44-
} else { // I add this "else" to have more clarity of the code.
48+
container.innerHTML = ''; // I clean all displayed posts if any.
4549

46-
posts.forEach((post) => { // If "posts" is an empty array, the "forEach" will not be executed.
50+
if (posts.length === 0) {
51+
//alert("Sorry, no posts available!")
52+
} else { // I add this "else" to have more clarity of the code.
4753

48-
const postHtml = document.createElement("a");
49-
postHtml.setAttribute("href", `./views/post-detail.html?id=${post.id}`)
50-
// Creates an empty HTML element in memory (postHtml), which is not yet in the DOM.
54+
posts.forEach((post) => { // If "posts" is an empty array, the "forEach" will not be executed.
5155

52-
postHtml.innerHTML = buildPost(post)
53-
// In an already cleaned container,
54-
// I assign to "postHtml" whatever the buildPost(post) function returns.
56+
const postHtml = document.createElement("a");
57+
postHtml.setAttribute("href", `./views/post-detail.html?id=${post.id}`)
58+
// Creates an empty HTML element in memory (postHtml), which is not yet in the DOM.
5559

56-
container.appendChild(postHtml)
57-
// I insert this new div in the container.
58-
// Requires you to pass a node object (postHtml), not plain text or HTML.
59-
})
60+
postHtml.innerHTML = buildPost(post)
61+
// In an already cleaned container,
62+
// I assign to "postHtml" whatever the buildPost(post) function returns.
63+
64+
container.appendChild(postHtml)
65+
// I insert this new div in the container.
66+
// Requires you to pass a node object (postHtml), not plain text or HTML.
67+
})
68+
}
6069
}
61-
}
6270

71+
//-------------------------------------------------------------------------------------------------------------------
72+
function drawPages(totalPosts) {
73+
74+
pages.innerHTML = '';
75+
76+
const pageCount = Math.ceil(totalPosts / POSTS_PER_PAGE);
77+
78+
for (let i = 1; i <= pageCount; i++) {
79+
80+
const btn = document.createElement('button');
81+
btn.textContent = i;
82+
83+
if (i === currentPage) {
84+
btn.classList.add('active');
85+
}
86+
87+
btn.addEventListener('click', async () => {
88+
89+
currentPage = i;
90+
91+
try {
92+
//===================================
93+
const { posts } = await getPosts(currentPage);
94+
//===================================
95+
96+
drawPosts(posts, container);
97+
drawPages(totalPosts);
98+
99+
} catch (error) {
100+
101+
const errorEvent = new CustomEvent("load-posts-error", {
102+
detail: error.message
103+
});
104+
container.dispatchEvent(errorEvent);
105+
}
106+
});
107+
108+
pages.appendChild(btn);
109+
}
110+
}
111+
}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
export async function getPosts() {
1+
export async function getPosts(page) {
22

33
let posts = [];
44

55
try {
6-
const response = await fetch('http://localhost:8000/api/posts')
6+
const response = await fetch(`http://localhost:8000/api/posts?_page=${page}&_limit=12`)
7+
const totalPosts = parseInt(response.headers.get('X-Total-Count'), 10);
78

89
if (!response.ok) {
910
const errorMessage = response.message;
@@ -15,16 +16,17 @@ export async function getPosts() {
1516

1617
if (posts.length === 0) {
1718
const apiMessage = 'Sorry... No Post available at the moment.';
18-
console.error(`Response: ${response.status} (${response.statusText}) --> ${response.message}`);
19+
console.error(`Response: ${response.status} (${response.statusText})`);
1920
throw new Error(apiMessage);
2021
}
2122

23+
return { posts, totalPosts };
24+
2225
} catch (error) {
2326
if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
2427
throw new Error('Oops... There was a problem with the server connection.');
2528
}
2629
throw error
27-
}
2830

29-
return posts;
31+
}
3032
}

‎views/create-post.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<title>Create Post</title>
99

10+
<link rel="icon" type="image/png" href="../src/assets/web_icon.png">
11+
1012
<link rel="stylesheet" href="../src/styles/normalize.css">
1113
<link rel="stylesheet" href="../src/styles/common.css">
1214

‎views/login.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<title>Login</title>
99

10+
<link rel="icon" type="image/png" href="../src/assets/web_icon.png">
11+
1012
<link rel="stylesheet" href="../src/styles/normalize.css">
1113
<link rel="stylesheet" href="../src/styles/common.css">
1214

‎views/post-detail.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<title>Post Detail</title>
99

10+
<link rel="icon" type="image/png" href="../src/assets/web_icon.png">
11+
1012
<link rel="stylesheet" href="../src/styles/normalize.css">
1113
<link rel="stylesheet" href="../src/styles/common.css">
1214

‎views/signup.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<title>Sign Up</title>
99

10+
<link rel="icon" type="image/png" href="../src/assets/web_icon.png">
11+
1012
<link rel="stylesheet" href="../src/styles/normalize.css">
1113
<link rel="stylesheet" href="../src/styles/common.css">
1214

0 commit comments

Comments
 (0)