Enhanced Task Manager

\n \n \n \n \n`;\n\nconst DEFAULT_DATE = new Date().toISOString().split('T')[0];\nconst SCHEMA_VERSION = 1;\n\nfunction TaskManager() {\n const [tasks, setTasks] = React.useState([]);\n const [isAddTaskModalOpen, setIsAddTaskModalOpen] = React.useState(false);\n const [newTask, setNewTask] = React.useState({\n text: '',\n done: false,\n dueDate: DEFAULT_DATE\n });\n const [taskToEdit, setTaskToEdit] = React.useState(null);\n const [isEditTaskModalOpen, setIsEditTaskModalOpen] = React.useState(false);\n const [sortOrder, setSortOrder] = React.useState('asc');\n\n React.useEffect(() => {\n fetchTasks();\n }, []);\n\n const fetchTasks = async () => {\n const response = await fetch('/api/tasks');\n const fetchedTasks = await response.json();\n setTasks(fetchedTasks);\n };\n\n const formatTaskText = (text) => {\n return text.split(' ').map((word, index) => {\n if (word.startsWith('#')) {\n return {word} ;\n } else if (word.startsWith('@')) {\n return {word} ;\n } else if (word.startsWith('$')) {\n return {word} ;\n }\n return word + ' ';\n });\n };\n\n const handleCreateTask = async (e) => {\n e.preventDefault();\n if (newTask.text.trim() && newTask.dueDate) {\n try {\n const response = await fetch('/api/tasks', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newTask),\n });\n if (response.ok) {\n setNewTask({ text: '', done: false, dueDate: DEFAULT_DATE });\n setIsAddTaskModalOpen(false);\n fetchTasks();\n }\n } catch (error) {\n console.error('Failed to create new task:', error);\n }\n }\n };\n\n const handleDeleteTask = async (taskId) => {\n try {\n const response = await fetch(`/api/tasks/${taskId}`, { method: 'DELETE' });\n if (response.ok) {\n fetchTasks();\n }\n } catch (error) {\n console.error('Failed to delete task:', error);\n }\n };\n\n const handleEditTask = (task) => {\n setTaskToEdit({ ...task });\n setIsEditTaskModalOpen(true);\n };\n\n const handleUpdateTask = async (e) => {\n e.preventDefault();\n if (taskToEdit.text.trim() && taskToEdit.dueDate) {\n try {\n const response = await fetch(`/api/tasks/${taskToEdit.id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(taskToEdit),\n });\n if (response.ok) {\n setIsEditTaskModalOpen(false);\n setTaskToEdit(null);\n fetchTasks();\n }\n } catch (error) {\n console.error('Failed to update task:', error);\n }\n }\n };\n\n const handleToggleTaskCompletion = async (taskId, done) => {\n try {\n const response = await fetch(`/api/tasks/${taskId}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ done: !done }),\n });\n if (response.ok) {\n fetchTasks();\n }\n } catch (error) {\n console.error('Failed to toggle task completion:', error);\n }\n };\n\n const handleSortTasks = () => {\n const sortedTasks = [...tasks].sort((a, b) => {\n const dateA = new Date(a.dueDate);\n const dateB = new Date(b.dueDate);\n return sortOrder === 'asc' ? dateA - dateB : dateB - dateA;\n });\n setTasks(sortedTasks);\n setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');\n };\n\n const TaskForm = ({\n task,\n updateTask,\n onSubmit,\n title,\n submitButtonText,\n isNewTask\n }) => (\n \n

\n \n {title}\n \n

\n\n

\n \n isNewTask\n ? setIsAddTaskModalOpen(false)\n : setIsEditTaskModalOpen(false)\n }\n className=\"px-4 py-2 bg-gray-200 dark:bg-gray-600 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500\"\n >\n Cancel\n \n \n {submitButtonText}\n \n

\n \n \n \n );\n\n return (\n \n \n {/* Header Section */}\n \n \n Task Manager\n \n setIsAddTaskModalOpen(true)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600\"\n aria-label=\"Add a new task\"\n >\n New Task\n \n \n\n {/* Sort Button */}\n \n Sort by Date {sortOrder === 'asc' ? '↑' : '↓'}\n \n\n {/* Task Table */}\n \n \n \n \n \n Description\n \n \n Status\n \n \n Due Date\n \n \n Actions\n \n \n \n \n {tasks.map((task, index) => (\n \n \n {formatTaskText(task.text)}\n \n \n handleToggleTaskCompletion(task.id, task.done)}\n aria-label={`Mark task \"${task.text}\" as ${task.done ? 'not done' : 'done'}`}\n />\n \n \n {task.dueDate}\n \n \n \n ))}\n \n


\n handleEditTask(task)}\n className=\"mr-2 px-3 py-1 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200 dark:bg-yellow-300 dark:hover:bg-yellow-400\"\n aria-label={`Edit task \"${task.text}\"`}\n >\n Edit\n \n handleDeleteTask(task.id)}\n className=\"px-3 py-1 bg-red-100 text-red-700 rounded-md hover:bg-red-200 dark:bg-red-300 dark:hover:bg-red-400\"\n aria-label={`Delete task \"${task.text}\"`}\n >\n Delete\n \n

\n handleEditTask(task)}\n className=\"mr-2 px-3 py-1 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200 dark:bg-yellow-300 dark:hover:bg-yellow-400\"\n aria-label={`Edit task \"${task.text}\"`}\n >\n Edit\n \n handleDeleteTask(task.id)}\n className=\"px-3 py-1 bg-red-100 text-red-700 rounded-md hover:bg-red-200 dark:bg-red-300 dark:hover:bg-red-400\"\n aria-label={`Delete task \"${task.text}\"`}\n >\n Delete\n \n

\n \n\n {/* Add Task Modal */}\n {isAddTaskModalOpen && (\n \n )}\n\n {/* Edit Task Modal */}\n {isEditTaskModalOpen && taskToEdit && (\n \n )}\n \n \n );\n}\n\nfunction App() {\n return (\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"tasks_test1\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_tasks_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n done BOOLEAN NOT NULL DEFAULT 0,\n dueDate TEXT NOT NULL\n )\n `);\n\n const url = new URL(request.url);\n if (url.pathname === '/api/tasks' && request.method === 'GET') {\n const tasks = await sqlite.execute(`SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(tasks.rows), { headers: { 'Content-Type': 'application/json' } });\n } else if (url.pathname === '/api/tasks' && request.method === 'POST') {\n const { text, done, dueDate } = await request.json();\n await sqlite.execute(`INSERT INTO ${KEY}_tasks_${SCHEMA_VERSION} (text, done, dueDate) VALUES (?, ?, ?)`, [text, done ? 1 : 0, dueDate]);\n return new Response(null, { status: 201 });\n } else if (url.pathname.startsWith('/api/tasks/') && request.method === 'DELETE') {\n const id = url.pathname.split('/').pop();\n await sqlite.execute(`DELETE FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE id = ?`, [id]);\n return new Response(null, { status: 204 });\n } else if (url.pathname.startsWith('/api/tasks/') && request.method === 'PUT') {\n const id = url.pathname.split('/').pop();\n const { text, done, dueDate } = await request.json();\n await sqlite.execute(`UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET text = ?, done = ?, dueDate = ? WHERE id = ?`, [text, done ? 1 : 0, dueDate, id]);\n return new Response(null, { status: 204 });\n } else if (url.pathname.startsWith('/api/tasks/') && request.method === 'PATCH') {\n const id = url.pathname.split('/').pop();\n const { done } = await request.json();\n await sqlite.execute(`UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET done = ? WHERE id = ?`, [done ? 1 : 0, id]);\n return new Response(null, { status: 204 });\n }\n\n return new Response(HTML_TEMPLATE, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/arfan/tasks_test1/code/main.tsx","extension","actionData","errors"]