Bike Inventory

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { init, tx, id } from "https://esm.sh/@instantdb/core@0.12.12"; const APP_ID = "5518c0f9-481c-4aa8-85cd-eee42bd45319"; function BikeWindow({ bike, onSave, onClose, title }) { const [brand, setBrand] = useState(bike?.brand || ""); const [model, setModel] = useState(bike?.model || ""); const [type, setType] = useState(bike?.type || ""); const [year, setYear] = useState(bike?.year || ""); const [lastMaintenance, setLastMaintenance] = useState(bike?.lastMaintenance || ""); const [imageUrl, setImageUrl] = useState(bike?.imageUrl || ""); const handleSubmit = (e) => { e.preventDefault(); onSave({ id: bike?.id, brand, model, type, year: parseInt(year), lastMaintenance, imageUrl }); }; return (

{title}

); } function App() { const [bikes, setBikes] = useState([]); const [error, setError] = useState(null); const [db, setDb] = useState(null); const [editingBike, setEditingBike] = useState(null); const [addingBike, setAddingBike] = useState(false); useEffect(() => { console.log("App component mounted"); const initDb = async () => { try { const database = await init({ appId: APP_ID }); setDb(database); console.log("InstantDB initialized successfully"); } catch (err) { console.error("Error initializing InstantDB:", err); setError(`Failed to initialize database: ${err.message}`); } }; initDb(); }, []); useEffect(() => { if (db) { db.subscribeQuery({ bikes: {} }, (resp) => { if (resp.error) { setError(`Error fetching bikes: ${resp.error.message}`); return; } if (resp.data) { console.log("Fetched bikes:", resp.data.bikes); setBikes(resp.data.bikes || []); } }); } }, [db]); const addBike = async (bikeData) => { if (db) { try { await db.transact( tx.bikes[id()].update({ ...bikeData, createdAt: Date.now(), }) ); console.log("Bike added successfully"); setAddingBike(false); } catch (err) { console.error("Error adding bike:", err); setError(`Failed to add bike: ${err.message}`); } } else { setError("Database not initialized. Please refresh the page."); } }; const updateBike = async (bikeData) => { if (db) { try { await db.transact(tx.bikes[bikeData.id].update(bikeData)); console.log("Bike updated successfully"); setEditingBike(null); } catch (err) { console.error("Error updating bike:", err); setError(`Failed to update bike: ${err.message}`); } } }; const deleteBike = async (bikeId) => { if (db) { try { await db.transact(tx.bikes[bikeId].delete()); console.log("Bike deleted successfully"); } catch (err) { console.error("Error deleting bike:", err); setError(`Failed to delete bike: ${err.message}`); } } }; const addInitialBikes = async () => { if (db && bikes.length === 0) { const initialBikes = [ { brand: "Trek", model: "Domane", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/trek-domane-road-bike" }, { brand: "Specialized", model: "Stumpjumper", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/specialized-stumpjumper-mountain-bike" }, { brand: "Cannondale", model: "CAAD13", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/cannondale-caad13-road-bike" }, { brand: "Giant", model: "Trance", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/giant-trance-mountain-bike" }, { brand: "Bianchi", model: "Oltre", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/bianchi-oltre-road-bike" }, { brand: "Santa Cruz", model: "Hightower", type: "Mountain", year: 2021, imageUrl: "https://maxm-imggenurl.web.val.run/santa-cruz-hightower-mountain-bike" }, { brand: "Cervélo", model: "S5", type: "Road", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/cervelo-s5-road-bike" }, { brand: "Yeti", model: "SB150", type: "Mountain", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/yeti-sb150-mountain-bike" }, { brand: "Pinarello", model: "Dogma F", type: "Road", year: 2023, imageUrl: "https://maxm-imggenurl.web.val.run/pinarello-dogma-f-road-bike" }, { brand: "BMC", model: "Fourstroke", type: "Mountain", year: 2022, imageUrl: "https://maxm-imggenurl.web.val.run/bmc-fourstroke-mountain-bike" } ]; try { for (const bike of initialBikes) { await db.transact( tx.bikes[id()].update({ ...bike, createdAt: Date.now(), }) ); } console.log("Initial bikes added successfully"); } catch (err) { console.error("Error adding initial bikes:", err); setError(`Failed to add initial bikes: ${err.message}`); } } }; useEffect(() => { if (db) { addInitialBikes(); } }, [db]); console.log("Rendering App component"); return (

Bike Inventory

{error &&

{error}

}

{bikes.map((bike) => ( ))}

Image	Brand	Model	Type	Year	Last Maintenance	Actions
{bike.imageUrl && ( )}	{bike.brand}	{bike.model}	{bike.type}	{bike.year}	{bike.lastMaintenance \|\| 'N/A'}

View Source

{editingBike && ( setEditingBike(null)} title="Edit Bike" /> )} {addingBike && ( setAddingBike(false)} title="Add Bike" /> )}

); } function client() { console.log("Client function called"); const root = document.getElementById("root"); if (root) { console.log("Root element found, rendering App"); createRoot(root).render(); } else { console.error("Root element not found"); } } if (typeof document !== "undefined") { console.log("Document is defined, calling client function"); client(); } else { console.log("Document is undefined, skipping client-side rendering"); } async function server(request: Request): Promise { console.log("Server function called"); return new Response( ` Bike Inventory

`, { headers: { "content-type": "text/html", }, } ); } export default server;

bikeInventory