🗒️ Task Board

\n setIsSettingsOpen(true)}\n aria-label=\"Open Settings\"\n >\n ⚙️\n \n \n {isDarkMode ? \"☀️\" : \"🌙\"}\n \n

\n\n {isSettingsOpen && (\n

setIsSettingsOpen(false)}>\n

e.stopPropagation()}>\n

App Settings

\n \n

\n\n

\n Font Family\n

\n {config.fonts.map((font) => (\n {\n setChosenFont(font);\n utils.updateAppStyle(font, fontSize);\n }}\n >\n {font}\n

\n ))}\n

\n\n

\n Text Size\n

\n {[14, 16, 20].map((size) => (\n setFontSize(size)}\n aria-label={`Set ${size === 14 ? \"Small\" : size === 16 ? \"Medium\" : \"Large\"} Font Size`}\n >\n {size === 14 ? \"S\" : size === 16 ? \"M\" : \"L\"}\n \n ))}\n

\n\n

\n \n setIsDeleteButtonVisible(e.target.checked)}\n className=\"mr-2\"\n aria-label=\"Show Delete Button\"\n />\n Show Delete Button\n \n

\n\n

\n \n

\n )}\n\n

\n setNewTaskText(e.target.value)}\n placeholder=\"What needs to be done?\"\n style={{ width: \"300px\", height: \"40px\" }}\n aria-label=\"New Task Input\"\n />\n \n Add Task\n \n

\n\n \n

\n {Object.entries(taskLists).map(([columnId, tasks]) => (\n \n {(provided) => (\n \n

\n {columnId.replace(/([A-Z])/g, \" $1\").toUpperCase()}\n

\n {tasks.map((task, index) => (\n \n {(provided) => (\n handleTaskInteraction(e, task, columnId)}\n onMouseDown={(e) => handleTaskInteraction(e, task, columnId)}\n >\n \n {task.title}\n \n {isDeleteButtonVisible && (\n removeTask(task.id, columnId)}\n className=\"ml-2 text-red-500 hover:text-red-700\"\n aria-label={`Delete task: ${task.title}`}\n >\n 🗑️\n \n )}\n

\n )}\n \n ))}\n {provided.placeholder}\n

\n \n )}\n \n ))}\n \n \n\n {isEditModalOpen && (\n

setIsEditModalOpen(false)}>\n

e.stopPropagation()}>\n

Edit Task

\n \n

\n setEditedTaskText(e.target.value)}\n aria-label=\"Edit Task Input\"\n />\n

\n \n \n

\n )}\n\n \n View Source\n \n \n );\n}\n\n// Error Boundary component to catch and display React errors\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true, error };\n }\n\n render() {\n if (this.state.hasError) {\n return (\n

Something went wrong.

{this.state.error.toString()}

\n );\n }\n return this.props.children;\n }\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const tableName = config.database.getTableName();\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${tableName} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n column TEXT NOT NULL\n )\n `);\n\n if (request.method === \"POST\") {\n const url = new URL(request.url);\n const body = await request.json();\n\n switch (url.pathname) {\n case \"/add-task\":\n await sqlite.execute(\n `INSERT INTO ${tableName} (id, title, column) VALUES (?, ?, ?)`,\n [crypto.randomUUID(), body.title, body.column]\n );\n break;\n case \"/move-task\":\n await sqlite.execute(\n `UPDATE ${tableName} SET column = ? WHERE id = ?`,\n [body.destColumn, body.taskId]\n );\n break;\n case \"/delete-task\":\n await sqlite.execute(\n `DELETE FROM ${tableName} WHERE id = ?`,\n [body.taskId]\n );\n break;\n case \"/update-task\":\n await sqlite.execute(\n `UPDATE ${tableName} SET title = ? WHERE id = ?`,\n [body.newTitle, body.taskId]\n );\n break;\n default:\n return new Response(\"Not Found\", { status: 404 });\n }\n\n return getAllTasks(sqlite, tableName);\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-tasks\") {\n return getAllTasks(sqlite, tableName);\n }\n\n return new Response(\n `\n \n \n \n Task Board\n \n \n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n\nasync function getAllTasks(sqlite, tableName) {\n const columns = Object.values(config.columns);\n const tasks = await Promise.all(\n columns.map(column =>\n sqlite.execute(`SELECT * FROM ${tableName} WHERE column = ?`, [column])\n )\n );\n\n const result = Object.fromEntries(\n columns.map((column, index) => [column, tasks[index].rows])\n );\n\n return new Response(JSON.stringify(result), { headers: { \"content-type\": \"application/json\" } });\n}","createdAt",["D",1742707563166],"version",9,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_133":134,"_135":136},"handle","arfan","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVp3b2dpRnRHTEdOM3NGbTViQ2dBaW9sdUYifQ","forkedVal","fileId","interval","slug","arfan/kanbanTest","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[146,149,153,157,161,165,169,173,176,179],{"_121":122,"_147":-5,"_119":148,"_116":114},"prId",["D",1742707563166],{"_121":150,"_147":-5,"_119":151,"_116":152},8,["D",1742707438939],"05f8ad68-07a7-11f0-aa3e-569c3dd06744",{"_121":154,"_147":-5,"_119":155,"_116":156},7,["D",1742707291686],"ae333684-07a6-11f0-97cb-569c3dd06744",{"_121":158,"_147":-5,"_119":159,"_116":160},6,["D",1737544165857],"576326a8-d8b1-11ef-be88-e6cdfca9ef9f",{"_121":162,"_147":-5,"_119":163,"_116":164},5,["D",1737543741603],"5a838bbc-d8b0-11ef-b98f-e6cdfca9ef9f",{"_121":166,"_147":-5,"_119":167,"_116":168},4,["D",1737543569294],"f3cf04be-d8af-11ef-aee5-e6cdfca9ef9f",{"_121":170,"_147":-5,"_119":171,"_116":172},3,["D",1737543490352],"c4c1a42e-d8af-11ef-9760-e6cdfca9ef9f",{"_121":94,"_147":-5,"_119":174,"_116":175},["D",1737543421722],"9bd95c82-d8af-11ef-8303-e6cdfca9ef9f",{"_121":128,"_147":-5,"_119":177,"_116":178},["D",1737543374997],"80005e8e-d8af-11ef-bf87-e6cdfca9ef9f",{"_121":33,"_147":-5,"_119":180,"_116":181},["D",1737543232816],"2b42140a-d8af-11ef-b82d-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_97":189,"_190":191,"_98":192},"single","redirect","/v/arfan/kanbanTest/versions",{"_116":114,"_117":118,"_121":122,"_119":193,"_194":103,"_104":105,"_111":112,"_133":134,"_12":100,"_195":-5,"_196":-5,"_197":-5,"_186":27,"_140":141},["D",1742707563166],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

kanbanTest

Version 9