Bike Inventory

{title}

\n \n

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

Bike Inventory

\n \n \n \n

\n {error &&

{error}

}\n

\n \n

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

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

\n View Source\n

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

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/all/bikeInventory/code/main.tsx","extension","actionData","errors"]