Adding priority

src/client/src/components/todos/add/addPriorityButton.tsx

@@ -0,0 +1,54 @@
+import { ButtonHTMLAttributes, FC, useState } from "react";
+import { OutlinedButton } from "@src/components/common/buttons/outlinedButton";
+import Tippy from "@tippyjs/react";
+
+interface AddPriorityButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  initialPriority?: string;
+  onPriorityChanged: (project: string) => void;
+}
+
+export const AddPriorityButton: FC<AddPriorityButtonProps> = (props) => {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  return (
+    <Tippy
+      placement="bottom"
+      visible={menuIsOpen}
+      onClickOutside={() => {
+        setMenuIsOpen(false);
+      }}
+      delay={0}
+      interactive={true}
+      duration={0}
+      content={
+        <div
+          className="py-2 px-2 bg-white dark:bg-gray-700 border border-accent-500 rounded-md flex flex-col gap-4"
+          tabIndex={0}
+        >
+          <div className="space-y-2">
+            {["p1", "p2", "p3"].map((p) => (
+              <div key={p}>
+                <button
+                  type="button"
+                  className="whitespace-nowrap py-1 px-4 dark:text-white dark:bg-gray-500 rounded-sm"
+                  onClick={() => props.onPriorityChanged(p)}
+                >
+                  {p}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      }
+    >
+      <span>
+        <OutlinedButton
+          className="whitespace-nowrap"
+          onClick={() => setMenuIsOpen(true)}
+        >
+          {props.children || "Add Priority"}
+        </OutlinedButton>
+      </span>
+    </Tippy>
+  );
+};

src/client/src/components/todos/add/addTodoForm.tsx

@@ -4,19 +4,26 @@ import { PrimaryButton } from "@src/components/common/buttons/primaryButton";
 import { TodoShortForm } from "@src/components/todos/collapsed/todoShortForm";
 
 export const AddTodoForm: FC<{
-  onAdd: (todoName: string, project: string, description: string) => void;
+  onAdd: (
+    todoName: string,
+    project: string,
+    description: string,
+    priority: string
+  ) => void;
   onClose: () => void;
   project: string;
+  priority: string;
 }> = ({ onAdd, onClose, ...props }) => {
   const [todoName, setTodoName] = useState("");
   const [todoDescription, setTodoDescription] = useState("");
   const [project, setProject] = useState(props.project);
+  const [priority, setPriority] = useState(props.priority);
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        onAdd(todoName, project, todoDescription);
+        onAdd(todoName, project, todoDescription, priority);
         setTodoName("");
         setTodoDescription("");
       }}
@@ -25,6 +32,8 @@ export const AddTodoForm: FC<{
         <TodoShortForm
           project={project}
           onProjectChanged={(p) => setProject(p)}
+          priority={priority}
+          onPriorityChanged={setPriority}
           name={todoName}
           onNameChange={(e) => setTodoName(e.target.value)}
           description={todoDescription}

src/client/src/components/todos/addTodo.tsx

@@ -22,8 +22,9 @@ export function AddTodo(props: { project: string }) {
   return (
     <AddTodoForm
       project={props.project}
-      onAdd={(todoName, project, description) => {
-        createTodo(todoName, project, description);
+      priority={""}
+      onAdd={(todoName, project, description, priority) => {
+        createTodo(todoName, description, project, priority);
       }}
       onClose={() => setCollapsed(CollapsedState.collapsed)}
     />

src/client/src/components/todos/collapsed/todoShortForm.tsx

@@ -1,9 +1,12 @@
 import TextareaAutosize from "react-textarea-autosize";
 import { AddProjectButton } from "@src/components/todos/add/addProjectButton";
+import { AddPriorityButton } from "@src/components/todos/add/addPriorityButton";
 
 export const TodoShortForm = (props: {
   project: string;
   onProjectChanged: (project: string) => void;
+  priority: string;
+  onPriorityChanged: (project: string) => void;
   name: string;
   onNameChange: (e) => void;
   description: string;
@@ -34,20 +37,24 @@ export const TodoShortForm = (props: {
           minRows={3}
         />
       </div>
-      <div className="flex flex-row pb-1">
-        <AddProjectButton
-          onProjectChanged={props.onProjectChanged}
-          initialProject={props.project}
-        >
-          {props.project}
-        </AddProjectButton>
-        <AddProjectButton
-          onProjectChanged={props.onProjectChanged}
-          initialProject={props.project}
-        >
-          {props.project}
-        </AddProjectButton>
-        <div className="flex-grow w-1/2" />
+      <div className="flex  flex-col sm:flex-row pb-1 gap-2 justify-between">
+        <div>
+          <AddProjectButton
+            onProjectChanged={props.onProjectChanged}
+            initialProject={props.project}
+          >
+            {props.project}
+          </AddProjectButton>
+        </div>
+
+        <div>
+          <AddPriorityButton
+            onPriorityChanged={props.onPriorityChanged}
+            initialPriority={props.priority}
+          >
+            {props.priority}
+          </AddPriorityButton>
+        </div>
       </div>
     </div>
   </div>

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

@@ -14,6 +14,7 @@ export interface Todo {
   project?: string;
   authorId?: string;
   created: number;
+  priority?: string;
 }
 
 export const asTodo = (item: Todo): Todo => {

src/client/src/pages/index.tsx

@@ -55,7 +55,7 @@ const HomePage = () => {
               />
             </div>
           ))}
-        {data && data.length === 0 && (
+        {onlyActiveTodos && onlyActiveTodos.length === 0 && (
           <div className="space-y-4">
             <PageHeading title="You're done!" />
             <AddTodo project={""} />

src/client/src/presentation/hooks/socketHooks.tsx

@@ -18,7 +18,12 @@ export const useCreateTodo = () => {
   const [createTodo, { isLoading }] = todosApi.useCreateTodoMutation();
 
   return {
-    createTodo: (todoName: string, project: string, description: string) => {
+    createTodo: (
+      todoName: string,
+      description: string,
+      project?: string,
+      priority?: string
+    ) => {
       createTodo({
         id: nanoid(),
         created: 0,
@@ -26,6 +31,7 @@ export const useCreateTodo = () => {
         title: todoName,
         project,
         description,
+        priority,
       });
     },
   };