\n \n \n \n",[],[139,181],"7d7d8fd2-575d-11f1-b38e-ee650bb23af1","RequestList.tsx","bd415708-575c-11f1-9913-ee650bb23af1","ae3ce29a-575c-11f1-88ab-ee650bb23af1",22,["D",1779619447385],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { AppRequest } from \"./App.tsx\";\n\ninterface Props {\n requests: AppRequest[];\n onDelete: (id: number) => void;\n onStatusChange: (id: number, status: string) => void;\n}\n\nconst STATUS_CONFIG: Record = {\n pending: { label: \"Pending\", bg: \"bg-amber-100\", text: \"text-amber-700\", icon: \"⏳\" },\n \"in-progress\": { label: \"In Progress\", bg: \"bg-blue-100\", text: \"text-blue-700\", icon: \"🔧\" },\n resolved: { label: \"Resolved\", bg: \"bg-green-100\", text: \"text-green-700\", icon: \"✅\" },\n};\n\nfunction formatDate(timestamp: string): string {\n const date = new Date(timestamp + \"Z\"); // SQLite stores UTC without Z suffix\n return date.toLocaleString();\n}\n\nexport function RequestList({ requests, onDelete, onStatusChange }: Props) {\n if (requests.length === 0) {\n return (\n

📭

No requests yet. Submit one above!

Your submissions will be saved and displayed here.

\n );\n }\n\n return (\n

\n 📋 Saved Requests ({requests.length})\n

\n {requests.map((req) => {\n const cfg = STATUS_CONFIG[req.status] || STATUS_CONFIG.pending;\n\n return (\n \n {/* Top row: text + delete button */}\n

\n {req.text}\n

\n onDelete(req.id)}\n className=\"text-gray-300 hover:text-red-500 text-lg transition flex-shrink-0\"\n title=\"Delete request\"\n >\n ✕\n \n

\n\n {/* Bottom row: timestamp + status selector */}\n

\n 🕐 {formatDate(req.timestamp)}\n

\n onStatusChange(req.id, e.target.value)}\n className={`text-xs font-medium px-2 py-1 rounded-full border-0 cursor-pointer ${cfg.bg} ${cfg.text}`}\n >\n \n \n \n \n

\n );\n })}\n

\n \n );\n}\n",[],[139,197,189],"components","751e135c-575d-11f1-b38e-ee650bb23af1","RequestForm.tsx","b9c56646-575c-11f1-8d53-ee650bb23af1",21,["D",1779619433339],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst MIN_LENGTH = 3;\nconst MAX_LENGTH = 1000;\n\ninterface Props {\n onSubmit: (text: string) => Promise;\n}\n\nexport function RequestForm({ onSubmit }: Props) {\n const [text, setText] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(null);\n const [success, setSuccess] = useState(false);\n\n const trimmed = text.trim();\n const charCount = trimmed.length;\n const tooShort = charCount > 0 && charCount < MIN_LENGTH;\n const tooLong = charCount > MAX_LENGTH;\n const isValid = charCount >= MIN_LENGTH && charCount <= MAX_LENGTH;\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setError(null);\n setSuccess(false);\n\n // Client-side validation (mirrors backend rules)\n if (!trimmed) {\n setError(\"Please enter a request before submitting.\");\n return;\n }\n if (tooShort) {\n setError(`Request must be at least ${MIN_LENGTH} characters.`);\n return;\n }\n if (tooLong) {\n setError(`Request must be at most ${MAX_LENGTH} characters.`);\n return;\n }\n\n setSubmitting(true);\n\n try {\n // Calls App.addRequest → POST /api/requests → server validates & persists\n await onSubmit(trimmed);\n setText(\"\");\n setSuccess(true);\n setTimeout(() => setSuccess(false), 3000);\n } catch (err: any) {\n // Surfaces server-side errors (duplicate detection, etc.)\n setError(err.message || \"Failed to submit. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n \n What do you need help with?\n \n {\n setText(e.target.value);\n if (error) setError(null);\n if (success) setSuccess(false);\n }}\n placeholder=\"Describe your request (min 3 characters)...\"\n rows={3}\n maxLength={MAX_LENGTH + 50}\n className={`w-full border rounded-lg p-3 text-sm focus:outline-none focus:ring-2 resize-none transition ${\n error ? \"border-red-400 focus:ring-red-300\" : \"border-gray-300 focus:ring-blue-400\"\n }`}\n />\n\n {/* Character counter + validation hints */}\n

\n {error &&

{error}

}\n {!error && tooShort && (\n

\n {MIN_LENGTH - charCount} more character{MIN_LENGTH - charCount !== 1 ? \"s\" : \"\"} needed\n

\n )}\n {!error && success && (\n

✅ Request saved successfully!

\n )}\n

\n {charCount}/{MAX_LENGTH}\n

\n\n \n {submitting ? \"Saving...\" : \"Submit Request\"}\n \n \n );\n}\n",[],[139,197,199],"69b11a0a-575d-11f1-979e-ee650bb23af1","App.tsx","b4cddae2-575c-11f1-b8cb-ee650bb23af1",20,["D",1779619414134],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { RequestForm } from \"./RequestForm.tsx\";\nimport { RequestList } from \"./RequestList.tsx\";\n\nexport interface AppRequest {\n id: number;\n text: string;\n status: string;\n timestamp: string;\n}\n\nexport function App() {\n const [requests, setRequests] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n // ─── Fetch all saved requests on page load ───\n const fetchRequests = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const res = await fetch(\"/api/requests\");\n if (!res.ok) throw new Error(`Server returned ${res.status}`);\n const data: AppRequest[] = await res.json();\n setRequests(data);\n } catch (err: any) {\n setError(err.message || \"Failed to load saved requests.\");\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n fetchRequests();\n }, [fetchRequests]);\n\n // ─── Add a new request (POST → server persists → update local state) ───\n async function addRequest(text: string) {\n const res = await fetch(\"/api/requests\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n\n const data = await res.json();\n\n if (!res.ok) {\n // Bubble the server-side validation error to the form\n throw new Error(data.error || \"Failed to submit request.\");\n }\n\n // Prepend the newly saved request to the list\n setRequests((prev) => [data, ...prev]);\n }\n\n // ─── Update request status (PATCH → server persists → update local state) ───\n async function updateStatus(id: number, status: string) {\n const res = await fetch(`/api/requests/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n\n if (!res.ok) return;\n\n const updated: AppRequest = await res.json();\n setRequests((prev) =>\n prev.map((r) => (r.id === updated.id ? updated : r)),\n );\n }\n\n // ─── Delete a request (DELETE → server persists → update local state) ───\n async function deleteRequest(id: number) {\n const res = await fetch(`/api/requests/${id}`, { method: \"DELETE\" });\n if (res.ok) {\n setRequests((prev) => prev.filter((r) => r.id !== id));\n }\n }\n\n // ─── Stats ───\n const pending = requests.filter((r) => r.status === \"pending\").length;\n const inProgress = requests.filter((r) => r.status === \"in-progress\").length;\n const resolved = requests.filter((r) => r.status === \"resolved\").length;\n\n return (\n

🤖 Townie AI Assistant

Submit and track your assistance requests

\n\n \n\n {/* ─── Stats bar ─── */}\n {!loading && requests.length > 0 && (\n

\n \n ⏳ {pending} pending\n \n \n 🔧 {inProgress} in progress\n \n \n ✅ {resolved} resolved\n \n

\n )}\n\n {/* ─── Loading state ─── */}\n {loading && (\n

⏳

Loading saved requests...

\n )}\n\n {/* ─── Error state with retry ─── */}\n {error && (\n

{error}

\n \n Try again\n \n

\n )}\n\n {/* ─── Request list (loaded from server) ─── */}\n {!loading && !error && (\n \n )}\n\n

\n view source\n

\n );\n}\n",[],[139,197,208],"ae3ce1be-575c-11f1-88ab-ee650bb23af1",12,["D",1779619099693],[157,158,159],[139,197],["D",1779619094829],[156,160,161],[139],["D",1779618659606],["D",1789470042795],{"_16":17,"_85":81},{"_16":17,"_78":79,"_80":81,"_33":34,"_82":83,"_84":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_107":261,"_262":263,"_264":265,"_266":26,"_267":26,"_268":26,"_269":105,"_270":-5,"_271":-7,"_272":-7,"_273":40,"_274":26,"_275":26,"_276":-5,"_277":26,"_278":26,"_279":26,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":68,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search