First attempt at sorting to do entries.

2 files changed, 116 insertions, 3 deletions

diff --git a/src/ToDo.jsx b/src/ToDo.jsx
index dbbd081..1f290ab 100644
--- 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>&#8593;</span>
+                    </>
+                );
+            case "v":
+                return (
+                    <>
+                        {prefix} <span>&#8595;</span>
+                    </>
+                );
+        }
+    } else {
+        return (
+            <>
+                {prefix} <span>&#8283;</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
index a13810b..bef7f03 100644
--- 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;