9 const [messages, setMessages] = React.useState(initialMessages);
10
11 const fetchMessages = async () => {
12 try {
13 const response = await fetch("/messages");
14 const data = await response.json();
15 setMessages(data.reverse());
16 } catch (error) {
17 console.error("Failed to fetch messages", error);
18 }
19 };
23 <h1>💬 Message Board!</h1>
24 <MessageList messages={messages} />
25 <MessageInput onSubmit={fetchMessages} />
26 {thisProjectURL
27 ? (
21});
22
23// HTTP vals expect an exported "fetch handler"
24// This is how you "run the server" in Val Town with Hono
25export default app.fetch;
231 const mapHeight = gardenMap.clientHeight;
232
233 // Fetch all plants
234 async function fetchPlants() {
235 try {
236 const response = await fetch('/api/plants');
237 plants = await response.json();
238
239 renderPlants();
240 } catch (error) {
241 console.error('Error fetching plants:', error);
242 }
243 }
422 if (plantData.id) {
423 // Update existing plant
424 response = await fetch(`/api/plants/${plantData.id}`, {
425 method: 'PUT',
426 headers: { 'Content-Type': 'application/json' },
429 } else {
430 // Create new plant
431 response = await fetch('/api/plants', {
432 method: 'POST',
433 headers: { 'Content-Type': 'application/json' },
441
442 // Refresh plants
443 await fetchPlants();
444
445 // Reset UI
460
461 try {
462 const response = await fetch(`/api/plants/${id}`, {
463 method: 'DELETE'
464 });
469
470 // Refresh plants
471 await fetchPlants();
472
473 // Reset UI
546
547 // Initialize
548 fetchPlants();
549
550 // Prevent unwanted touch behaviors on the map
9
10 // Proxy the request to the old blog
11 const response = await fetch(
12 new Request(OLD_BLOG_URL + url.pathname + url.search, {
13 method: c.req.method,
32
33/**
34 * Creates a wrapper around a fetch handler that injects a script tag into HTML responses
35 *
36 * @param handler The original fetch handler function
37 * @param scriptContent The HTML content to inject
38 * @returns A new fetch handler with HTML rewriting capability
39 */
40export function injectHTML(
39});
40
41// Export the fetch handler for Val Town
42export default liveReload(app.fetch, import.meta.url);
83We didn't. We left them where they are, and proxy to them.
84
85Writing a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:
86
87```ts
89export async function proxy(req: Request): Promise<Response> {
90 const url = new URL(req.url);
91 return fetch(OLD_BLOG_HOST + url.pathname + url.search, {
92 method: req.method,
93 headers: req.headers,
21});
22
23// HTTP vals expect an exported "fetch handler"
24// This is how you "run the server" in Val Town with Hono
25export default app.fetch;
8 useEffect(() => {
9 const getMyIp = async () => {
10 const response = await fetch("https://api.ipify.org?format=json");
11 const data = await response.json();
12 setMyIp(data.ip);
1/** @jsxImportSource npm:hono/jsx **/
2
3import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
4import { iframeHandler } from "https://esm.town/v/nbbaier/iframeHandler";
5import { resetStyle } from "https://esm.town/v/nbbaier/resetStyle";
16import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
17import { ResultSet, sqlite } from "https://esm.town/v/std/sqlite";
18import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
19import { Hono } from "npm:hono";
20import type { FC } from "npm:hono/jsx";
175});
176
177export const handler = app.fetch;
178export default iframeHandler(modifyFetchHandler(passwordAuth(handler, { verifyPassword: verifyToken })));