Test new hooks

src/api.ts

@@ -1,80 +1,62 @@
 import { openDB } from "idb";
 import type { DBSchema, IDBPDatabase } from "idb";
 import type { Todo } from "./schema";
 
 interface TodoDB extends DBSchema {
   todos: {
     key: string;
     value: Todo;
   };
 }
 
-let dbInstance: Promise<IDBPDatabase<TodoDB>> | null = null;
+let dbInstancePromise!: Promise<IDBPDatabase<TodoDB>>;
 
-async function initializeDB(): Promise<IDBPDatabase<TodoDB>> {
-  if (!dbInstance) {
-    dbInstance = openDB<TodoDB>("todosDB", 1, {
+function initializeDB(): Promise<IDBPDatabase<TodoDB>> {
+  if (!dbInstancePromise) {
+    dbInstancePromise = openDB<TodoDB>("todosDB", 1, {
       upgrade(db) {
         if (!db.objectStoreNames.contains("todos")) {
           db.createObjectStore("todos", { keyPath: "id" });
         }
       },
     });
   }
-  return dbInstance;
+  return dbInstancePromise;
+}
+
+async function safeExecute<T>(operationName: string, operationFn: () => Promise<T>): Promise<T> {
+  try {
+    return await operationFn();
+  } catch (error) {
+    console.error(`Error during ${operationName}:`, error);
+    throw new Error(`Failed to ${operationName}`);
+  }
 }
 
 export async function getTodos(): Promise<Todo[]> {
-  const db = await initializeDB();
-  return db.getAll("todos");
+  return safeExecute("getTodos", async () => {
+    const db = await initializeDB();
+    return db.getAll("todos");
+  });
 }
 
 export async function addTodo(todo: Todo): Promise<void> {
-  const db = await initializeDB();
-  await db.put("todos", todo);
+  return safeExecute("addTodo", async () => {
+    const db = await initializeDB();
+    await db.put("todos", todo);
+  });
 }
 
 export async function updateTodo(updatedTodo: Todo): Promise<void> {
-  const db = await initializeDB();
-  await db.put("todos", updatedTodo);
+  return safeExecute("updateTodo", async () => {
+    const db = await initializeDB();
+    await db.put("todos", updatedTodo);
+  });
 }
 
 export async function deleteTodo(todoId: string): Promise<void> {
-  const db = await initializeDB();
-  await db.delete("todos", todoId);
-}
-
-export async function getCompletedTodos(): Promise<string[]> {
-  const todos = await getTodos();
-  return todos.filter((todo) => todo.completed).map((todo) => todo.id);
-}
-
-export async function saveCompletedTodos(completedTodos: string[]): Promise<void> {
-  try {
+  return safeExecute("deleteTodo", async () => {
     const db = await initializeDB();
-    const tx = db.transaction("todos", "readwrite");
-    const store = tx.objectStore("todos");
-
-    const updatePromises = completedTodos.map(async (id) => {
-      const todo = await store.get(id);
-      if (todo && !todo.completed) {
-        todo.completed = true;
-        await store.put(todo);
-      }
-    });
-
-    await Promise.all(updatePromises);
-    await tx.done;
-  } catch (error) {
-    console.error("Failed to save completed todos:", error);
-  }
+    await db.delete("todos", todoId);
+  });
 }
-
-export default {
-  getTodos,
-  addTodo,
-  updateTodo,
-  deleteTodo,
-  getCompletedTodos,
-  saveCompletedTodos,
-};

src/components/TodoList.tsx

@@ -1,49 +1,51 @@
+import { useMemo } from "react";
 import clsx from "clsx";
-import type { FC } from "react";
-
 import type { TodoListProps } from "../schema";
-
 import TodoItem from "./TodoItem";
 
-const TodoList: FC<TodoListProps> = ({
+const TodoList = ({
   todos,
   error,
   completedTodos,
   handleDeleteClick,
   handleToggleClick,
-}) => {
-  const completedTodosSet = new Set(completedTodos);
+}: TodoListProps) => {
+  const completedTodosSet = useMemo(
+    () => new Set(completedTodos),
+    [completedTodos]
+  );
 
-  const todoItems = todos.map((todo) => {
-    const isCompleted = completedTodosSet.has(todo.id);
-    return (
+  const content = useMemo(() => {
+    if (error) {
+      return (
+        <div className="py-4 text-center text-red-500 font-medium">
+          Oops! Something went wrong. Please try again later.
+        </div>
+      );
+    }
+
+    if (!todos.length) {
+      return (
+        <div className="py-4 text-center text-gray-500 font-medium">
+          No tasks available. Add a new one to get started!
+        </div>
+      );
+    }
+
+    return todos.map((todo) => (
       <TodoItem
-        key={todo.id}
+        key={todo.text}
         todo={todo}
-        isCompleted={isCompleted}
+        isCompleted={completedTodosSet.has(todo.id)}
         onToggle={() => handleToggleClick(todo.id)}
         onDelete={() => handleDeleteClick(todo.id)}
       />
-    );
-  });
-
-  if (error) {
-    return (
-      <div className="py-4 text-center text-red-500 font-medium">
-        Oops! Something went wrong. Please try again later.
-      </div>
-    );
-  }
+    ));
+  }, [todos, error, completedTodosSet, handleToggleClick, handleDeleteClick]);
 
   return (
     <div className={clsx("overflow-auto h-full", "max-h-screen")}>
-      {todos.length
-        ? todoItems
-        : (
-            <div className="py-4 text-center text-gray-500 font-medium">
-              No tasks available. Add a new one to get started!
-            </div>
-          )}
+      {content}
     </div>
   );
 };