diff options
| -rw-r--r-- | src/App.jsx | 57 | ||||
| -rw-r--r-- | src/ToDo-UI/ListToDo.jsx | 18 | ||||
| -rw-r--r-- | src/features/todo/reducer.js | 13 | ||||
| -rw-r--r-- | src/refreshToDos.js | 67 |
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 }); +} |