1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { fetchBcycleCounts } from "https://esm.town/v/jonbo/fetchBcycleCounts";
export const reactSSRExample = async (req: express.Request, res: express.Response) => {
// Import React
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);
// Get current time in MST
const currentTime = new Date();
const formattedTime = currentTime.toLocaleTimeString("en-US", {
timeZone: "America/Denver",
hour: "2-digit",
minute: "2-digit",
hour12: true,
});
// Render the page
const html = ReactDOMServer.renderToString(
React.createElement(
React.Fragment,
null,
React.createElement("h2", null, "bikes"),
React.createElement(BikesList, { items: filtered }),
// React.createElement("h2", null, "busses"),
// React.createElement(BusTime, {}),
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);
};