From c95dbbbf5080cf144e07a134c3e30668085d2e41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= Date: Mon, 29 May 2023 00:28:38 -0600 Subject: First instance for pagination. Sorting and Filtering now WON'T be computed on Front End, but on Back End instead. --- src/App.jsx | 37 ++++++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) (limited to 'src/App.jsx') 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( -- cgit v1.2.3