\n {children}\n \n

\n \n \n );\n}\n\nfunction SearchForm({ query }: { query?: string }) {\n return () => (\n \n );\n}\n\n// ─── Page Components ──────────────────────────────────────────────\n\nfunction HomePage({ topics }: { topics: Topic[] }) {\n return () => (\n \n

Community Message Board

\n Home\n

\n\n \n\n

Create a New Topic

\n \n

\n\n

Topics

\n\n {topics.length === 0 ? (\n

\n No topics yet. Create the first one!\n

\n ) : (\n

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n )}\n \n );\n}\n\nfunction TopicPage({ topic, messages, highlightedMessageId }: { topic: Topic; messages: Message[]; highlightedMessageId?: number }) {\n return () => (\n \n

Community Message Board

\n Home\n

\n\n \n\n

{topic.title}

\n Created {new Date(topic.createdAt).toDateString()}\n

\n\n

Messages

\n\n {messages.length === 0 ? (\n

\n No messages yet. Be the first to post!\n

\n ) : (\n

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

{msg.content}

\n \n {new Date(msg.createdAt).toDateString()}\n \n

\n ))}\n \n )}\n\n

Post a Message

\n \n

\n\n {highlightedMessageId ? (\n \n ) : null}\n \n );\n}\n\nfunction SearchPage({ topics, messages, query }: { topics: Topic[]; messages: Message[]; query: string }) {\n const hasResults = topics.length > 0 || messages.length > 0;\n\n return () => (\n \n

Community Message Board

\n Home\n

\n\n \n\n

\n Search Results for \"{query}\"\n

\n\n {!hasResults ? (\n

\n No results found for \"{query}\". Try a different search term.\n

\n ) : (\n

\n {topics.length > 0 ? (\n

Topics ({topics.length})

\n {topics.map((topic) => (\n

\n \n {topic.title}\n \n

\n Created {new Date(topic.createdAt).toDateString()}\n

\n ))}\n

\n ) : null}\n\n {messages.length > 0 ? (\n

Messages ({messages.length})

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

{msg.content}

\n \n View in topic\n \n \n {new Date(msg.createdAt).toDateString()}\n \n

\n ))}\n

\n ) : null}\n

\n )}\n \n );\n}\n\nfunction NotFoundPage() {\n return () => (\n \n

404

Page not found

\n Go Home\n

\n \n );\n}\n\n// ─── Router ───────────────────────────────────────────────────────\nconst router = createRouter();\n\n// GET / — Home page with topic list\nrouter.get(\"/\", async () => {\n const topics = await getAllTopics();\n return html();\n});\n\n// POST / — Create a new topic\nrouter.post(\"/\", async (ctx) => {\n const formData = await ctx.request.formData();\n const title = formData.get(\"title\")?.toString()?.trim();\n if (!title) return new Response(\"Title is required\", { status: 400 });\n const topic = await createTopic(title);\n return redirect(`/topics/${topic.id}`);\n});\n\n// GET /topics/:topicId — Topic detail\nrouter.get(\"/topics/:topicId\", async (ctx) => {\n const topicId = parseInt(ctx.params.topicId, 10);\n const topic = await getTopicById(topicId);\n if (!topic) return html();\n const messages = await getMessagesByTopicId(topicId);\n return html();\n});\n\n// POST /topics/:topicId — Post a message to topic\nrouter.post(\"/topics/:topicId\", async (ctx) => {\n const topicId = parseInt(ctx.params.topicId, 10);\n const formData = await ctx.request.formData();\n const content = formData.get(\"content\")?.toString()?.trim();\n if (!content) return new Response(\"Content is required\", { status: 400 });\n await createMessage(topicId, content);\n return redirect(`/topics/${topicId}`);\n});\n\n// GET /topics/:topicId/messages/:messageId — Topic with highlighted message\nrouter.get(\"/topics/:topicId/messages/:messageId\", async (ctx) => {\n const topicId = parseInt(ctx.params.topicId, 10);\n const messageId = parseInt(ctx.params.messageId, 10);\n const topic = await getTopicById(topicId);\n if (!topic) return html();\n const messages = await getMessagesByTopicId(topicId);\n return html();\n});\n\n// GET /search — Search results\nrouter.get(\"/search\", async (ctx) => {\n const url = new URL(ctx.request.url);\n const query = url.searchParams.get(\"q\")?.trim() || \"\";\n if (!query) return html();\n const results = await searchAll(query);\n return html();\n});\n\n// ─── Export ───────────────────────────────────────────────────────\nexport default async function(req: Request): Promise {\n try {\n return await router.fetch(req);\n } catch (error: any) {\n console.error(\"Error:\", error);\n return new Response(`Error: ${error.message}\\n${error.stack}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" },\n });\n }\n}\n","deleted","label",[100],"permalink","https://www.val.town/x/stevekrouse/remix3-demo/code/message-board.tsx","extension","actionData","errors"]