chore: update API

change IDB to CloudFlare Worker

.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-list-vite",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "packageManager": "[email protected]",
   "description": "A user-friendly and responsive Todo List web application developed using React and Vite",
@@ -32,7 +32,7 @@
     "@hookform/resolvers": "^4.0.0",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.4",
-    "idb": "^8.0.2",
+    "got": "^14.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",

src/components/TodoItem.tsx

@@ -4,22 +4,21 @@ import type { Todo } from "../schema";
 
 interface TodoItemProps {
   todo: Todo
-  isCompleted: boolean
   onToggle: () => void
   onDelete: () => void
 }
 
-function TodoItem({ todo, isCompleted, onToggle, onDelete }: TodoItemProps) {
+function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
   const textClass = clsx(
     "flex-1 text-sm truncate transition-colors duration-300",
-    isCompleted
+    todo.completed
       ? "line-through text-gray-600 dark:text-gray-500"
       : "text-gray-900 dark:text-white",
   );
 
   const toggleButtonClass = clsx(
     "ml-4 px-3 py-1 text-xs font-semibold rounded-md transition-colors duration-300",
-    isCompleted
+    todo.completed
       ? "bg-gray-700 hover:bg-gray-600 text-white dark:bg-gray-500 dark:hover:bg-gray-400"
       : "bg-green-700 hover:bg-green-600 text-white dark:bg-green-500 dark:hover:bg-green-400",
   );
@@ -28,7 +27,7 @@ function TodoItem({ todo, isCompleted, onToggle, onDelete }: TodoItemProps) {
     <div className="flex items-center py-3">
       <p className={textClass}>{todo.text}</p>
       <button type="button" className={toggleButtonClass} onClick={onToggle}>
-        {isCompleted ? "Unmark" : "Complete"}
+        {todo.completed ? "Unmark" : "Complete"}
       </button>
       <button
         type="button"

src/components/TodoList.tsx

@@ -5,12 +5,9 @@ import TodoItem from "./TodoItem";
 function TodoList({
   todos,
   error,
-  completedTodos,
-  handleDeleteClick,
-  handleToggleClick,
+  toggleTodo,
+  removeTodo,
 }: TodoListProps) {
-  const completedTodosSet = new Set(completedTodos);
-
   if (error) {
     return (
       <div className="py-4 text-center text-red-500 font-medium">
@@ -27,9 +24,8 @@ function TodoList({
               <TodoItem
                 key={todo.id}
                 todo={todo}
-                isCompleted={completedTodosSet.has(todo.id)}
-                onToggle={() => handleToggleClick(todo.id)}
-                onDelete={() => handleDeleteClick(todo.id)}
+                onToggle={() => toggleTodo(todo.id)}
+                onDelete={() => removeTodo(todo.id)}
               />
             ))
           )

src/components/index.tsx

@@ -1,4 +1,4 @@
-import useTodoActions from "../hooks/useTodoActions";
+import { useTodoActions } from "../hooks/useTodoActions";
 
 import TodoForm from "./TodoForm";
 import TodoList from "./TodoList";
@@ -7,10 +7,9 @@ export default function TodoPage() {
   const {
     todos,
     error,
-    completedTodos,
-    handleAddTodo,
-    handleDeleteClick,
-    handleToggleClick,
+    addNewTodo,
+    toggleTodo,
+    removeTodo,
   } = useTodoActions();
 
   return (
@@ -22,14 +21,13 @@ export default function TodoPage() {
               Manage your tasks
             </h3>
           </div>
-          {!error && <TodoForm onAddTodo={handleAddTodo} />}
+          {!error && <TodoForm onAddTodo={addNewTodo} />}
         </div>
         <TodoList
-          todos={todos || []}
+          todos={todos}
           error={error}
-          completedTodos={completedTodos}
-          handleDeleteClick={handleDeleteClick}
-          handleToggleClick={handleToggleClick}
+          removeTodo={removeTodo}
+          toggleTodo={toggleTodo}
         />
       </div>
     </div>

src/fetch.ts

@@ -0,0 +1,5 @@
+export async function fetchAPI<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, options);
+  if (!response.ok) throw new Error(`Failed: ${response.statusText}`);
+  return response.json();
+}