diff options
Diffstat (limited to '')
| -rw-r--r-- | src/App.jsx | 37 | ||||
| -rw-r--r-- | src/ToDo-UI/Search.jsx | 4 | ||||
| -rw-r--r-- | src/api/axios_methods.js | 49 | ||||
| -rw-r--r-- | src/features/todo/reducer.js | 98 |
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; |