/** * This application helps users write detailed reviews of coffee shops. It fetches coffee shop data * from the OpenStreetMap Nominatim API, allows users to add custom details, and stores the augmented * information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews. * * It uses React for the frontend, the Nominatim API for initial coffee shop data, * and Val Town's SQLite for data persistence. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [coffeeShops, setCoffeeShops] = useState([]); const [reviews, setReviews] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [selectedShop, setSelectedShop] = useState(null); const [reviewForm, setReviewForm] = useState({ coffeeMachineBrand: "", latteArtConsistency: 0, roastOwnBeans: false, additionalNotes: "", }); useEffect(() => { fetchReviews(); }, []); const fetchCoffeeShops = async () => { try { const response = await fetch(`/api/coffee-shops?search=${encodeURIComponent(searchTerm)}`); if (!response.ok) throw new Error("Failed to fetch coffee shops"); const data = await response.json(); setCoffeeShops(data); } catch (error) { console.error("Error fetching coffee shops:", error); } }; const fetchReviews = async () => { try { const response = await fetch("/api/reviews"); if (!response.ok) throw new Error("Failed to fetch reviews"); const data = await response.json(); setReviews(data); } catch (error) { console.error("Error fetching reviews:", error); } }; const handleSubmitReview = async (e) => { e.preventDefault(); if (!selectedShop) return; const reviewData = { ...selectedShop, ...reviewForm, }; try { const response = await fetch("/api/reviews", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(reviewData), }); if (!response.ok) throw new Error("Failed to submit review"); setSelectedShop(null); setReviewForm({ coffeeMachineBrand: "", latteArtConsistency: 0, roastOwnBeans: false, additionalNotes: "", }); fetchReviews(); } catch (error) { console.error("Error submitting review:", error); } }; return (

Coffee Shop Reviewer

setSearchTerm(e.target.value)} placeholder="Search for coffee shops" />

Search Results

setSelectedShop(shop)}> {shop.name} - {shop.address}, {shop.city}

{selectedShop && (

Add Review for {selectedShop.name}

)}

Coffee Shop Reviews

{review.name}

Address: {review.address}, {review.city}

Coffee Machine: {review.coffeeMachineBrand}

Latte Art Consistency: {review.latteArtConsistency}/10

Roasts Own Beans: {review.roastOwnBeans ? "Yes" : "No"}

Additional Notes: {review.additionalNotes}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const url = new URL(request.url); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 2; // Increment this when changing the schema console.log("Received request for:", url.pathname); try { // Create table if it doesn't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_coffee_reviews_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, name TEXT, address TEXT, city TEXT, coffeeMachineBrand TEXT, latteArtConsistency INTEGER, roastOwnBeans INTEGER, additionalNotes TEXT ) `); console.log("Table checked/created successfully"); if (url.pathname === "/api/coffee-shops") { const searchTerm = url.searchParams.get("search") || ""; // Fetch coffee shops from OpenStreetMap Nominatim API const nominatimUrl = `https://nominatim.openstreetmap.org/search?q=coffee+${ encodeURIComponent(searchTerm) }&format=json&addressdetails=1`; const nominatimResponse = await fetch(nominatimUrl, { headers: { "User-Agent": "CoffeeShopReviewer/1.0", }, }); if (!nominatimResponse.ok) { throw new Error(`Nominatim API error! status: ${nominatimResponse.status}`); } const nominatimData = await nominatimResponse.json(); if (!Array.isArray(nominatimData)) { throw new Error("Invalid data received from Nominatim API"); } const coffeeShops = nominatimData.map((shop: any) => ({ id: shop.place_id.toString(), name: shop.name || "Unnamed Coffee Shop", address: shop.address?.road || shop.display_name, city: shop.address?.city || shop.address?.town || shop.address?.village || "", })); return new Response(JSON.stringify(coffeeShops), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/api/reviews") { if (request.method === "GET") { const reviews = await sqlite.execute(`SELECT * FROM ${KEY}_coffee_reviews_${SCHEMA_VERSION}`); console.log("Fetched reviews:", reviews.rows); return new Response(JSON.stringify(reviews.rows), { headers: { "Content-Type": "application/json" }, }); } else if (request.method === "POST") { const review = await request.json(); console.log("Received review:", review); if (!review.id || !review.name || !review.address || !review.city) { throw new Error("Missing required fields in review data"); } const result = await sqlite.execute( ` INSERT OR REPLACE INTO ${KEY}_coffee_reviews_${SCHEMA_VERSION} (id, name, address, city, coffeeMachineBrand, latteArtConsistency, roastOwnBeans, additionalNotes) VALUES (?, ?, ?, ?, ?, ?, ?, ?) `, [ review.id, review.name, review.address, review.city, review.coffeeMachineBrand || null, review.latteArtConsistency || null, review.roastOwnBeans ? 1 : 0, review.additionalNotes || null, ], ); console.log("Insert result:", result); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } } // Serve HTML for all other routes return new Response( ` Coffee Shop Reviewer

`, { headers: { "content-type": "text/html", }, }, ); } catch (error) { console.error("Server error:", error); return new Response( JSON.stringify({ error: "Internal Server Error", message: error.message, stack: error.stack, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1, h2 { color: #333; } input[type="text"], input[type="number"], textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #5cb85c; color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 4px; } button:hover { background-color: #4cae4c; } ul { list-style-type: none; padding: 0; } li { background-color: #f9f9f9; margin-bottom: 10px; padding: 10px; border-radius: 4px; } .search-section, .results-section, .review-form, .reviews-section { margin-bottom: 20px; } `; export default server;

Coffee Shop Reviewer

Search Results

Add Review for {selectedShop.name}

Coffee Shop Reviews

{review.name}

hungryWhiteLeopon