From 2ad5ce929f6d69c9aaca71573744b30e02ab8bed Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Fri, 27 Jun 2025 10:10:56 +0200
Subject: Add cloudflare basic impl

---
 src/components/SimpleTest.tsx  |  32 +++++++
 src/components/TaskManager.tsx | 202 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 234 insertions(+)
 create mode 100644 src/components/SimpleTest.tsx
 create mode 100644 src/components/TaskManager.tsx

(limited to 'src/components')

diff --git a/src/components/SimpleTest.tsx b/src/components/SimpleTest.tsx
new file mode 100644
index 0000000..cfabeab
--- /dev/null
+++ b/src/components/SimpleTest.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+export default function SimpleTest() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Simple Test Component</h1>
+      <div className="space-y-4">
+        <p>This is a simple React component to test if the infinite refresh is caused by the API calls.</p>
+        <div className="flex items-center space-x-4">
+          <button
+            onClick={() => setCount(count - 1)}
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            -
+          </button>
+          <span className="text-xl font-bold">{count}</span>
+          <button
+            onClick={() => setCount(count + 1)}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            +
+          </button>
+        </div>
+        <p className="text-gray-600">
+          If this component works without refreshing, the issue is in the TaskManager API calls.
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/TaskManager.tsx b/src/components/TaskManager.tsx
new file mode 100644
index 0000000..a10a5f9
--- /dev/null
+++ b/src/components/TaskManager.tsx
@@ -0,0 +1,202 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface Task {
+  id: number;
+  title: string;
+  description: string;
+  completed: boolean;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export default function TaskManager() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [newTask, setNewTask] = useState({ title: '', description: '' });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTasks = useCallback(async () => {
+    try {
+      setError(null);
+      const response = await fetch('/api/tasks');
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      console.log('Fetched tasks:', data);
+      setTasks(Array.isArray(data) ? data : []);
+    } catch (error) {
+      console.error('Failed to fetch tasks:', error);
+      setError(error instanceof Error ? error.message : 'Failed to fetch tasks');
+      setTasks([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+
+  const createTask = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTask.title.trim()) return;
+
+    try {
+      const response = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newTask)
+      });
+      
+      if (response.ok) {
+        setNewTask({ title: '', description: '' });
+        fetchTasks();
+      }
+    } catch (error) {
+      console.error('Failed to create task:', error);
+    }
+  };
+
+  const toggleTask = async (task: Task) => {
+    try {
+      await fetch(`/api/tasks/${task.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...task, completed: !task.completed })
+      });
+      fetchTasks();
+    } catch (error) {
+      console.error('Failed to update task:', error);
+    }
+  };
+
+  const deleteTask = async (id: number) => {
+    try {
+      await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
+      fetchTasks();
+    } catch (error) {
+      console.error('Failed to delete task:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <h1 className="text-3xl font-bold mb-6">Task Manager</h1>
+        <div className="p-4 text-center">Loading tasks...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="max-w-2xl mx-auto p-6">
+        <h1 className="text-3xl font-bold mb-6">Task Manager</h1>
+        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-700">Error: {error}</p>
+          <button 
+            onClick={fetchTasks}
+            className="mt-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">Task Manager</h1>
+      
+      <form onSubmit={createTask} className="mb-8 space-y-4">
+        <div>
+          <input
+            type="text"
+            placeholder="Task title"
+            value={newTask.title}
+            onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+            className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <textarea
+            placeholder="Task description (optional)"
+            value={newTask.description}
+            onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+            className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            rows={3}
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition-colors"
+        >
+          Add Task
+        </button>
+      </form>
+
+      <div className="space-y-4">
+        {tasks.length === 0 ? (
+          <p className="text-gray-500 text-center">No tasks yet. Create your first task above!</p>
+        ) : (
+          tasks.map((task) => (
+            <div
+              key={task.id}
+              className={`p-4 border rounded-lg ${
+                task.completed ? 'bg-green-50 border-green-200' : 'bg-white border-gray-200'
+              }`}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h3
+                    className={`font-semibold ${
+                      task.completed ? 'line-through text-gray-500' : 'text-gray-900'
+                    }`}
+                  >
+                    {task.title}
+                  </h3>
+                  {task.description && (
+                    <p
+                      className={`mt-1 ${
+                        task.completed ? 'line-through text-gray-400' : 'text-gray-600'
+                      }`}
+                    >
+                      {task.description}
+                    </p>
+                  )}
+                  {task.created_at && (
+                    <p className="text-xs text-gray-400 mt-2">
+                      Created: {new Date(task.created_at).toLocaleString()}
+                    </p>
+                  )}
+                </div>
+                <div className="flex space-x-2 ml-4">
+                  <button
+                    onClick={() => toggleTask(task)}
+                    className={`px-3 py-1 rounded text-sm ${
+                      task.completed
+                        ? 'bg-yellow-500 text-white hover:bg-yellow-600'
+                        : 'bg-green-500 text-white hover:bg-green-600'
+                    }`}
+                  >
+                    {task.completed ? 'Undo' : 'Complete'}
+                  </button>
+                  <button
+                    onClick={() => deleteTask(task.id)}
+                    className="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
-- 
cgit v1.3.1