Fix everything

src/components/dialogModal/DialogModal.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Dialog,
   DialogContent,
@@ -11,47 +10,54 @@ import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import useTodo from "../../store";
 
-export default function DialogModal({ children, id, text }) {
-  const { handleTodo, todo, setTodo, isOpen, setIsOpen } = useTodo(
-    (state) => state
-  );
-  const handleClosing = (e) => {
-    if (id) e.preventDefault();
+export default function DialogModal({ children, defaultTodo }) {
+  const {
+    handleTodo,
+    // create todo
+    todo,
+    setTodo,
+    isOpen,
+    setIsOpen,
+    // update todo
+    selectedTodo,
+    setSelectedTodo,
+  } = useTodo((state) => state);
+  const open = defaultTodo ? defaultTodo.id === selectedTodo?.id : isOpen;
+  const handleOpenChange = (nextOpen) => {
+    if (defaultTodo) {
+      setSelectedTodo(nextOpen ? defaultTodo : null);
+      setTodo(nextOpen ? defaultTodo.text : "");
+      return;
+    }
+
+    setIsOpen(nextOpen);
+    setTodo(nextOpen ? todo : "");
   };
+
   return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={() => {
-        setTodo("");
-        setIsOpen();
-      }}
-    >
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger>{children}</DialogTrigger>
-      <DialogContent
-        className="max-w-[400px]"
-        onEscapeKeyDown={(e) => handleClosing(e)}
-        onInteractOutside={(e) => handleClosing(e)}
-      >
+      <DialogContent className="max-w-[400px]">
         <DialogHeader>
           <DialogTitle className="bold text-[calc(1.25rem+.5vw)]">
-            <big>{id ? "Update Task" : "Add Task"}</big>
+            <big>{selectedTodo?.id ? "Update Task" : "Add Task"}</big>
           </DialogTitle>
         </DialogHeader>
         <Input
           className="font-[poppins]"
           placeholder="Enter the task..."
-          defaultValue={text}
+          value={todo}
           onChange={(e) => setTodo(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter") handleTodo(todo.trim(), id);
+            if (e.key === "Enter") handleTodo(todo.trim(), selectedTodo?.id);
           }}
         />
         <DialogFooter>
           <Button
             className="text-[calc(1rem+.5vw)] mx-auto w-[min(90%,10rem)]"
-            onClick={() => handleTodo(todo.trim(), id)}
+            onClick={() => handleTodo(todo.trim(), selectedTodo?.id)}
           >
-            {id ? "Update" : "Add"}
+            {selectedTodo?.id ? "Update" : "Add"}
           </Button>
         </DialogFooter>
       </DialogContent>

src/components/tooltip-dialog-demo/index.js

@@ -0,0 +1 @@
+export * from "./tooltip-dialog-demo";

src/components/tooltip-dialog-demo/tooltip-dialog-demo.jsx

@@ -0,0 +1,74 @@
+import { forwardRef } from "react";
+import * as TooltipShadcn from "../ui/tooltip";
+import * as DialogShadcn from "../ui/dialog";
+import * as InputShadcn from "../ui/input";
+import * as ButtonShadcn from "../ui/button";
+import * as LabelShadcn from "../ui/label";
+
+export const Tooltip = forwardRef((props, ref) => {
+  return (
+    <TooltipShadcn.TooltipProvider>
+      <TooltipShadcn.Tooltip ref={ref} {...props} />
+    </TooltipShadcn.TooltipProvider>
+  );
+});
+
+export const TooltipTrigger = forwardRef((props, ref) => {
+  return <TooltipShadcn.TooltipTrigger ref={ref} {...props} asChild />;
+});
+
+export const TooltipContent = forwardRef((props, ref) => {
+  return <TooltipShadcn.TooltipContent ref={ref} {...props} />;
+});
+
+export function TooltipDialogDemo() {
+  return (
+    <Tooltip>
+      <DialogShadcn.Dialog>
+        <DialogShadcn.DialogTrigger asChild>
+          <TooltipTrigger>
+            <ButtonShadcn.Button variant="outline">
+              Edit Profile
+            </ButtonShadcn.Button>
+          </TooltipTrigger>
+        </DialogShadcn.DialogTrigger>
+        <DialogShadcn.DialogContent className="sm:max-w-[425px]">
+          <DialogShadcn.DialogHeader>
+            <DialogShadcn.DialogTitle>Edit profile</DialogShadcn.DialogTitle>
+            <DialogShadcn.DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogShadcn.DialogDescription>
+          </DialogShadcn.DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <LabelShadcn.Label htmlFor="name" className="text-right">
+                Name
+              </LabelShadcn.Label>
+              <InputShadcn.Input
+                id="name"
+                value="Pedro Duarte"
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <LabelShadcn.Label htmlFor="username" className="text-right">
+                Username
+              </LabelShadcn.Label>
+              <InputShadcn.Input
+                id="username"
+                value="@peduarte"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogShadcn.DialogFooter>
+            <ButtonShadcn.Button type="submit">
+              Save changes
+            </ButtonShadcn.Button>
+          </DialogShadcn.DialogFooter>
+        </DialogShadcn.DialogContent>
+      </DialogShadcn.Dialog>
+      <TooltipContent>Just a random tooltip</TooltipContent>
+    </Tooltip>
+  );
+}

src/components/ui/alert.jsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

src/components/ui/label.jsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

src/features/todos/addTodo/AddTodo.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from "react";
 import { Input } from "../../../components/ui/input";
 import { Button } from "../../../components/ui/button";
 import useTodo from "../../../store";
@@ -11,6 +10,7 @@ function AddTodo({ inputRef }) {
   const handleSubmit = (e) => {
     e.preventDefault();
     handleTodo(todo.trim());
+    setTodo("");
   };
 
   return (

src/features/todos/list/Todos.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import useTodo from "../../../store";
 import { CheckBoxEle, EditTodoEle, DeleteTodoEle } from "./TodosEle";
@@ -34,29 +33,32 @@ function TodosList() {
             {todos
               .sort((a, b) => (a.status === b.status ? 0 : a.status ? 1 : -1))
               .map((todo, pos) => {
-                const { text, id, status } = todo;
                 return (
-                  <Draggable key={id} draggableId={`${id}`} index={pos}>
+                  <Draggable
+                    key={todo.id}
+                    draggableId={`${todo.id}`}
+                    index={pos}
+                  >
                     {(provided) => (
                       <li
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                         ref={provided.innerRef}
                         className={`flex items-center shadow justify-between text-[calc(1.25rem+.5vw)] p-2 border hover:border-yellow-500 rounded grow max-w-[90dvw] ${
-                          status
+                          todo.status
                             ? "line-through text-gray-500 hover:border-yellow-200"
                             : ""
                         }`}
                       >
-                        <CheckBoxEle status={status} id={id} />
+                        <CheckBoxEle todo={todo} />
                         <span
                           className="flex-grow text-center mx-8"
-                          onClick={() => toggleTodoStatus(id)}
+                          onClick={() => toggleTodoStatus(todo.id)}
                         >
-                          {capitalize(text)}
+                          {todo.text}
                         </span>
-                        <EditTodoEle text={text} id={id} />
-                        <DeleteTodoEle status={status} id={id} />
+                        <EditTodoEle todo={todo} />
+                        <DeleteTodoEle todo={todo} />
                       </li>
                     )}
                   </Draggable>

src/features/todos/list/TodosEle.jsx

@@ -1,49 +1,61 @@
-import React from "react";
 import { Checkbox } from "../../../components/ui/checkbox";
 import { TrashIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import DialogModal from "../../../components/dialogModal";
 import useTodo from "../../../store";
 import ToolTipComp from "../../../components/toolTip";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "../../../components/tooltip-dialog-demo";
 
-export const CheckBoxEle = ({ status, id }) => {
+export const CheckBoxEle = ({ todo }) => {
   const { toggleTodoStatus } = useTodo((state) => state);
-  const Content = () => <p>{status ? `Uncheck` : `Check`}</p>;
+  const Content = () => <p>{todo.status ? `Uncheck` : `Check`}</p>;
   return (
     <ToolTipComp Content={() => <Content />}>
       <Checkbox
         className={`hover:border-green-800 ml-1 min-h-[1.5rem] min-w-[1.5rem] ${
-          status ? "border-green-800" : ""
+          todo.status ? "border-green-800" : ""
         }`}
-        checked={status}
-        onCheckedChange={() => toggleTodoStatus(id)}
+        checked={todo.status}
+        onCheckedChange={() => toggleTodoStatus(todo.id)}
       />
     </ToolTipComp>
   );
 };
 
-export const DeleteTodoEle = ({ status, id }) => {
+export const DeleteTodoEle = ({ todo }) => {
   const { removeTodo } = useTodo((state) => state);
   const Content = () => <p>Delete this task</p>;
   return (
     <ToolTipComp Content={() => <Content />}>
       <TrashIcon
         className={`min-h-[1.5rem] min-w-[1.5rem] mt-1 ml-4 cursor-pointer ${
-          status ? "text-red-800" : "hover:text-red-800"
+          todo.status ? "text-red-800" : "hover:text-red-800"
         }`}
-        onClick={() => removeTodo(id)}
+        onClick={() => removeTodo(todo.id)}
       />
     </ToolTipComp>
   );
 };
 
-export const EditTodoEle = ({ id, text }) => {
-  const ToolTipContent = () => <p>Update this task</p>;
+export const EditTodoEle = ({ todo }) => {
+  // const ToolTipContent = () => <p>Update this task</p>;
+
+  // Uncomment this to try tooltip + dialog + demo
+  // return <TooltipDialogDemo />
 
   return (
-    <DialogModal id={id} text={text}>
-      <ToolTipComp Content={() => <ToolTipContent />}>
-        <Pencil2Icon className="min-h-[1.5rem] min-w-[1.5rem] cursor-pointer hover:text-rose-500" />
-      </ToolTipComp>
-    </DialogModal>
+    <Tooltip>
+      <DialogModal defaultTodo={todo}>
+        <TooltipTrigger>
+          <Pencil2Icon className="min-h-[1.5rem] min-w-[1.5rem] cursor-pointer hover:text-rose-500" />
+        </TooltipTrigger>
+      </DialogModal>
+      <TooltipContent>
+        <p>Update this task</p>
+      </TooltipContent>
+    </Tooltip>
   );
 };

src/pages/Todos/Todo.jsx

@@ -1,31 +1,20 @@
-import React, { useRef } from "react";
 import AddTodo from "../../features/todos/addTodo";
 import ClearAllTodos from "../../features/todos/ClearAllTodos";
 import Todos from "../../features/todos/list/Todos";
 import Theme from "../../features/Theme";
 import Tip from "../../features/Tip";
-import useTodo from "../../store";
 
 function Todo() {
-  const { setTodo } = useTodo((state) => state);
-  const inputRef = useRef();
-  const handleClickOutside = (event) => {
-    if (inputRef.current && !inputRef.current.contains(event.target))
-      setTodo("");
-  };
   return (
-    <main
-      onClick={(e) => handleClickOutside(e)}
-      className="min-h-[100svh] lg:mx-[calc(5rem+5dvw)] relative flex flex-col items-center select-none"
-    >
+    <main className="min-h-[100svh] lg:mx-[calc(5rem+5dvw)] relative flex flex-col items-center select-none">
       <Theme />
       <Tip />
 
       <h1 className="text-[calc(3rem+2.5vw)] mt-[calc(5rem+5vh)] font-[poppins] font-bold text-center px-4">
         Just do it.<span className="animate-pulse">|</span>
       </h1>
 
-      <AddTodo inputRef={inputRef} />
+      <AddTodo />
 
       <Todos />
 

src/store.jsx

@@ -37,6 +37,8 @@ const todo = (set, get) => ({
   },
   todo: "",
   setTodo: (todo) => set({ todo }),
+  selectedTodo: null,
+  setSelectedTodo: (selectedTodo) => set({ selectedTodo }),
   // Modal control
   isOpen: false,
   setIsOpen: (isOpen) => set({ isOpen }),
@@ -51,6 +53,7 @@ const todo = (set, get) => ({
         }
         get().setTodo("");
         get().setIsOpen(false);
+        get().setSelectedTodo(null);
       } else alert("Same task already exists");
     }
   },