Community Message Board

\n \n Home\n \n

\n\n \n\n

Create a New Topic

\n \n

\n\n

Topics

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

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

\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}",[127,119],"e9b435b373570ef5f50025139d92dbe8e12768cba96c7e3e0cb76fe75b7d9c5d","routes","3d47a160-163f-11f0-809e-569c3dd06744","f8ffb6d8-1593-11f0-9dd6-569c3dd06744","c4795b2d-41e5-4e2d-bb49-1239d72d4d2d",150,["D",1744312131524],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n Link,\n useLoaderData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\nimport { Topic } from \"../shared/types.ts\";\n\ninterface TopicListProps {\n topics: Topic[];\n}\n\nexport function Home() {\n const navigation = useNavigation();\n const { topics } = useLoaderData();\n const isCreatingTopic = navigation.formAction === \"/\" && navigation.state === \"submitting\";\n let $form = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

Community Message Board

\n \n Home\n \n

\n\n \n\n

Create a New Topic

\n \n

\n\n

Topics

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

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

\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}",[127,119],"7a749545db18471da0f260e2651858b5cca7ce7c3d426e4a9edbe88ce1f0b862","backend/database/queries.ts",{"_33":150,"_13":140,"_86":151,"_88":152,"_90":39,"_91":153,"_93":55,"_40":154,"_47":143,"_96":97,"_98":155,"_70":55,"_100":-5,"_101":-7,"_78":156,"_103":157},{"_33":139,"_13":140,"_86":141,"_88":142,"_90":63,"_91":143,"_93":26,"_40":144,"_47":95,"_96":97,"_98":145,"_70":55,"_100":-5,"_101":-7,"_78":146,"_103":147},"3f904c78-1645-11f0-89e7-569c3dd06744","queries.ts","8590525f-81a5-4d71-b0b6-685aa174343f","b0b81f2f-b947-47cf-971a-1326e470e890",2,["D",1744314712334],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, SearchResults, Topic } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Delete all topics and messages from the database\n */\nexport async function deleteAllTopicsAndMessages(): Promise<{ success: boolean }> {\n try {\n // Delete all messages first (due to foreign key constraints)\n await sqlite.execute(`DELETE FROM ${MESSAGES_TABLE}`);\n \n // Then delete all topics\n await sqlite.execute(`DELETE FROM ${TOPICS_TABLE}`);\n \n return { success: true };\n } catch (error) {\n console.error(\"Error deleting all topics and messages:\", error);\n return { success: false };\n }\n}\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `,\n [title, createdAt],\n );\n\n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `,\n [topicId],\n );\n\n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `,\n [topicId, content, createdAt],\n );\n\n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `,\n [`%${query}%`],\n );\n\n // Search in messages\n const messagesResult = await sqlite.execute(\n `\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `,\n [`%${query}%`],\n );\n\n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query,\n };\n}",[148,149,140],"b9887ca23c052dc32004797e443fefe490e6060a80709ac39734472256df5be4","backend","database","badc7172-14ce-11f0-8c0e-569c3dd06744","6229805c-14cd-11f0-800b-569c3dd06744","4af61b55-4e6e-48ee-bb08-a35baadaf267",28,["D",1744153857922],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, SearchResults, Topic } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `,\n [title, createdAt],\n );\n\n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `,\n [topicId],\n );\n\n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(\n `\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `,\n [id],\n );\n\n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n\n const result = await sqlite.execute(\n `\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `,\n [topicId, content, createdAt],\n );\n\n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(\n `\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `,\n [`%${query}%`],\n );\n\n // Search in messages\n const messagesResult = await sqlite.execute(\n `\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `,\n [`%${query}%`],\n );\n\n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query,\n };\n}",[148,149,140],"ae2892a1e08069217dcccbf55a36f7366ca1be69c9a6b753161f5250972fb970","README.md",{"_33":169,"_13":158,"_86":170,"_88":-5,"_90":39,"_91":171,"_93":55,"_40":172,"_47":164,"_96":165,"_98":173,"_70":55,"_100":-5,"_101":-7,"_78":174,"_103":175},{"_33":161,"_13":158,"_86":162,"_88":-5,"_90":63,"_91":62,"_93":26,"_40":163,"_47":164,"_96":165,"_98":166,"_70":55,"_100":-5,"_101":-7,"_78":167,"_103":168},"5e51b8e0-1645-11f0-88ab-569c3dd06744","10deab7e-c9d8-4a0c-9a8a-0a0f52346c98",["D",1744314763898],3,"file","# Community Message Board\n\nA simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.\n\n## Features\n\n- **Server-Side Rendering**: All pages are server-rendered when accessed directly\n- **Client-Side Navigation**: After initial load, navigation happens client-side\n- **Topic Management**: Create and view discussion topics\n- **Messaging System**: Post messages in topics\n- **Direct Message Links**: Link directly to specific messages via timestamps\n- **Search Functionality**: Search topics and messages with URL parameters\n- **Loading Indicators**: Visual feedback during async operations\n- **Data Management**: Delete all topics and messages with a single click\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ └── index.ts # Server entry point\n├── frontend/\n│ ├── components/\n│ │ ├── LoadingSpinner.tsx\n│ │ ├── MessageForm.tsx\n│ │ ├── MessageList.tsx\n│ │ └── SearchForm.tsx\n│ ├── index.html # HTML template\n│ └── index.tsx # Client entry point\n├── routes/\n│ ├── App.tsx # Main application component\n│ ├── Home.tsx # Home page component\n│ ├── Home.loader.ts # Home page data loader\n│ ├── Topic.tsx # Topic detail component\n│ ├── Topic.loader.ts # Topic data loader\n│ ├── Topic.action.ts # Topic message creation action\n│ ├── TopicMessage.loader.ts # Direct message link loader\n│ ├── Topics.action.ts # Topic creation action\n│ ├── DeleteAll.action.ts # Delete all topics and messages action\n│ ├── Search.tsx # Search results component\n│ └── Search.loader.ts # Search data loader\n└── shared/\n ├── routes.ts # Route definitions\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n### Server-Side Rendering\n\nThe application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:\n\n1. The server receives the request\n2. It runs the appropriate loaders/actions for the matched route\n3. The page is rendered with the data and sent to the client\n4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`\n\n### Client-Side Navigation\n\nAfter the initial page load, navigation happens entirely on the client:\n\n1. React Router handles link clicks and form submissions\n2. Data is fetched asynchronously using loaders and actions\n3. A loading spinner is displayed during data fetching\n4. The UI updates without a full page reload\n\n### Data Flow\n\n1. **Topics**: Stored in SQLite with title and creation timestamp\n2. **Messages**: Linked to topics with content and creation timestamp\n3. **Search**: Queries both topics and messages, with results in the URL\n\n### URL Structure\n\n- `/` - Home page with list of topics\n- `/` - Create new topic\n- `/delete-all` - Delete all topics and messages\n- `/topics/:topicId` - View a topic and its messages\n- `/topics/:topicId/messages/:messageId` - Direct link to a message\n- `/search?q=query` - Search results\n\n\n## Implementation Details\n\nThis application demonstrates a \"Val Town fullstack framework\" approach, combining:\n\n- **Hono**: For server-side routing and handling\n- **React Router 7**: For both server and client-side routing\n- **SQLite**: For data persistence\n- **TypeScript**: For type safety across the stack\n\nThe code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.",[158],"a0cebd633750cf4f2effc378c36276e38f93da190672662400c05031fd4133db","d5a32784-163c-11f0-a89b-569c3dd06744","513e59ca-14cd-11f0-8f60-569c3dd06744",142,["D",1744311098646],"# Community Message Board\n\nA simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.\n\n## Features\n\n- **Server-Side Rendering**: All pages are server-rendered when accessed directly\n- **Client-Side Navigation**: After initial load, navigation happens client-side\n- **Topic Management**: Create and view discussion topics\n- **Messaging System**: Post messages in topics\n- **Direct Message Links**: Link directly to specific messages via timestamps\n- **Search Functionality**: Search topics and messages with URL parameters\n- **Loading Indicators**: Visual feedback during async operations\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ └── index.ts # Server entry point\n├── frontend/\n│ ├── components/\n│ │ ├── LoadingSpinner.tsx\n│ │ ├── MessageForm.tsx\n│ │ ├── MessageList.tsx\n│ │ └── SearchForm.tsx\n│ ├── index.html # HTML template\n│ └── index.tsx # Client entry point\n├── routes/\n│ ├── App.tsx # Main application component\n│ ├── Home.tsx # Home page component\n│ ├── Home.loader.ts # Home page data loader\n│ ├── Topic.tsx # Topic detail component\n│ ├── Topic.loader.ts # Topic data loader\n│ ├── Topic.action.ts # Topic message creation action\n│ ├── TopicMessage.loader.ts # Direct message link loader\n│ ├── Topics.action.ts # Topic creation action\n│ ├── Search.tsx # Search results component\n│ └── Search.loader.ts # Search data loader\n└── shared/\n ├── routes.ts # Route definitions\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n### Server-Side Rendering\n\nThe application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:\n\n1. The server receives the request\n2. It runs the appropriate loaders/actions for the matched route\n3. The page is rendered with the data and sent to the client\n4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`\n\n### Client-Side Navigation\n\nAfter the initial page load, navigation happens entirely on the client:\n\n1. React Router handles link clicks and form submissions\n2. Data is fetched asynchronously using loaders and actions\n3. A loading spinner is displayed during data fetching\n4. The UI updates without a full page reload\n\n### Data Flow\n\n1. **Topics**: Stored in SQLite with title and creation timestamp\n2. **Messages**: Linked to topics with content and creation timestamp\n3. **Search**: Queries both topics and messages, with results in the URL\n\n### URL Structure\n\n- `/` - Home page with list of topics\n- `/` - Create new topic\n- `/topics/:topicId` - View a topic and its messages\n- `/topics/:topicId/messages/:messageId` - Direct link to a message\n- `/search?q=query` - Search results\n\n\n## Implementation Details\n\nThis application demonstrates a \"Val Town fullstack framework\" approach, combining:\n\n- **Hono**: For server-side routing and handling\n- **React Router 7**: For both server and client-side routing\n- **SQLite**: For data persistence\n- **TypeScript**: For type safety across the stack\n\nThe code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.",[158],"4083c48457414eddab0c1faf617d75e0c2b26318935420a11052a1aa1cb6053d",{"_78":177,"_80":-7,"_82":178},"routes/DeleteAll.action.ts",{"_33":179,"_13":180,"_86":181,"_88":121,"_90":63,"_91":164,"_93":26,"_40":182,"_47":183,"_96":97,"_98":184,"_70":55,"_100":-5,"_101":-7,"_78":185,"_103":186},"4245ba0c-1645-11f0-9ca3-569c3dd06744","DeleteAll.action.ts","4245ba98-1645-11f0-9ca3-569c3dd06744",["D",1744314716884],0,"import { ActionFunctionArgs, redirect } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { deleteAllTopicsAndMessages } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n const formData = await request.formData();\n const confirmation = formData.get(\"confirmation\") as string;\n\n if (confirmation !== \"delete-all\") {\n throw new Response(\"Invalid confirmation\", { status: 400 });\n }\n\n await deleteAllTopicsAndMessages();\n \n // Redirect back to the home page\n return redirect(\"/\");\n}",[127,180],"0041f923e5c3fcea1f95359207218cc5c306371cddb70d32d237d21a59925aaf",["D",1744152661331],"legacyEnvVars","httpPrivacy","Full-stack example ReactRouter7 project","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","e315d710-14cd-11f0-a969-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",151,"likeCount","tursoName","f1a22d8a14cb11f0b108569c3dd06744","tursoHostname","f1a22d8a14cb11f0b108569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789558275908],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_228":224},"org",{"_11":12,"_222":-5,"_223":224,"_192":193,"_225":226,"_227":55},"branch","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":46,"_13":14,"_40":518,"_53":-5,"_188":55,"_56":57,"_189":57,"_35":190,"_191":-5,"_192":193,"_194":195,"_196":26,"_197":-5,"_198":199,"_200":164,"_59":60,"_201":202,"_203":204,"_205":519,"_207":-5,"_208":209,"_210":209,"_211":212,"_213":212,"_214":212,"_215":209,"_216":209,"_217":520,"_219":521,"_221":522,"_54":55},"tree",[299,304,315,327,330,331,332],"files",[299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332],"counts",{"_289":95,"_290":122,"_291":164,"_292":293,"_294":295},"contents",[252,253,254,255,256,257,258],"upstreamProject","upstreamBranch",{"_33":39,"_40":250,"_42":251,"_13":44,"_45":46,"_47":48,"_49":-5,"_50":-5,"_51":52,"_53":-5,"_54":55,"_56":57,"_58":12,"_59":60,"_61":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1744152661331],["D",1771761464050],{"_33":285,"_13":148,"_86":286,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":287,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_78":288},{"_33":280,"_13":281,"_86":282,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":283,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_78":284},{"_33":277,"_13":127,"_86":121,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":278,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_78":279},{"_33":273,"_13":105,"_86":89,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":274,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_78":276},{"_33":161,"_13":158,"_86":162,"_88":-5,"_90":63,"_91":62,"_93":26,"_40":271,"_47":164,"_96":165,"_98":166,"_70":55,"_100":-5,"_78":272},{"_33":265,"_13":266,"_86":267,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":268,"_47":183,"_96":165,"_98":269,"_70":55,"_100":-5,"_78":270},{"_33":259,"_13":260,"_86":261,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":262,"_47":183,"_96":165,"_98":263,"_70":55,"_100":-5,"_78":264},"2aadd762-1645-11f0-b5a9-569c3dd06744","react-router-questions.md","ab61e678-0a4b-4250-a1e3-e820c7fc638c",["D",1744314677289],"# React Router Questions\n\nI have some questions about how to set up React Router 7 as a \"custom framework\". It seems like the documentation on this is mostly these two pages:\n\n1. Docs on React Router 7: [\"Custom Framework\"](https://reactrouter.com/start/data/custom)\n2. Example app on Github: [@remix-run/custom-react-router-framework-example](https://github.com/remix-run/custom-react-router-framework-example)\n\n## How I've set it up\n\n### Client loaders & actions\n\n[On the client, I turn loaders and actions into `fetch` calls to the backend.](https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts) This is heavily inspired by the [here in the Github example](https://github.com/remix-run/custom-react-router-framework-example/blob/main/app/routes.tsx#L14-L29).\n\n### Handling client loader & action API calls on the server\n\n[On the client, I check if the Accept header is JSON and then return the loader or action data.](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L66-77) This is heavily inspired by the [here in the Github example](https://github.com/remix-run/custom-react-router-framework-example/blob/main/entry.server.tsx#L12-L22).\n\n### Questions\n\n### 1. Setting loader state for multiple loaders\n\nRight now I've converted every loader into its own fetch call. This is the opposite of what frameworks refer to as \"single fetch\". However on the backend, I actually get access the full loaderData for all nested routes. I even wrote [this silly function to combine all the loaderData objects into one big object](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L36-50).\n\nIdeally we should make a single loader call per navigation event, and set the internal router state. In other words, I would like to somehow reach into React Router and set this `state` here:\n\n![Screenshot 2025-04-10 at 15.03.32@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/23997cd0-6e12-46b5-53d8-89e2fe5a9c00/public)\n\nAnd then let `useLoaderData` funnel the correct loader data's to the correct routes via their IDs.\n\n### 2. Action redirects\n\nWhen my backend returns a 302 from an action, how should I handle this on the frontend? For example, after you create a new topic on the home page, [I redirect you to that topic's ID](https://www.val.town/x/stevekrouse/reactRouter7Example/code/routes/Topics.action.ts#L13)\n\nHowever, I'm not sure how [to handle this on the client here](https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts#L26).\n\nIdeally, I would do a proper React Router \"navigation\", and pass the relevant loader data along so it can be 100% client-side and require no other API calls.\n\n### 3. Should I use `queryRoute` instead of `query` in my server?\n\nThe [example app uses `queryRoute`](https://github.com/remix-run/custom-react-router-framework-example/blob/f5a141d67800e8da076cd1bb3130f29a8c0d4ce3/entry.server.tsx#L77-L79) instead of `query` for loaders and actions. I tried using that too but it didn't work. I think it returned undefined. I am now [using `query` for everything](https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L58).\n\nIs it better to use that or is my use of `query` fine? I get the feeling that `query` is doing a bunch of work I don't need, ie SRR, but maybe that's not very expensive so it's fine? I noticed [the example app uses `X-Route-ID`](https://github.com/remix-run/custom-react-router-framework-example/blob/main/app/layout.client.tsx#L8), so maybe I'd need to use that?",[260],"2aadd5d2-1645-11f0-b5a9-569c3dd06744","TODO.md","e6299794-a831-4673-84bd-a5afa6951f6f",["D",1744314677289],"- [ ] Get OpenTownie or Gemini or Claude or OpenAI to synthesize the core of these patterns into a prompt we can use to make more ReactRouter apps, such as...\n- [ ] Convert this or into the basic react router guest book (and preserve this forum app in another project?)\n- [ ] To what extent can these patterns be packaged up into a Val Town Router project? Would be neat to get the version pinning thing all centralized, can this as-a-library be that centralized place?",[266],["D",1744314763898],[158],"2aadd064-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],"directory",[105],"2aadcab0-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[127],"2aadb46c-1645-11f0-b5a9-569c3dd06744","frontend","2dad1ee4-a6ea-4a16-b839-896f14d0286d",["D",1744314677289],[281],"2aad9cd4-1645-11f0-b5a9-569c3dd06744","1b868510-caaf-4363-a44f-4931a73e0131",["D",1744314677289],[148],"pulls","branches","forks","envVars",{"_296":183,"_298":183},"connections",{"_296":183,"_297":183},"count","unfilledCount","emptyCount",{"_33":285,"_13":148,"_86":286,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":515,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":516,"_78":517},{"_33":511,"_13":149,"_86":142,"_88":286,"_90":63,"_91":95,"_93":26,"_40":512,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":513,"_78":514},{"_33":504,"_13":505,"_86":506,"_88":142,"_90":63,"_91":95,"_93":26,"_40":507,"_47":183,"_96":97,"_98":508,"_70":55,"_100":-5,"_101":509,"_78":510},{"_33":139,"_13":140,"_86":141,"_88":142,"_90":63,"_91":143,"_93":26,"_40":144,"_47":95,"_96":97,"_98":145,"_70":55,"_100":-5,"_101":502,"_78":503},{"_33":494,"_13":495,"_86":496,"_88":286,"_90":63,"_91":95,"_93":26,"_40":497,"_47":183,"_96":498,"_98":499,"_70":55,"_100":-5,"_101":500,"_78":501},{"_33":280,"_13":281,"_86":282,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":491,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":492,"_78":493},{"_33":487,"_13":445,"_86":440,"_88":282,"_90":63,"_91":95,"_93":26,"_40":488,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":489,"_78":490},{"_33":481,"_13":414,"_86":482,"_88":440,"_90":63,"_91":95,"_93":26,"_40":483,"_47":183,"_96":97,"_98":484,"_70":55,"_100":-5,"_101":485,"_78":486},{"_33":474,"_13":475,"_86":476,"_88":440,"_90":63,"_91":95,"_93":26,"_40":477,"_47":183,"_96":97,"_98":478,"_70":55,"_100":-5,"_101":479,"_78":480},{"_33":467,"_13":468,"_86":469,"_88":440,"_90":63,"_91":95,"_93":26,"_40":470,"_47":183,"_96":97,"_98":471,"_70":55,"_100":-5,"_101":472,"_78":473},{"_33":460,"_13":461,"_86":462,"_88":440,"_90":63,"_91":95,"_93":26,"_40":463,"_47":183,"_96":97,"_98":464,"_70":55,"_100":-5,"_101":465,"_78":466},{"_33":453,"_13":454,"_86":455,"_88":440,"_90":63,"_91":95,"_93":26,"_40":456,"_47":183,"_96":97,"_98":457,"_70":55,"_100":-5,"_101":458,"_78":459},{"_33":446,"_13":447,"_86":448,"_88":440,"_90":63,"_91":95,"_93":26,"_40":449,"_47":183,"_96":97,"_98":450,"_70":55,"_100":-5,"_101":451,"_78":452},{"_33":437,"_13":438,"_86":439,"_88":440,"_90":63,"_91":95,"_93":26,"_40":441,"_47":183,"_96":97,"_98":442,"_70":55,"_100":-5,"_101":443,"_78":444},{"_33":430,"_13":431,"_86":432,"_88":282,"_90":63,"_91":95,"_93":26,"_40":433,"_47":183,"_96":165,"_98":434,"_70":55,"_100":-5,"_101":435,"_78":436},{"_33":423,"_13":424,"_86":425,"_88":282,"_90":63,"_91":95,"_93":26,"_40":426,"_47":183,"_96":97,"_98":427,"_70":55,"_100":-5,"_101":428,"_78":429},{"_33":277,"_13":127,"_86":121,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":420,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":421,"_78":422},{"_33":413,"_13":414,"_86":415,"_88":121,"_90":63,"_91":95,"_93":26,"_40":416,"_47":183,"_96":97,"_98":417,"_70":55,"_100":-5,"_101":418,"_78":419},{"_33":179,"_13":180,"_86":181,"_88":121,"_90":63,"_91":164,"_93":26,"_40":182,"_47":183,"_96":97,"_98":184,"_70":55,"_100":-5,"_101":411,"_78":412},{"_33":404,"_13":405,"_86":406,"_88":121,"_90":63,"_91":95,"_93":26,"_40":407,"_47":183,"_96":97,"_98":408,"_70":55,"_100":-5,"_101":409,"_78":410},{"_33":118,"_13":119,"_86":120,"_88":121,"_90":63,"_91":122,"_93":26,"_40":123,"_47":95,"_96":97,"_98":124,"_70":55,"_100":-5,"_101":402,"_78":403},{"_33":395,"_13":396,"_86":397,"_88":121,"_90":63,"_91":95,"_93":26,"_40":398,"_47":183,"_96":97,"_98":399,"_70":55,"_100":-5,"_101":400,"_78":401},{"_33":388,"_13":389,"_86":390,"_88":121,"_90":63,"_91":95,"_93":26,"_40":391,"_47":183,"_96":97,"_98":392,"_70":55,"_100":-5,"_101":393,"_78":394},{"_33":381,"_13":382,"_86":383,"_88":121,"_90":63,"_91":95,"_93":26,"_40":384,"_47":183,"_96":97,"_98":385,"_70":55,"_100":-5,"_101":386,"_78":387},{"_33":374,"_13":375,"_86":376,"_88":121,"_90":63,"_91":95,"_93":26,"_40":377,"_47":183,"_96":97,"_98":378,"_70":55,"_100":-5,"_101":379,"_78":380},{"_33":367,"_13":368,"_86":369,"_88":121,"_90":63,"_91":95,"_93":26,"_40":370,"_47":183,"_96":97,"_98":371,"_70":55,"_100":-5,"_101":372,"_78":373},{"_33":360,"_13":361,"_86":362,"_88":121,"_90":63,"_91":95,"_93":26,"_40":363,"_47":183,"_96":97,"_98":364,"_70":55,"_100":-5,"_101":365,"_78":366},{"_33":353,"_13":354,"_86":355,"_88":121,"_90":63,"_91":95,"_93":26,"_40":356,"_47":183,"_96":97,"_98":357,"_70":55,"_100":-5,"_101":358,"_78":359},{"_33":273,"_13":105,"_86":89,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":350,"_47":183,"_96":275,"_98":-5,"_70":55,"_100":-5,"_101":351,"_78":352},{"_33":84,"_13":85,"_86":87,"_88":89,"_90":63,"_91":92,"_93":26,"_40":94,"_47":95,"_96":97,"_98":99,"_70":55,"_100":-5,"_101":348,"_78":349},{"_33":341,"_13":342,"_86":343,"_88":89,"_90":63,"_91":95,"_93":26,"_40":344,"_47":183,"_96":97,"_98":345,"_70":55,"_100":-5,"_101":346,"_78":347},{"_33":161,"_13":158,"_86":162,"_88":-5,"_90":63,"_91":62,"_93":26,"_40":163,"_47":164,"_96":165,"_98":166,"_70":55,"_100":-5,"_101":339,"_78":340},{"_33":265,"_13":266,"_86":267,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":336,"_47":183,"_96":165,"_98":269,"_70":55,"_100":-5,"_101":337,"_78":338},{"_33":259,"_13":260,"_86":261,"_88":-5,"_90":63,"_91":95,"_93":26,"_40":333,"_47":183,"_96":165,"_98":263,"_70":55,"_100":-5,"_101":334,"_78":335},["D",1744314677289],[],[260],["D",1744314677289],[],[266],[],[158],"2aadce98-1645-11f0-b5a9-569c3dd06744","types.ts","d693e7f0-5fe0-4156-854c-08a19f97ecc7",["D",1744314677289],"/**\n * Topic model representing a discussion thread\n */\nexport interface Topic {\n id: number;\n title: string;\n createdAt: string;\n}\n\n/**\n * Message model representing a post within a topic\n */\nexport interface Message {\n id: number;\n topicId: number;\n content: string;\n createdAt: string;\n}\n\n/**\n * Search results containing matching topics and messages\n */\nexport interface SearchResults {\n topics: Topic[];\n messages: Message[];\n query: string;\n}",[],[105,342],[],[105,85],["D",1744314677289],[328,329],[105],"2aadc920-1645-11f0-b5a9-569c3dd06744","Topics.action.ts","71651c84-ce4f-45f2-891e-0e46184a8430",["D",1744314677289],"import { ActionFunctionArgs, redirect } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createTopic } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n const formData = await request.formData();\n const title = formData.get(\"title\") as string;\n\n if (!title || title.trim() === \"\") {\n throw new Response(\"Title is required\", { status: 400 });\n }\n\n const topic = await createTopic(title);\n return redirect(`/topics/${topic.id}`);\n}",[],[127,354],"2aadc7b8-1645-11f0-b5a9-569c3dd06744","TopicMessage.loader.ts","321e0aac-461c-4753-8109-97e0cfda4b8f",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getTopicById, getMessageById, getMessagesByTopicId } from \"../backend/database/queries.ts\";\n\nexport async function loader({ params }: LoaderFunctionArgs) {\n const topicId = parseInt(params.topicId!, 10);\n const messageId = parseInt(params.messageId!, 10);\n\n const topic = await getTopicById(topicId);\n if (!topic) {\n throw new Response(\"Topic not found\", { status: 404 });\n }\n\n const message = await getMessageById(messageId);\n if (!message || message.topicId !== topicId) {\n throw new Response(\"Message not found\", { status: 404 });\n }\n\n const messages = await getMessagesByTopicId(topicId);\n return { topic, messages };\n}",[],[127,361],"2aadc560-1645-11f0-b5a9-569c3dd06744","Topic.tsx","d3e23910-e9ee-497a-a707-19f58864d0ab",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData, useParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Message, Topic } from \"../shared/types.ts\";\nimport { MessageForm } from \"../frontend/components/MessageForm.tsx\";\nimport { MessageList } from \"../frontend/components/MessageList.tsx\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\ninterface TopicDetailData {\n topic: Topic;\n messages: Message[];\n}\n\nexport function Topic() {\n const { topic, messages } = useLoaderData() as TopicDetailData;\n const { messageId } = useParams();\n const highlightedMessageId = messageId ? parseInt(messageId, 10) : undefined;\n \n // Scroll to highlighted message if messageId is provided\n useEffect(() => {\n if (highlightedMessageId) {\n const messageElement = document.getElementById(`message-${highlightedMessageId}`);\n if (messageElement) {\n messageElement.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n }\n }, [highlightedMessageId]);\n \n return (\n

Community Message Board

\n \n Home\n \n

\n \n \n \n

{topic.title}

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

\n \n

Messages

\n \n \n \n \n

\n );\n}",[],[127,368],"2aadc416-1645-11f0-b5a9-569c3dd06744","Topic.loader.ts","49dc9b30-8f7a-43c9-80bc-72da05a4cf87",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getTopicById, getMessagesByTopicId } from \"../backend/database/queries.ts\";\n\nexport async function loader({ params }: LoaderFunctionArgs) {\n const topicId = parseInt(params.topicId!, 10);\n const topic = await getTopicById(topicId);\n\n if (!topic) {\n throw new Response(\"Topic not found\", { status: 404 });\n }\n\n const messages = await getMessagesByTopicId(topicId);\n return { topic, messages };\n}",[],[127,375],"2aadc268-1645-11f0-b5a9-569c3dd06744","Topic.action.ts","73fdb20b-448c-4b9e-ac48-57aad1415049",["D",1744314677289],"import { ActionFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createMessage } from \"../backend/database/queries.ts\";\n\nexport async function action({ request }: ActionFunctionArgs) {\n console.log(\"HERE!\");\n const formData = await request.formData();\n const topicId = parseInt(formData.get(\"topicId\") as string, 10);\n const content = formData.get(\"content\") as string;\n\n if (!content || content.trim() === \"\") {\n throw new Response(\"Content is required\", { status: 400 });\n }\n\n const message = await createMessage(topicId, content);\n return message;\n}",[],[127,382],"2aadbf70-1645-11f0-b5a9-569c3dd06744","Search.tsx","e4076c07-7ec1-4d0f-b4f7-cd2f465ef5b1",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../shared/types.ts\";\nimport { SearchForm } from \"../frontend/components/SearchForm.tsx\";\n\nexport function Search() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \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 )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

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

{message.content}

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

\n ))}\n

\n )}\n

\n );\n}",[],[127,389],"2aadbda4-1645-11f0-b5a9-569c3dd06744","Search.loader.ts","f29bd6bb-760c-4a1a-8561-25a4726b3602",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { search } from \"../backend/database/queries.ts\";\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n const url = new URL(request.url);\n const query = url.searchParams.get(\"q\") || \"\";\n\n if (!query || query.trim() === \"\") {\n return { topics: [], messages: [], query: \"\" };\n }\n\n return await search(query);\n}",[],[127,396],[],[127,119],"2aadb7f0-1645-11f0-b5a9-569c3dd06744","Home.loader.ts","8555734a-58d5-4f7e-986c-af499c1fdc1c",["D",1744314677289],"import { LoaderFunctionArgs } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { getAllTopics } from \"../backend/database/queries.ts\";\n\nexport async function loader() {\n return { topics: await getAllTopics() };\n}",[],[127,405],[],[127,180],"2aadb61a-1645-11f0-b5a9-569c3dd06744","App.tsx","67b4bdd8-663f-4012-b9e6-ba3a5e8f159b",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"../frontend/components/LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n \n

\n\n \n

\n );\n}",[],[127,414],["D",1744314677289],[316,317,318,319,320,321,322,323,324,325,326],[127],"2aadb0ac-1645-11f0-b5a9-569c3dd06744","index.tsx","87c07d8e-b7d6-4a4d-bb66-9a5d4cccfe4f",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { hydrateRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createBrowserRouter,\n RouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { routes } from \"../shared/routes.ts\";\n\n// Create a browser router with the same routes as the server\n// but using the hydration data from the server render\nconst router = createBrowserRouter(\n routes,\n {\n // @ts-ignore - The window.__staticRouterHydrationData is added by the server\n hydrationData: window.__staticRouterHydrationData,\n },\n);\n\n// Hydrate the app\nhydrateRoot(\n document.getElementById(\"root\")!,\n \n \n ,\n);",[],[281,424],"2aadaf58-1645-11f0-b5a9-569c3dd06744","index.html","7f09b221-180b-47aa-8b48-8a390bce93e1",["D",1744314677289],"\n\n \n \n \n Community Message Board\n \n \n \n \n \n

\n \n \n",[],[281,431],"2aadaabc-1645-11f0-b5a9-569c3dd06744","TopicDetail.tsx","b9b00b4e-7e76-4eb2-9d69-09fdd602917c","f41330df-a184-42ca-acfd-b06f5891cb32",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLoaderData, useParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Message, Topic } from \"../../shared/types.ts\";\nimport { MessageForm } from \"./MessageForm.tsx\";\nimport { MessageList } from \"./MessageList.tsx\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\ninterface TopicDetailData {\n topic: Topic;\n messages: Message[];\n}\n\nexport function TopicDetail() {\n const { topic, messages } = useLoaderData() as TopicDetailData;\n const { messageId } = useParams();\n const highlightedMessageId = messageId ? parseInt(messageId, 10) : undefined;\n\n // Scroll to highlighted message if messageId is provided\n useEffect(() => {\n if (highlightedMessageId) {\n const messageElement = document.getElementById(`message-${highlightedMessageId}`);\n if (messageElement) {\n messageElement.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n }\n }, [highlightedMessageId]);\n\n return (\n

Community Message Board

\n \n Home\n \n

\n\n \n\n

{topic.title}

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

\n\n

Messages

\n\n \n\n \n

\n );\n}",[],[281,445,438],"components","2aada774-1645-11f0-b5a9-569c3dd06744","SearchResults.tsx","c592b738-4ea2-44c4-97cc-2d10a4fdd267",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Link, useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SearchResults as SearchResultsType } from \"../../shared/types.ts\";\nimport { SearchForm } from \"./SearchForm.tsx\";\n\nexport function SearchResults() {\n const { topics, messages, query } = useLoaderData() as SearchResultsType;\n const hasResults = topics.length > 0 || messages.length > 0;\n \n return (\n

Community Message Board

\n \n Home\n \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 )}\n \n {messages.length > 0 && (\n

Messages ({messages.length})

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

{message.content}

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

\n ))}\n

\n )}\n

\n );\n}",[],[281,445,447],"2aada5f8-1645-11f0-b5a9-569c3dd06744","SearchForm.tsx","0a0dd767-1aa6-4786-9d68-2c175268ec8f",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Form, useNavigation, useSearchParams } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function SearchForm() {\n const navigation = useNavigation();\n const [searchParams] = useSearchParams();\n const query = searchParams.get(\"q\") || \"\";\n const isSearching = navigation.state === \"loading\" && navigation.location.pathname === \"/search\";\n \n return (\n \n );\n}",[],[281,445,454],"2aada3fa-1645-11f0-b5a9-569c3dd06744","MessageList.tsx","8a230f6e-d323-4710-ae6c-aa295041257a",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Link, useLocation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: Message[];\n topicId: number;\n highlightedMessageId?: number;\n}\n\nexport function MessageList({ messages, topicId, highlightedMessageId }: MessageListProps) {\n const location = useLocation();\n\n if (messages.length === 0) {\n return (\n

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

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

\n {messages.map((message) => {\n const isHighlighted = message.id === highlightedMessageId;\n const formattedDate = new Date(message.createdAt).toDateString();\n const messageUrl = `/topics/${topicId}/messages/${message.id}`;\n\n return (\n \n

{message.content}

\n \n {formattedDate}\n \n

\n );\n })}\n \n );\n}",[],[281,445,461],"2aada166-1645-11f0-b5a9-569c3dd06744","MessageForm.tsx","7f905bdc-2fd9-4c56-96be-bdef68b02ee7",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n Form,\n useActionData,\n useNavigation,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\ninterface MessageFormProps {\n topicId: number;\n}\n\nexport function MessageForm({ topicId }: MessageFormProps) {\n const navigation = useNavigation();\n const isSubmitting = navigation.state === \"submitting\";\n let $form = React.useRef(null);\n\n // reset the form on success\n React.useEffect(function() {\n if (navigation.state === \"idle\" && $form.current) {\n $form.current.reset();\n }\n }, [navigation.state]);\n\n return (\n

Post a Message

\n \n

\n );\n}",[],[281,445,468],"2aad9ffe-1645-11f0-b5a9-569c3dd06744","LoadingSpinner.tsx","733a0e72-f8fc-427d-987d-8deb9e032e62",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface LoadingSpinnerProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport function LoadingSpinner({ size = \"medium\" }: LoadingSpinnerProps) {\n const sizeClasses = {\n small: \"w-4 h-4 border-2\",\n medium: \"w-8 h-8 border-3\",\n large: \"w-12 h-12 border-4\"\n };\n\n return (\n

\n );\n}",[],[281,445,475],"2aad9e8c-1645-11f0-b5a9-569c3dd06744","01bfe0c0-afc9-4a0f-9d29-56a7b7f0fb17",["D",1744314677289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Outlet, useNavigation } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { LoadingSpinner } from \"./LoadingSpinner.tsx\";\n\nexport function App() {\n const navigation = useNavigation();\n const isLoading = navigation.state === \"loading\";\n return (\n

\n {isLoading && (\n

\n \n

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

\n );\n}",[],[281,445,414],"2aadad5a-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[306,307,308,309,310,311,312],[281,445],["D",1744314677289],[305,313,314],[281],"2aad95e0-1645-11f0-b5a9-569c3dd06744","index.ts","3421c26d-7bba-42d0-aff7-e5aa65c56604",["D",1744314677289],"http","import { Hono } from \"https://esm.sh/hono@4.1.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { routes } from \"../shared/routes.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\n\n// Initialize the database\nawait initializeDatabase();\n\n// Create the Hono app\nconst app = new Hono();\n\n// Serve static files from the frontend directory\napp.get(\"/frontend/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the shared directory\napp.get(\"/shared/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// Serve static files from the routes directory\napp.get(\"/routes/*\", (c) => {\n const path = c.req.path;\n return serveFile(path, import.meta.url);\n});\n\n// LoaderData returns a map of loaderDatas for all matched loaders by an internal\n// id representation that looks like \"0-0\" and \"0-1\"\n// Some context: https://github.com/remix-run/react-router/blob/a3e4b8ed875611637357647fcf862c2bc61f4e11/packages/react-router/lib/hooks.tsx#L1093\n// This function combines all loader datas into a single object, which isn't technically correct, but might get us\n// pretty far.\n// Ultimately what we want is to only make one loader call for a new page navigation and then set the `state`\n// all at once with this exact object, and then have react router take care of sending the apprioriate state\n// to all the useLoaderDatas\nfunction parseData(data: any) {\n const entries = Object.values(data)\n .filter(Boolean)\n .flatMap((value: any) => Object.entries(value));\n return Object.fromEntries(entries);\n}\n\n// Create a static handler for server-side rendering\nconst { query, dataRoutes } = createStaticHandler(routes);\n\n// Handle all other routes with React Router\napp.all(\"*\", async (c) => {\n // Get the routing context by running loaders/actions\n const context = await query(c.req.raw);\n\n // If the context is a Response, return it directly (e.g., redirects)\n if (context instanceof Response) {\n return context;\n }\n console.log(context);\n\n if (\n c.req.header(\"Accept\") === \"application/json\"\n ) {\n // in theory we should use `queryRoute` for this, like here:\n // https://github.com/remix-run/custom-react-router-framework-example/blob/f5a141d67800e8da076cd1bb3130f29a8c0d4ce3/entry.server.tsx#L79\n // but i wasn't able to get that to work in my rewrite-server branch\n // maybe it depends on X-Route-Id?\n return Response.json(parseData(context.loaderData));\n } else if (c.req.header(\"Content-Type\")?.includes(\"application/x-www-form-urlencoded\"))\n {\n return Response.json(parseData(context.actionData));\n }\n // Create a static router for server-side rendering\n const router = createStaticRouter(dataRoutes, context);\n\n // Read the HTML template\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Render the app to a string\n const appHtml = renderToString(\n React.createElement(StaticRouterProvider, {\n router,\n context,\n }),\n );\n\n // Insert the rendered app and hydration data into the HTML template\n html = html.replace(\n \"

\",\n `

${appHtml}

`,\n );\n\n // Return the HTML with the appropriate headers\n return c.html(html);\n});\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Export the app for HTTP vals\nexport default app.fetch;",[],[148,495],[],[148,149,140],"2aad6c5a-1645-11f0-b5a9-569c3dd06744","migrations.ts","14131a22-86ee-46f4-8e29-368bc3bc2f73",["D",1744314677289],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names with versioning to allow for schema changes\nexport const TOPICS_TABLE = \"message_board_topics_v1\";\nexport const MESSAGES_TABLE = \"message_board_messages_v1\";\n\n/**\n * Initialize the database schema\n */\nexport async function initializeDatabase() {\n // Create topics table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TOPICS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topicId INTEGER NOT NULL,\n content TEXT NOT NULL,\n createdAt TEXT NOT NULL,\n FOREIGN KEY (topicId) REFERENCES ${TOPICS_TABLE}(id)\n )\n `);\n\n // Create indexes for faster queries\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_messages_topicId \n ON ${MESSAGES_TABLE} (topicId)\n `);\n\n // Seed initial data if the topics table is empty\n const existingTopics = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TOPICS_TABLE}`);\n \n if (existingTopics.rows[0].count === 0) {\n await seedInitialData();\n }\n}\n\n/**\n * Seed the database with initial data for demonstration\n */\nasync function seedInitialData() {\n // Insert sample topics\n await sqlite.execute(`\n INSERT INTO ${TOPICS_TABLE} (title, createdAt) VALUES\n ('Welcome to the Message Board', '${new Date().toISOString()}'),\n ('Tips and Tricks for Val Town', '${new Date().toISOString()}'),\n ('Introduce Yourself', '${new Date().toISOString()}')\n `);\n\n // Get the IDs of the inserted topics\n const topics = await sqlite.execute(`SELECT id FROM ${TOPICS_TABLE} LIMIT 3`);\n \n // Insert sample messages for each topic\n if (topics.rows.length > 0) {\n const welcomeTopicId = topics.rows[0].id;\n const tipsTopicId = topics.rows[1].id;\n const introTopicId = topics.rows[2].id;\n\n await sqlite.execute(`\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt) VALUES\n (${welcomeTopicId}, 'Welcome to our community message board! Feel free to browse around and join the discussions.', '${new Date().toISOString()}'),\n (${welcomeTopicId}, 'If you have any questions, just post them here!', '${new Date(Date.now() - 3600000).toISOString()}'),\n (${tipsTopicId}, 'Val Town makes it easy to build and share serverless functions.', '${new Date().toISOString()}'),\n (${tipsTopicId}, 'You can use TypeScript for better type safety in your projects.', '${new Date(Date.now() - 7200000).toISOString()}'),\n (${introTopicId}, 'Hi everyone! I\\'m the creator of this message board example.', '${new Date().toISOString()}')\n `);\n }\n}",[],[148,149,505],"2aad9464-1645-11f0-b5a9-569c3dd06744",["D",1744314677289],[301,302],[148,149],["D",1744314677289],[300,303],[148],["D",1744152661331],["D",1789558275908],{"_11":12,"_228":224},{"_11":12,"_222":-5,"_223":224,"_192":193,"_225":226,"_227":55},{"_47":62,"_13":16,"_33":63,"_45":46,"_49":39,"_50":64,"_65":57,"_66":46,"_67":60,"_61":14,"_58":12},"ctx",{"_217":-5,"_247":556,"_557":558,"_559":560,"_561":55,"_562":55,"_563":55,"_564":26,"_565":-5,"_566":-7,"_567":-7,"_568":183,"_569":55,"_570":55,"_571":-5,"_572":55,"_573":55,"_574":55,"_575":-5},"ENV",{"_527":528,"_529":530,"_531":44,"_532":533,"_534":535,"_536":537,"_538":539,"_540":541,"_542":543,"_544":545,"_546":547,"_548":549,"_550":551,"_552":553,"_554":555},"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"]

Compare

Mergedelete-buttonintomain

README.md+3-0

backend/database/queries.ts+18-0

routes/Home.tsx+26-1

shared/routes.ts+4-0

routes/DeleteAll.action.ts+16-0