Pagination now works on to do's list.

Only 10 to dos will be shown at a time. You can sort by priority or due
date and it should work on all of our to dos. Edit and delete also
works.

4 files changed, 95 insertions, 60 deletions

diff --git a/src/App.jsx b/src/App.jsx
index 9d5cbd8..87aa833 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,63 +6,22 @@ import { ListToDos } from "./ToDo-UI/ListToDo";
 import { useDispatch, useSelector } from "react-redux";
 import {
     set_last_id,
-    set_todo,
     select_current_filters,
     select_current_sorting,
+    select_current_page,
 } from "./features/todo/reducer";
 
-import {
-    set_fil_sort_function,
-    get_todos_page_function,
-    get_last_id_function,
-} from "./api/axios_methods";
-
-function App() {
-    // Set default sorting and filters on back end.
-    const set_fil_sor_api = set_fil_sort_function();
+import { get_last_id_function } from "./api/axios_methods";
 
-    const my_filters = useSelector(select_current_filters);
-    const my_sorting = useSelector(select_current_sorting);
-    set_fil_sor_api({
-        filter: {
-            name: my_filters.name,
-            priority: my_filters.priority,
-            state: my_filters.state,
-        },
-        sort: {
-            field: my_sorting.split("/")[0],
-            order: my_sorting.split("/")[1],
-        },
-    });
+import { refresh_todos } from "./refreshToDos";
 
-    // Retrieve the first page of our to dos.
-    const get_todos_api = get_todos_page_function();
+function App() {
     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 write_todos_redux(data) {
-        data.map((todo) => {
-            const due_date = new Date(todo.dueDate);
-            const offset = due_date.getTimezoneOffset();
-
-            dispatch(
-                set_todo({
-                    id: todo.id,
-                    text: todo.text,
-                    due_date:
-                        todo.dueDate != null
-                            ? new Date(due_date - offset * 60 * 1000)
-                                  .toISOString()
-                                  .slice(0, -1)
-                            : "",
-                    done: todo.done,
-                    priority: todo.priority,
-                    creation_date: todo.creationDate,
-                })
-            );
-        });
-    }
-    get_todos_api(write_todos_redux, { page: 1 });
-
+    refresh_todos(my_filters, my_sorters, my_curr_page, dispatch);
     // Finally, retrieve the last index used for a to do.
     const last_id_api = get_last_id_function();
     last_id_api((response) => {
diff --git a/src/ToDo-UI/ListToDo.jsx b/src/ToDo-UI/ListToDo.jsx
index 781f4cd..d57642b 100644
--- a/src/ToDo-UI/ListToDo.jsx
+++ b/src/ToDo-UI/ListToDo.jsx
@@ -5,10 +5,10 @@ import {
     remove_todo,
     edit_todo,
     set_sort_todo,
-    sort_todo,
-    refresh_filtered_todos,
     select_todos,
+    select_current_filters,
     select_current_sorting,
+    select_current_page,
 } from "../features/todo/reducer";
 
 import {
@@ -18,6 +18,8 @@ import {
     set_undone_function,
 } from "../api/axios_methods";
 
+import { refresh_todos } from "../refreshToDos";
+
 function sort_table_header(prefix, current_sorting) {
     if (prefix.toLowerCase().startsWith(current_sorting.substr(0, 3))) {
         switch (current_sorting.substr(-1)) {
@@ -49,7 +51,7 @@ function sort_table_header(prefix, current_sorting) {
 function list_of_todos(edit_button, delete_button) {
     const dispatch = useDispatch();
     const my_todos = useSelector(select_todos);
-    const my_sorting = useSelector(select_current_sorting);
+    const my_sorters = useSelector(select_current_sorting);
 
     function handle_sort_todos(where_clicked) {
         dispatch(
@@ -57,8 +59,6 @@ function list_of_todos(edit_button, delete_button) {
                 where_clicked: where_clicked,
             })
         );
-        dispatch(sort_todo());
-        dispatch(refresh_filtered_todos());
     }
 
     const set_done_api = set_done_function();
@@ -79,7 +79,7 @@ function list_of_todos(edit_button, delete_button) {
                 <th scope="col">Done</th>
                 <th scope="col">Name</th>
                 <th scope="col" onClick={() => handle_sort_todos("priority")}>
-                    {sort_table_header("Priority", my_sorting)}
+                    {sort_table_header("Priority", my_sorters)}
                 </th>
                 <th
                     scope="col"
@@ -87,7 +87,7 @@ function list_of_todos(edit_button, delete_button) {
                         handle_sort_todos("due_date");
                     }}
                 >
-                    {sort_table_header("Due Date", my_sorting)}
+                    {sort_table_header("Due Date", my_sorters)}
                 </th>
                 <th scope="col">Actions</th>
             </tr>
@@ -115,7 +115,6 @@ function list_of_todos(edit_button, delete_button) {
                                             done: e.target.checked,
                                         })
                                     );
-                                    dispatch(refresh_filtered_todos());
                                 }}
                             ></input>
                         </div>
@@ -221,8 +220,6 @@ export function ListToDos() {
                 priority: edit_priority,
             })
         );
-        dispatch(sort_todo());
-        dispatch(refresh_filtered_todos());
         handle_exit_modal();
     }
 
@@ -256,7 +253,6 @@ export function ListToDos() {
                 onClick={(e) => {
                     remove_todo_api({ id: item.id });
                     dispatch(remove_todo(item.id));
-                    dispatch(refresh_filtered_todos());
                 }}
             >
                 Delete
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
index 210fb05..8a2e9b8 100644
--- a/src/features/todo/reducer.js
+++ b/src/features/todo/reducer.js
@@ -14,6 +14,8 @@ export const todo_slice = createSlice({
             priority: "All",
             state: "All",
         },
+
+        page_selected: 1,
     },
 
     reducers: {
@@ -128,6 +130,14 @@ export const todo_slice = createSlice({
                 state: action.payload.state,
             };
         },
+
+        empty_todos: (state) => {
+            state.todos = [];
+        },
+
+        change_page: (state, action) => {
+            state.page_selected = action.payload.page;
+        },
     },
 });
 
@@ -140,6 +150,8 @@ export const {
     edit_todo,
     set_sort_todo,
     set_filters,
+    empty_todos,
+    change_page,
 } = todo_slice.actions;
 
 export const select_todos = (state) => state.todo_list.todos;
@@ -148,5 +160,6 @@ export const select_current_sorting = (state) =>
     state.todo_list.current_sorting;
 export const select_current_filters = (state) =>
     state.todo_list.current_filters;
+export const select_current_page = (state) => state.todo_list.page_selected;
 
 export default todo_slice.reducer;
diff --git a/src/refreshToDos.js b/src/refreshToDos.js
new file mode 100644
index 0000000..c599606
--- /dev/null
+++ b/src/refreshToDos.js
@@ -0,0 +1,67 @@
+import { set_todo, empty_todos, change_page } from "./features/todo/reducer";
+
+import {
+    set_fil_sort_function,
+    get_todos_page_function,
+    get_nu_pages_function,
+} from "./api/axios_methods";
+
+export function refresh_todos(my_filters, my_sorters, my_curr_page, dispatch) {
+    // Call the API to refresh sorters and filters.
+    const set_fil_sor_api = set_fil_sort_function();
+
+    set_fil_sor_api({
+        filter: {
+            name: my_filters.name,
+            priority: my_filters.priority,
+            state: my_filters.state,
+        },
+        sort: {
+            field: my_sorters.split("/")[0],
+            order: my_sorters.split("/")[1],
+        },
+    });
+
+    // 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,
+            })
+        );
+    }
+
+    // Delete all current to dos we have stored and retrieve new to dos from API.
+    const get_todos_api = get_todos_page_function();
+
+    function handle_new_todos_page(todos_list) {
+        dispatch(empty_todos());
+        todos_list.map((todo) => {
+            // API stores dates in ISO format and in GMT. We have to add the
+            // timezone offset.
+            const due_date = new Date(todo.dueDate);
+            const offset = due_date.getTimezoneOffset();
+
+            dispatch(
+                set_todo({
+                    id: todo.id,
+                    text: todo.text,
+                    due_date:
+                        todo.dueDate != null
+                            ? new Date(due_date - offset * 60 * 1000)
+                                  .toISOString()
+                                  .slice(0, -1)
+                            : "",
+                    done: todo.done,
+                    priority: todo.priority,
+                    creation_date: todo.creationDate,
+                })
+            );
+        });
+    }
+
+    get_todos_api(handle_new_todos_page, { page: my_curr_page });
+}