Chat Log

\n setNewMessage(e.target.value)}\n placeholder=\"Type a message...\"\n />\n \n \n

\n {messages.map((message) => (\n

\n {new Date(message.timestamp).toLocaleString()}\n

{message.content}

\n ))}\n

\n View Source\n

\n{`// Axios example\nconst axios = require('axios');\n\n// POST a new message\naxios.post('/messages', {\n  content: 'Hello, World!'\n})\n.then(response => console.log(response.data))\n.catch(error => console.error(error));\n\n// GET all messages\naxios.get('/messages')\n.then(response => console.log(response.data))\n.catch(error => console.error(error));\n\n// cURL examples\n# POST a new message\ncurl -X POST /messages \\\\\n  -H \"Content-Type: application/json\" \\\\\n  -d '{\"content\":\"Hello, World!\"}'\n\n# GET all messages\ncurl /messages`}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = \"addToLog\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === \"POST\" && request.url.endsWith(\"/messages\")) {\n const { content } = await request.json();\n await sqlite.execute(`\n INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content) VALUES (?)\n `, [content]);\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"GET\" && request.url.endsWith(\"/messages\")) {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 100\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(`\n \n \n Chat Log\n \n \n \n

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 600px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\nform {\n display: flex;\n margin-bottom: 20px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ddd;\n border-radius: 4px 0 0 4px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 0 4px 4px 0;\n cursor: pointer;\n}\nbutton:hover {\n background-color: #45a049;\n}\n.message-log {\n max-height: 400px;\n overflow-y: auto;\n}\n.message {\n background-color: #f9f9f9;\n border: 1px solid #ddd;\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 4px;\n}\n.timestamp {\n font-size: 0.8em;\n color: #888;\n}\n.view-source {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #666;\n text-decoration: none;\n}\n.view-source:hover {\n text-decoration: underline;\n}\n.api-examples {\n margin-top: 20px;\n background-color: #f0f0f0;\n padding: 15px;\n border-radius: 4px;\n font-size: 14px;\n white-space: pre-wrap;\n word-break: break-all;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/ejfox/addToLog/code/main.tsx","extension","actionData","errors"]