commit 0e96c6939e84ed283ba7229ee9cf8144025c5718
parent d48a429a6cdbfbe798517f409ce05d77a0d635ff
Author: Adrián Oliva <[email protected]>
Date: Fri, 19 May 2023 20:24:40 -0600
First attempt at sorting to do entries.
Diffstat:
2 files changed, 116 insertions(+), 3 deletions(-)
diff --git a/src/ToDo.jsx b/src/ToDo.jsx
@@ -5,8 +5,10 @@ import {
change_done,
remove_todo,
edit_todo,
+ sort_todo,
select_todos,
select_last_index,
+ select_current_sorting,
} from "./features/todo/reducer";
export function NewToDo() {
@@ -180,8 +182,34 @@ export function NewToDo() {
);
}
+function sort_table_header(prefix, current_sorting) {
+ if (prefix.toLowerCase().startsWith(current_sorting.substr(0, 3))) {
+ switch (current_sorting.substr(-1)) {
+ case "^":
+ return (
+ <>
+ {prefix} <span>↑</span>
+ </>
+ );
+ case "v":
+ return (
+ <>
+ {prefix} <span>↓</span>
+ </>
+ );
+ }
+ } else {
+ return (
+ <>
+ {prefix} <span>⁛</span>
+ </>
+ );
+ }
+}
+
export function ListToDos() {
const my_todos = useSelector(select_todos);
+ const my_sorting = useSelector(select_current_sorting);
const dispatch = useDispatch();
const [edit_id, set_edit_id] = useState(-1);
@@ -215,8 +243,28 @@ export function ListToDos() {
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
- <th scope="col">Priority</th>
- <th scope="col">Due Date</th>
+ <th
+ scope="col"
+ onClick={(e) =>
+ dispatch(
+ sort_todo({
+ where_clicked: "priority",
+ })
+ )
+ }
+ >
+ {sort_table_header("Priority", my_sorting)}
+ </th>
+ <th
+ scope="col"
+ onClick={(e) =>
+ dispatch(
+ sort_todo({ where_clicked: "due_date" })
+ )
+ }
+ >
+ {sort_table_header("Due Date", my_sorting)}
+ </th>
<th scope="col">Actions</th>
</tr>
</thead>
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
@@ -5,6 +5,7 @@ export const todo_slice = createSlice({
initialState: {
todos: [],
last_id: 0,
+ current_sorting: "created_time",
},
reducers: {
@@ -48,13 +49,77 @@ export const todo_slice = createSlice({
state.todos[selected_todo].done = action.payload.done;
state.todos[selected_todo].priority = action.payload.priority;
},
+
+ sort_todo: (state, action) => {
+ switch (action.payload.where_clicked) {
+ case "priority":
+ const priority_order = {
+ Low: 1,
+ Medium: 2,
+ High: 3,
+ };
+
+ switch (state.current_sorting) {
+ case "priority-^":
+ state.current_sorting = "priority-v";
+ state.todos.sort(
+ (a, b) =>
+ priority_order[a.priority] -
+ priority_order[b.priority]
+ );
+ break;
+
+ case "priority-v":
+ state.current_sorting = "created_time";
+ state.todos.sort((a, b) =>
+ a.creation_date.localeCompare(b.creation_date)
+ );
+ break;
+
+ default:
+ state.current_sorting = "priority-^";
+ state.todos.sort(
+ (a, b) =>
+ priority_order[b.priority] -
+ priority_order[a.priority]
+ );
+ break;
+ }
+
+ break;
+
+ case "due_date":
+ switch (state.current_sorting) {
+ case "due-date-^":
+ state.current_sorting = "due-date-v";
+ state.todos.sort((a, b) =>
+ a.due_date.localeCompare(b.due_date)
+ );
+ break;
+ case "due-date-v":
+ state.current_sorting = "created_time";
+ state.todos.sort((a, b) =>
+ a.creation_date.localeCompare(b.creation_date)
+ );
+ break;
+ default:
+ state.current_sorting = "due-date-^";
+ state.todos.sort((a, b) =>
+ b.due_date.localeCompare(a.due_date)
+ );
+ break;
+ }
+ }
+ },
},
});
-export const { add_todo, change_done, remove_todo, edit_todo } =
+export const { add_todo, change_done, remove_todo, edit_todo, sort_todo } =
todo_slice.actions;
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 default todo_slice.reducer;
