import { fetchBcycleCounts } from "https://esm.town/v/jonbo/fetchBcycleCounts";
export const reactSSRExample = async (req: express.Request, res: express.Response) => {
const React = await import("npm:react");
const ReactDOMServer = await import("npm:react-dom/server");
function BusTime(props) {
return React.createElement("span", null, "southbound in 5 minutes");
}
function BikeLocation(props) {
return React.createElement(
"li",
null,
`${props.name} has ${props.bikesAvailable} bikes, ${props.docksAvailable} docks`,
);
}
function BikesList(props) {
const bikeEls = props.items.map((item, index) => {
return React.createElement(BikeLocation, {
key: index,
name: item.name,
bikesAvailable: item.bikesAvailable,
docksAvailable: item.docksAvailable,
});
});
return React.createElement("ul", null, bikeEls);
}
const data = fetchBcycleCounts;
const filtered = data.filter((row) => row.id == 7305 || row.id == 1871);
const currentTime = new Date();
const formattedTime = currentTime.toLocaleTimeString("en-US", {
timeZone: "America/Denver",
hour: "2-digit",
minute: "2-digit",
hour12: true,
});
const html = ReactDOMServer.renderToString(
React.createElement(
React.Fragment,
null,
React.createElement("h2", null, "bikes"),
React.createElement(BikesList, { items: filtered }),
React.createElement("p", null, `Data fresh as of ${formattedTime}`),
),
);
const fullHtml = `
<html>
<head>
<meta http-equiv="refresh" content="60">
<style>
body {
font: 1em sans-serif;
}
body {
color: white;
background-color: black;
}
</style>
</head>
<body>
${html}
</body>
</html>
`;
res.send(fullHtml);
};