🏡 Declutter Connect

\n {user\n ? (\n

\n Welcome, {user.username}\n \n

\n )\n : }\n

\n\n {showPostItemForm && user && (\n \n )}\n\n

Available Items

\n \n

\n\n

Global Chat

\n \n

\n\n {selectedItem && (\n \n )}\n

\n );\n}\n\nfunction PostItemForm({\n onSubmit,\n sellerId,\n}: {\n onSubmit: (item: Omit) => void;\n sellerId: string;\n}) {\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [price, setPrice] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit({\n title,\n description,\n price: Number(price),\n sellerId,\n images: imageUrl ? [imageUrl] : [DEFAULT_IMAGE],\n });\n };\n\n return (\n

\n setTitle(e.target.value)}\n required\n />\n setDescription(e.target.value)}\n required\n />\n setPrice(e.target.value)}\n min=\"0\"\n step=\"0.01\"\n required\n />\n setImageUrl(e.target.value)}\n />\n \n \n );\n}\n\nfunction GlobalChat({\n messages,\n onSendMessage,\n user,\n}: {\n messages: GlobalChatMessage[];\n onSendMessage: (message: string) => void;\n user: User | null;\n}) {\n const [newMessage, setNewMessage] = useState(\"\");\n const chatEndRef = React.useRef(null);\n\n useEffect(() => {\n chatEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSendMessage = () => {\n if (newMessage.trim()) {\n onSendMessage(newMessage);\n setNewMessage(\"\");\n }\n };\n\n return (\n

\n {messages.map(msg => (\n \n {msg.username}:\n {msg.message}\n

\n ))}\n

\n {user && (\n

\n setNewMessage(e.target.value)}\n placeholder=\"Type a message...\"\n onKeyPress={(e) => e.key === \"Enter\" && handleSendMessage()}\n />\n \n

\n )}\n

\n );\n}\n\n// Placeholder components (implement as needed)\nfunction ItemList({\n items,\n onSelectItem,\n}: {\n items: Item[];\n onSelectItem: (item: Item) => void;\n}) {\n return (\n

\n {items.map(item => (\n onSelectItem(item)}\n >\n \n

{item.title}

${item.price.toFixed(2)}

\n ))}\n \n );\n}\n\nfunction ItemDetail({\n item,\n user,\n}: {\n item: Item;\n user: User | null;\n}) {\n return (\n

{item.title}

\n \n

{item.description}

Price: ${item.price.toFixed(2)}

\n {user && user.id !== item.sellerId && (\n \n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // Initialize database tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_items_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n description TEXT NOT NULL,\n price REAL NOT NULL,\n sellerId TEXT NOT NULL,\n status TEXT NOT NULL,\n images TEXT\n )\n `);\n\n // New Global Chat Table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_global_chat_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n senderId TEXT NOT NULL,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n timestamp INTEGER NOT NULL\n )\n `);\n\n // API Routes for Global Chat\n if (url.pathname === \"/api/global-chat\") {\n if (request.method === \"GET\") {\n try {\n const messages = await sqlite.execute(`\n SELECT id, senderId, username, message, timestamp \n FROM ${KEY}_global_chat_${SCHEMA_VERSION} \n ORDER BY timestamp DESC \n LIMIT 100\n `);\n\n return new Response(JSON.stringify(messages.rows.reverse()), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching global chat messages:\", error);\n return new Response(JSON.stringify({ error: \"Failed to fetch messages\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } else if (request.method === \"POST\") {\n try {\n const { message, userId, username } = await request.json();\n const messageId = crypto.randomUUID();\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_global_chat_${SCHEMA_VERSION} \n (id, senderId, username, message, timestamp) \n VALUES (?, ?, ?, ?, ?)\n `,\n [\n messageId,\n userId,\n username,\n message,\n Date.now(),\n ],\n );\n\n return new Response(\n JSON.stringify({\n id: messageId,\n senderId: userId,\n username,\n message,\n timestamp: Date.now(),\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error sending global chat message:\", error);\n return new Response(JSON.stringify({ error: \"Failed to send message\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n }\n\n // API Routes for Items\n if (url.pathname === \"/api/items\") {\n if (request.method === \"GET\") {\n try {\n const items = await sqlite.execute(`\n SELECT * FROM ${KEY}_items_${SCHEMA_VERSION} \n WHERE status = 'available'\n `);\n\n return new Response(JSON.stringify(items.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error fetching items:\", error);\n return new Response(JSON.stringify({ error: \"Failed to fetch items\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } else if (request.method === \"POST\") {\n try {\n const newItem = await request.json();\n const itemId = crypto.randomUUID();\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_items_${SCHEMA_VERSION} \n (id, title, description, price, sellerId, status, images) \n VALUES (?, ?, ?, ?, ?, ?, ?)\n `,\n [\n itemId,\n newItem.title,\n newItem.description,\n newItem.price,\n newItem.sellerId,\n \"available\",\n JSON.stringify(newItem.images || [DEFAULT_IMAGE]),\n ],\n );\n\n return new Response(\n JSON.stringify({\n ...newItem,\n id: itemId,\n status: \"available\",\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error posting item:\", error);\n return new Response(JSON.stringify({ error: \"Failed to post item\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n }\n\n // Catch-all route to serve the main application\n return new Response(\n `\n \n \n \n \n \n Declutter Connect\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\n// CSS remains the same as in previous submission\nconst css = `\n/* Previous CSS remains the same */\n`;","deleted","label",[99],"permalink","https://www.val.town/x/ericomartin/Clutty/code/main.tsx","extension","actionData","errors"]