IT NOW HAS PAGING.

4 files changed, 262 insertions, 11 deletions

diff --git a/src/App.jsx b/src/App.jsx
index dd81431..ca2c07e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Search } from "./ToDo-UI/Search";
 import { NewToDo } from "./ToDo-UI/NewToDo";
 import { ListToDos } from "./ToDo-UI/ListToDo";
+import { Pagination } from "./ToDo-UI/Pagination";
 
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -25,6 +26,7 @@ function App() {
             <Search />
             <NewToDo />
             <ListToDos />
+            <Pagination />
         </div>
     );
 }
diff --git a/src/ToDo-UI/Pagination.jsx b/src/ToDo-UI/Pagination.jsx
new file mode 100644
index 0000000..61e41bf
--- /dev/null
+++ b/src/ToDo-UI/Pagination.jsx
@@ -0,0 +1,239 @@
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+    change_page,
+    select_current_filters,
+    select_current_sorting,
+    select_current_page,
+} from "../features/todo/reducer";
+
+import { refresh_todos } from "../refreshToDos";
+import { get_nu_pages_function } from "../api/axios_methods";
+
+function range(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+}
+
+function render_pagination(current_page, nu_pages, handle_on_click) {
+    const first_page = (
+        <li
+            className={
+                "page-item" +
+                (current_page == 1 || nu_pages == 0 ? " disabled" : "")
+            }
+        >
+            <a className="page-link" onClick={() => handle_on_click(1)}>
+                &laquo;
+            </a>
+        </li>
+    );
+    const previous_page = (
+        <li
+            className={
+                "page-item" +
+                (current_page == 1 || nu_pages == 0 ? " disabled" : "")
+            }
+        >
+            <a
+                className="page-link"
+                onClick={() => handle_on_click(current_page - 1)}
+            >
+                &lt;
+            </a>
+        </li>
+    );
+    const next_page = (
+        <li
+            className={
+                "page-item" +
+                (current_page == nu_pages || nu_pages == 0 ? " disabled" : "")
+            }
+        >
+            <a
+                className="page-link"
+                onClick={() => handle_on_click(current_page + 1)}
+            >
+                &gt;
+            </a>
+        </li>
+    );
+    const last_page = (
+        <li
+            className={
+                "page-item" +
+                (current_page == nu_pages || nu_pages == 0 ? " disabled" : "")
+            }
+        >
+            <a className="page-link" onClick={() => handle_on_click(nu_pages)}>
+                &raquo;
+            </a>
+        </li>
+    );
+
+    let in_between = <></>;
+    // If pages <= 5, render all of them.
+    if (nu_pages <= 5) {
+        in_between = (
+            <>
+                {range(1, nu_pages).map((number) => (
+                    <li
+                        className={
+                            "page-item" +
+                            (current_page == number ? " active" : "")
+                        }
+                        key={number}
+                    >
+                        <a
+                            className="page-link"
+                            onClick={(e) =>
+                                handle_on_click(parseInt(e.target.innerText))
+                            }
+                        >
+                            {number}
+                        </a>
+                    </li>
+                ))}
+            </>
+        );
+    } else if (current_page <= 3) {
+        in_between = (
+            <>
+                {range(1, 3).map((number) => (
+                    <li
+                        className={
+                            "page-item" +
+                            (current_page == number ? " active" : "")
+                        }
+                        key={number}
+                    >
+                        <a
+                            className="page-link"
+                            onClick={(e) =>
+                                handle_on_click(parseInt(e.target.innerText))
+                            }
+                        >
+                            {number}
+                        </a>
+                    </li>
+                ))}
+                <li className="page-item disabled">
+                    <a className="page-link">...</a>
+                </li>
+                <li className="page-item">
+                    <a
+                        className="page-link"
+                        onClick={(e) =>
+                            handle_on_click(parseInt(e.target.innerText))
+                        }
+                    >
+                        {nu_pages}
+                    </a>
+                </li>
+            </>
+        );
+    } else if (current_page >= nu_pages - 2) {
+        in_between = (
+            <>
+                <li className="page-item">
+                    <a className="page-link" onClick={() => handle_on_click(1)}>
+                        1
+                    </a>
+                </li>
+                <li className="page-item disabled">
+                    <a className="page-link">...</a>
+                </li>
+                {range(nu_pages - 2, nu_pages).map((number) => (
+                    <li
+                        className={
+                            "page-item" +
+                            (current_page == number ? " active" : "")
+                        }
+                        key={number}
+                    >
+                        <a
+                            className="page-link"
+                            onClick={(e) =>
+                                handle_on_click(parseInt(e.target.innerText))
+                            }
+                        >
+                            {number}
+                        </a>
+                    </li>
+                ))}
+            </>
+        );
+    } else {
+        in_between = (
+            <>
+                <li className="page-item">
+                    <a className="page-link" onClick={() => handle_on_click(1)}>
+                        1
+                    </a>
+                </li>
+                <li className="page-item disabled">
+                    <a className="page-link">...</a>
+                </li>
+                <li className="page-item active">
+                    <a className="page-link">{current_page}</a>
+                </li>
+                <li className="page-item disabled">
+                    <a className="page-link">...</a>
+                </li>
+                <li className="page-item">
+                    <a
+                        className="page-link"
+                        onClick={() => handle_on_click(nu_pages)}
+                    >
+                        {nu_pages}
+                    </a>
+                </li>
+            </>
+        );
+    }
+    return (
+        <nav aria-label="To dos page navigation">
+            <ul className="pagination justify-content-center mt-3">
+                {first_page}
+                {previous_page}
+                {in_between}
+                {next_page}
+                {last_page}
+            </ul>
+        </nav>
+    );
+}
+
+export function Pagination() {
+    const [nu_pages, set_nu_pages] = useState(0);
+
+    const nu_pages_api = get_nu_pages_function();
+    nu_pages_api((response) => set_nu_pages(response));
+
+    const dispatch = useDispatch();
+
+    const my_filters = useSelector(select_current_filters);
+    const my_sorters = useSelector(select_current_sorting);
+    const my_curr_page = useSelector(select_current_page);
+
+    function handle_on_click(target) {
+        if (my_curr_page == target) return;
+
+        dispatch(change_page({ page: target }));
+        refresh_todos(my_filters, my_sorters, my_curr_page, dispatch);
+    }
+
+    return (
+        <div
+            className="container mt-3 mb-3"
+            style={{
+                border: "2px solid black",
+                textAlign: "center",
+                width: "400px",
+                padding: "15px",
+            }}
+        >
+            {render_pagination(my_curr_page, nu_pages, handle_on_click)}
+        </div>
+    );
+}
diff --git a/src/api/axios_methods.js b/src/api/axios_methods.js
index 822c334..bea8b79 100644
--- a/src/api/axios_methods.js
+++ b/src/api/axios_methods.js
@@ -126,10 +126,10 @@ export function get_todos_page_function() {
 export function get_nu_pages_function() {
     // Return the number of pages in total.
     // GET "/todos/filtSort/pages"
-    return async () => {
+    return async (handler) => {
         try {
             const response = await api.get("/todos/filtSort/pages");
-            return response.data;
+            handler(response.data);
         } catch (err) {
             console.log(err);
         }
diff --git a/src/refreshToDos.js b/src/refreshToDos.js
index a6b1368..250b399 100644
--- a/src/refreshToDos.js
+++ b/src/refreshToDos.js
@@ -29,17 +29,27 @@ export function refresh_todos(my_filters, my_sorters, my_curr_page, dispatch) {
     });
 
     // Get the total number of pages. Change the current page if necessary.
-    const get_nu_pages_api = get_nu_pages_function();
-    const total_pages_api = get_nu_pages_api();
-
-    if (total_pages_api < my_curr_page) {
-        dispatch(
-            change_page({
-                page: total_pages_api,
-            })
-        );
+    function handle_out_of_bounds(total_pages) {
+        if (total_pages == 0) {
+            dispatch(
+                change_page({
+                    page: 1,
+                })
+            );
+        } else if (total_pages < my_curr_page) {
+            dispatch(
+                change_page({
+                    page: total_pages,
+                })
+            );
+        }
     }
 
+    const get_nu_pages_api = get_nu_pages_function();
+    const total_pages_api = get_nu_pages_api((nu_pages) => {
+        handle_out_of_bounds(nu_pages);
+    });
+
     // Delete all current to dos we have stored and retrieve new to dos from API.
     const get_todos_api = get_todos_page_function();