Add priority

src/client/src/components/todos/todoItem.tsx

@@ -11,6 +11,22 @@ interface TodoItemProps {
   displayProject: boolean;
 }
 
+function getColorFromPriority(priority: string) {
+  switch (priority) {
+    case "p3":
+      return "bg-red-500";
+
+    case "p2":
+      return "bg-yellow-500";
+
+    case "p1":
+      return "bg-green-500";
+
+    default:
+      throw "No priority matches";
+  }
+}
+
 export const TodoItem: FC<TodoItemProps> = (props) => {
   const [isHovering, setIsHovering] = useState(false);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
@@ -42,6 +58,15 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
               {props.todo.description && (
                 <div className="h-3 w-3 bg-gray-100 dark:border-black border border-gray-300 dark:bg-gray-900 rounded-sm" />
               )}
+              {props.todo.priority && (
+                <div
+                  className={`rounded-md select-none text-xs p-1 text-white font-bold ${getColorFromPriority(
+                    props.todo.priority
+                  )}`}
+                >
+                  {props.todo.priority}
+                </div>
+              )}
               {!props.todo.authorId && (
                 <div className="h-3 w-3 bg-red-500 rounded-sm" />
               )}

src/client/src/components/todos/todoList.tsx

@@ -2,6 +2,7 @@ import { Todo } from "@src/core/entities/todo";
 import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
 import { useUpdateTodo } from "@src/presentation/hooks/socketHooks";
+import { useMemo } from "react";
 
 export const TodoList = (props: {
   todos: Todo[];
@@ -11,27 +12,31 @@ export const TodoList = (props: {
 }) => {
   const { updateTodo } = useUpdateTodo();
 
+  const todos: Todo[] = useMemo(() => {
+    return props.todos
+      .filter((t) => {
+        if (!props.hideDone) return true;
+
+        return t.status == false;
+      })
+      .sort((a, b) => a.created - b.created)
+      .sort((a, b) => b.priority.localeCompare(a.priority));
+  }, [props.todos, props.hideDone]);
+
   return (
     <>
       <ul id="inbox">
-        {props.todos
-          .filter((t) => {
-            if (!props.hideDone) return true;
-
-            return t.status == false;
-          })
-          .sort((a, b) => a.created - b.created)
-          .map((t, i) => (
-            <li key={i}>
-              <TodoItem
-                todo={t}
-                updateTodo={(todo) => {
-                  updateTodo(todo);
-                }}
-                displayProject={!props.hideProject}
-              />
-            </li>
-          ))}
+        {todos.map((t, i) => (
+          <li key={i}>
+            <TodoItem
+              todo={t}
+              updateTodo={(todo) => {
+                updateTodo(todo);
+              }}
+              displayProject={!props.hideProject}
+            />
+          </li>
+        ))}
       </ul>
       <AddTodo project={props.project} />
     </>

src/client/src/core/entities/todo.tsx

@@ -6,6 +6,12 @@ export const StatusState: { done: Done; notDone: NotDone } = {
   notDone: false,
 };
 
+enum Priorities {
+  p1 = "p1",
+  p2 = "p2",
+  p3 = "p3",
+}
+
 export interface Todo {
   id: string;
   title: string;
@@ -14,7 +20,7 @@ export interface Todo {
   project?: string;
   authorId?: string;
   created: number;
-  priority?: string;
+  priority?: Priorities;
 }
 
 export const asTodo = (item: Todo): Todo => {