Add redux

src/client/src/components/common/buttons/primaryButton.tsx

@@ -10,7 +10,7 @@ export const PrimaryButton: FC<ButtonHTMLAttributes<HTMLButtonElement>> = (
     tabIndex={2}
     disabled={props.disabled}
     className={
-      "base-button bg-accent-500 disabled:bg-accent-800 active:bg-accent-400 border-none text-white " +
+      "base-button bg-accent-500 disabled:bg-accent-800 dark:bg-accent-500 active:bg-accent-400 border-none text-white " +
       props.className
     }
   >

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

@@ -3,6 +3,7 @@ import { FC, useState } from "react";
 import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
 import Tippy from "@tippyjs/react";
 import Link from "next/link";
+import { todosApi } from "@src/infrastructure/apis/todosApi";
 
 interface TodoItemProps {
   todo: Todo;
@@ -14,10 +15,15 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
   const [isHovering, setIsHovering] = useState(false);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
 
+  const prefetchTodo = todosApi.usePrefetch("getTodoById");
+
   return (
     <div
       className="py-3 border-b border-gray-300 dark:border-gray-600 relative"
-      onMouseEnter={() => setIsHovering(true)}
+      onMouseEnter={() => {
+        prefetchTodo(props.todo.id);
+        setIsHovering(true);
+      }}
       onMouseLeave={() => setIsHovering(false)}
       onFocus={() => setIsHovering(true)}
     >
@@ -32,7 +38,7 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
           <div className="flex flex-row justify-between items-end">
             <div className="flex flex-row">
               {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"/>
+                <div className="h-3 w-3 bg-gray-100 dark:border-black border border-gray-300 dark:bg-gray-900 rounded-sm" />
               )}
             </div>
             {props.displayProject && props.todo.project && (

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

@@ -1,7 +1,7 @@
 import { Todo } from "@src/core/entities/todo";
 import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
-import { useUpdateTodoState } from "@src/presentation/hooks/socketHooks";
+import { useUpdateTodo } from "@src/presentation/hooks/socketHooks";
 
 export const TodoList = (props: {
   todos: Todo[];
@@ -9,19 +9,23 @@ export const TodoList = (props: {
   hideProject: boolean;
   project: string;
 }) => {
-  const { updateTodoState } = useUpdateTodoState();
+  const { updateTodo } = useUpdateTodo();
 
   return (
     <>
       <ul id="inbox">
         {props.todos
-          .filter((t) => t.status == false)
+          .filter((t) => {
+            if (!props.hideDone) return true;
+
+            return t.status == false;
+          })
           .map((t, i) => (
             <li key={i}>
               <TodoItem
                 todo={t}
                 updateTodo={(todo) => {
-                  updateTodoState(todo.id, todo.status);
+                  updateTodo(todo);
                 }}
                 displayProject={!props.hideProject}
               />