First instance for pagination.

Sorting and Filtering now WON'T be computed on Front End, but on Back
End instead.

1 files changed, 30 insertions, 7 deletions

diff --git a/src/App.jsx b/src/App.jsx
index b39d5d9..9d5cbd8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,20 +3,43 @@ import { Search } from "./ToDo-UI/Search";
 import { NewToDo } from "./ToDo-UI/NewToDo";
 import { ListToDos } from "./ToDo-UI/ListToDo";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
     set_last_id,
     set_todo,
-    refresh_filtered_todos,
+    select_current_filters,
+    select_current_sorting,
 } from "./features/todo/reducer";
 
-import { get_todos_function, get_last_id_function } from "./api/axios_methods";
+import {
+    set_fil_sort_function,
+    get_todos_page_function,
+    get_last_id_function,
+} from "./api/axios_methods";
 
 function App() {
-    const get_todos = get_todos_function();
+    // Set default sorting and filters on back end.
+    const set_fil_sor_api = set_fil_sort_function();
+
+    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],
+        },
+    });
 
+    // Retrieve the first page of our to dos.
+    const get_todos_api = get_todos_page_function();
     const dispatch = useDispatch();
-    function handler(data) {
+
+    function write_todos_redux(data) {
         data.map((todo) => {
             const due_date = new Date(todo.dueDate);
             const offset = due_date.getTimezoneOffset();
@@ -37,10 +60,10 @@ function App() {
                 })
             );
         });
-        dispatch(refresh_filtered_todos());
     }
-    get_todos(handler);
+    get_todos_api(write_todos_redux, { page: 1 });
 
+    // Finally, retrieve the last index used for a to do.
     const last_id_api = get_last_id_function();
     last_id_api((response) => {
         dispatch(