First instance for pagination.

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

4 files changed, 96 insertions, 92 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(
diff --git a/src/ToDo-UI/Search.jsx b/src/ToDo-UI/Search.jsx
index dec1f29..e264929 100644
--- a/src/ToDo-UI/Search.jsx
+++ b/src/ToDo-UI/Search.jsx
@@ -69,8 +69,8 @@ export function Search() {
                             <option value="All" defaultValue>
                                 All
                             </option>
-                            <option value="1">Done</option>
-                            <option value="0">Undone</option>
+                            <option value="Done">Done</option>
+                            <option value="Undone">Undone</option>
                         </select>
                     </div>
                 </div>
diff --git a/src/api/axios_methods.js b/src/api/axios_methods.js
index f983157..822c334 100644
--- a/src/api/axios_methods.js
+++ b/src/api/axios_methods.js
@@ -87,6 +87,55 @@ export function set_undone_function() {
     };
 }
 
+// setFiltersAndSorters().
+export function set_fil_sort_function() {
+    // Set filters and sorters for our to dos.
+    // POST "/todos/setFiltSort"
+    return async (data) => {
+        try {
+            await api.post("/todos/setFiltSort", {
+                filters: {
+                    name: data.filter.name,
+                    priority: data.filter.priority,
+                    done: data.filter.state,
+                },
+                sortField: data.sort.field,
+                sortOrder: data.sort.order,
+            });
+        } catch (err) {
+            console.log(err);
+        }
+    };
+}
+
+// getPage().
+export function get_todos_page_function() {
+    // Return a page of max 10 to dos with sorting and filters added.
+    // GET "/todos/filtSort/{page}"
+    return async (handler, data) => {
+        try {
+            const response = await api.get(`/todos/filtSort/${data.page}`);
+            handler(response.data);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+}
+
+// getNumberOfPages().
+export function get_nu_pages_function() {
+    // Return the number of pages in total.
+    // GET "/todos/filtSort/pages"
+    return async () => {
+        try {
+            const response = await api.get("/todos/filtSort/pages");
+            return response.data;
+        } catch (err) {
+            console.log(err);
+        }
+    };
+}
+
 // giveMeLastID().
 export function get_last_id_function() {
     // Retrieve last index used.
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
index 118e482..210fb05 100644
--- a/src/features/todo/reducer.js
+++ b/src/features/todo/reducer.js
@@ -6,7 +6,7 @@ export const todo_slice = createSlice({
         last_id: 0,
         todos: [],
 
-        current_sorting: "created_time",
+        current_sorting: "Id/ASC",
 
         filtered_todos: [],
         current_filters: {
@@ -90,112 +90,44 @@ export const todo_slice = createSlice({
             switch (action.payload.where_clicked) {
                 case "priority":
                     switch (state.current_sorting) {
-                        case "priority-^":
-                            state.current_sorting = "priority-v";
+                        case "Priority/DESC":
+                            state.current_sorting = "Priority/ASC";
                             break;
 
-                        case "priority-v":
-                            state.current_sorting = "created_time";
+                        case "Priority/ASC":
+                            state.current_sorting = "Id/ASC";
                             break;
 
                         default:
-                            state.current_sorting = "priority-^";
+                            state.current_sorting = "Priority/DESC";
                             break;
                     }
                     break;
 
                 case "due_date":
                     switch (state.current_sorting) {
-                        case "due-date-^":
-                            state.current_sorting = "due-date-v";
+                        case "DueDate/DESC":
+                            state.current_sorting = "DueDate/ASC";
                             break;
 
-                        case "due-date-v":
-                            state.current_sorting = "created_time";
+                        case "DueDate/ASC":
+                            state.current_sorting = "Id/ASC";
                             break;
 
                         default:
-                            state.current_sorting = "due-date-^";
+                            state.current_sorting = "DueDate/DESC";
                             break;
                     }
             }
         },
 
-        sort_todo: (state) => {
-            const priority_order = {
-                Low: 1,
-                Medium: 2,
-                High: 3,
-            };
-            switch (state.current_sorting) {
-                case "priority-^":
-                    state.todos.sort(
-                        (a, b) =>
-                            priority_order[b.priority] -
-                            priority_order[a.priority]
-                    );
-                    break;
-
-                case "priority-v":
-                    state.todos.sort(
-                        (a, b) =>
-                            priority_order[a.priority] -
-                            priority_order[b.priority]
-                    );
-                    break;
-
-                case "due-date-^":
-                    state.todos.sort((a, b) =>
-                        b.due_date.localeCompare(a.due_date)
-                    );
-                    break;
-
-                case "due-date-v":
-                    state.todos.sort((a, b) =>
-                        a.due_date.localeCompare(b.due_date)
-                    );
-                    break;
-
-                default:
-                    state.todos.sort((a, b) =>
-                        a.creation_date.localeCompare(b.creation_date)
-                    );
-                    break;
-            }
-        },
-
         set_filters: (state, action) => {
             state.current_filters = {
                 name: action.payload.name,
                 priority: action.payload.priority,
-                state: action.payload.state, // True is "1" and False is "0".
+                state: action.payload.state,
             };
         },
-
-        refresh_filtered_todos: (state) => {
-            state.filtered_todos = [...state.todos];
-
-            // If name, filter by names.
-            if (state.current_filters.name.length != 0) {
-                state.filtered_todos = state.filtered_todos.filter((todo) =>
-                    todo.text.includes(state.current_filters.name)
-                );
-            }
-
-            // If priority != all, filter by priorities.
-            if (state.current_filters.priority != "All") {
-                state.filtered_todos = state.filtered_todos.filter(
-                    (todo) => todo.priority === state.current_filters.priority
-                );
-            }
-
-            // If state != All, filter by current state.
-            if (state.current_filters.state != "All") {
-                state.filtered_todos = state.filtered_todos.filter(
-                    (todo) => todo.done == state.current_filters.state
-                );
-            }
-        },
     },
 });
 
@@ -207,14 +139,14 @@ export const {
     remove_todo,
     edit_todo,
     set_sort_todo,
-    sort_todo,
     set_filters,
-    refresh_filtered_todos,
 } = todo_slice.actions;
 
-export const select_todos = (state) => state.todo_list.filtered_todos;
+export const select_todos = (state) => state.todo_list.todos;
 export const select_last_index = (state) => state.todo_list.last_id;
 export const select_current_sorting = (state) =>
     state.todo_list.current_sorting;
+export const select_current_filters = (state) =>
+    state.todo_list.current_filters;
 
 export default todo_slice.reducer;