/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react@18.2.0"; import { useState, useEffect, Component } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { DragDropContext, Droppable, Draggable } from "https://esm.sh/react-beautiful-dnd@13.1.1"; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error("Caught an error:", error, errorInfo); } render() { if (this.state.hasError) { return

Something went wrong. Error: {this.state.error.toString()}

; } return this.props.children; } } function App() { console.log("Rendering App component"); const [categories, setCategories] = useState([]); const [newCategory, setNewCategory] = useState(""); const [newCard, setNewCard] = useState(""); useEffect(() => { fetchCategories(); }, []); const fetchCategories = async () => { const response = await fetch("/categories"); if (response.ok) { const data = await response.json(); setCategories(data); console.log("Categories fetched and set:", data); data.forEach(category => console.log(`Category ${category.name} has ${category.cards.length} cards`)); } }; const addCategory = async () => { console.log("Adding category:", newCategory); if (newCategory.trim()) { const response = await fetch("/categories", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: newCategory }), }); if (response.ok) { setNewCategory(""); fetchCategories(); } } }; const deleteCard = async (cardId) => { console.log("Deleting card:", cardId); const response = await fetch(`/cards/${cardId}`, { method: "DELETE", }); if (response.ok) { fetchCategories(); } else { console.error("Failed to delete card"); } }; const deleteCategory = async (categoryId) => { console.log("Deleting category:", categoryId); const response = await fetch(`/categories/${categoryId}`, { method: "DELETE", }); if (response.ok) { fetchCategories(); } else { console.error("Failed to delete category"); } }; const addCard = async () => { if (newCard.trim()) { const response = await fetch("/cards", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newCard, categoryId: null }), }); if (response.ok) { setNewCard(""); fetchCategories(); } } }; const onDragEnd = async (result) => { console.log("onDragEnd called with result:", result); if (!result.destination) return; const sourceIndex = result.source.index; const destIndex = result.destination.index; const sourceDroppableId = result.source.droppableId; const destDroppableId = result.destination.droppableId; const getCategory = (id) => categories.find(c => c.id?.toString() === id || (c.id === null && id === 'uncategorized')); const sourceCategory = getCategory(sourceDroppableId); const destCategory = getCategory(destDroppableId); if (!sourceCategory || !destCategory) { console.error("Source or destination category not found"); return; } if (sourceDroppableId === destDroppableId) { const newCards = Array.from(sourceCategory.cards); const [reorderedItem] = newCards.splice(sourceIndex, 1); newCards.splice(destIndex, 0, reorderedItem); const newCategories = categories.map(c => c === sourceCategory ? { ...c, cards: newCards } : c ); setCategories(newCategories); console.log("Categories updated:", newCategories); } else { const sourceCards = Array.from(sourceCategory.cards); const destCards = Array.from(destCategory.cards); const [movedCard] = sourceCards.splice(sourceIndex, 1); destCards.splice(destIndex, 0, movedCard); const newCategories = categories.map(c => c === sourceCategory ? { ...c, cards: sourceCards } : c === destCategory ? { ...c, cards: destCards } : c ); setCategories(newCategories); console.log("Categories updated after move:", newCategories); // Update the card's category on the server await fetch(`/cards/${movedCard.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ categoryId: destDroppableId === 'uncategorized' ? null : parseInt(destDroppableId) }), }); } }; return (

Card Sorting

setNewCategory(e.target.value)} placeholder="New category name" /> setNewCard(e.target.value)} placeholder="New card content" />

{categories.map((category) => ( {(provided) => (

{category.name}

{category.id !== null && ( )}

{category.cards.map((card, index) => ( {(provided, snapshot) => (

{card.content}

)} ))} {provided.placeholder}

)} ))}

View Source

); } function client() { try { console.log("Starting client-side rendering"); const rootElement = document.getElementById("root"); if (rootElement) { console.log("Root element found, creating root"); const root = createRoot(rootElement); console.log("Rendering App component"); root.render( ); } else { console.error("Root element not found"); } } catch (error) { console.error("Error in client-side rendering:", error, error.stack); } } if (typeof document !== "undefined") { setTimeout(client, 0); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_categories_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_cards_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, category_id INTEGER, FOREIGN KEY (category_id) REFERENCES ${KEY}_categories_${SCHEMA_VERSION}(id) ) `); const url = new URL(request.url); const path = url.pathname; if (path === "/" || path === "") { return new Response(` Card Sorting App

`, { headers: { "Content-Type": "text/html" }, }); } if (path === "/categories" && request.method === "GET") { const categories = await sqlite.execute(`SELECT * FROM ${KEY}_categories_${SCHEMA_VERSION}`); const cards = await sqlite.execute(`SELECT * FROM ${KEY}_cards_${SCHEMA_VERSION}`); const categoriesWithCards = categories.rows.map(category => ({ ...category, cards: cards.rows.filter(card => card.category_id === category.id) })); // Add uncategorized cards categoriesWithCards.push({ id: null, name: "Uncategorized", cards: cards.rows.filter(card => card.category_id === null) }); return new Response(JSON.stringify(categoriesWithCards), { headers: { "Content-Type": "application/json" } }); } if (path === "/categories" && request.method === "POST") { const { name } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_categories_${SCHEMA_VERSION} (name) VALUES (?)`, [name]); return new Response("Category added", { status: 201 }); } if (path === "/cards" && request.method === "POST") { const { content, categoryId } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_cards_${SCHEMA_VERSION} (content, category_id) VALUES (?, ?)`, [content, categoryId]); return new Response("Card added", { status: 201 }); } if (path.startsWith("/cards/") && request.method === "PATCH") { const cardId = path.split("/")[2]; const { categoryId } = await request.json(); await sqlite.execute(`UPDATE ${KEY}_cards_${SCHEMA_VERSION} SET category_id = ? WHERE id = ?`, [categoryId, cardId]); return new Response("Card updated", { status: 200 }); } if (path.startsWith("/categories/") && request.method === "DELETE") { const categoryId = path.split("/")[2]; await sqlite.execute(`DELETE FROM ${KEY}_categories_${SCHEMA_VERSION} WHERE id = ?`, [categoryId]); await sqlite.execute(`UPDATE ${KEY}_cards_${SCHEMA_VERSION} SET category_id = NULL WHERE category_id = ?`, [categoryId]); return new Response("Category deleted", { status: 200 }); } if (path.startsWith("/cards/") && request.method === "DELETE") { const cardId = path.split("/")[2]; await sqlite.execute(`DELETE FROM ${KEY}_cards_${SCHEMA_VERSION} WHERE id = ?`, [cardId]); return new Response("Card deleted", { status: 200 }); } // If no route matches, return a 404 error return new Response("Not Found", { status: 404 }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; box-sizing: border-box; background-color: #f0f0f0; } .app { max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; } h1 { text-align: center; color: #333; } .controls { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; gap: 20px; /* This adds space between the two input-button pairs */ } .control-group { display: flex; gap: 3px; /* Reduced by 2/3 from 10px to 3px */ align-items: center; } input { padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 8px 16px; background-color: #4CAF50; white-space: nowrap; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; } .category { background-color: #fff; border-radius: 8px; padding: 16px; min-height: 150px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .category h2 { margin-top: 0; color: #333; border-bottom: 2px solid #4CAF50; padding-bottom: 8px; } .card { width: 100%; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 8px; margin-bottom: 8px; cursor: move; } .card:hover { background-color: #e9e9e9; } .card-wrapper { position: relative; } .delete-card { position: absolute; top: 5px; right: 5px; background: none; border: none; color: #999; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.3s ease; opacity: 0; } .card-wrapper:hover .delete-card { opacity: 1; } .category-header { display: flex; justify-content: space-between; align-items: center; } .delete-category { background: none; border: none; color: #999; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.3s ease; } .delete-category:hover { color: #ff4444; } .delete-category:focus { outline: none; } .footer { margin-top: 20px; text-align: center; } .footer a { color: #4CAF50; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

cardSortDragDropApp