Finished details on sorting.

Now it sorts after events like "adding new to do" and "edit a to do."

2 files changed, 70 insertions, 41 deletions

diff --git a/src/ToDo.jsx b/src/ToDo.jsx
index 1f290ab..79d6903 100644
--- a/src/ToDo.jsx
+++ b/src/ToDo.jsx
@@ -5,6 +5,7 @@ import {
     change_done,
     remove_todo,
     edit_todo,
+    set_sort_todo,
     sort_todo,
     select_todos,
     select_last_index,
@@ -168,7 +169,8 @@ export function NewToDo() {
                                                 new Date().toString(),
                                         })
                                     ),
-                                        handle_exit_modal();
+                                        dispatch(sort_todo());
+                                    handle_exit_modal();
                                 }}
                                 data-bs-dismiss="modal"
                             >
@@ -245,23 +247,27 @@ export function ListToDos() {
                             <th scope="col">Name</th>
                             <th
                                 scope="col"
-                                onClick={(e) =>
+                                onClick={(e) => {
                                     dispatch(
-                                        sort_todo({
+                                        set_sort_todo({
                                             where_clicked: "priority",
                                         })
-                                    )
-                                }
+                                    ),
+                                        dispatch(sort_todo());
+                                }}
                             >
                                 {sort_table_header("Priority", my_sorting)}
                             </th>
                             <th
                                 scope="col"
-                                onClick={(e) =>
+                                onClick={(e) => {
                                     dispatch(
-                                        sort_todo({ where_clicked: "due_date" })
-                                    )
-                                }
+                                        set_sort_todo({
+                                            where_clicked: "due_date",
+                                        })
+                                    ),
+                                        dispatch(sort_todo());
+                                }}
                             >
                                 {sort_table_header("Due Date", my_sorting)}
                             </th>
@@ -454,6 +460,7 @@ export function ListToDos() {
                                             priority: edit_priority,
                                         })
                                     ),
+                                        dispatch(sort_todo()),
                                         handle_exit_modal();
                                 }}
                                 data-bs-dismiss="modal"
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
index bef7f03..5fafb6d 100644
--- a/src/features/todo/reducer.js
+++ b/src/features/todo/reducer.js
@@ -50,72 +50,94 @@ export const todo_slice = createSlice({
             state.todos[selected_todo].priority = action.payload.priority;
         },
 
-        sort_todo: (state, action) => {
+        set_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;
                     }
             }
         },
+
+        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;
+            }
+        },
     },
 });
 
-export const { add_todo, change_done, remove_todo, edit_todo, sort_todo } =
-    todo_slice.actions;
+export const {
+    add_todo,
+    change_done,
+    remove_todo,
+    edit_todo,
+    set_sort_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;