Forked from park/btc
Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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
72
73
74
75
76
/** @jsxImportSource https://esm.sh/react */
import { useEffect, useState } from "https://esm.sh/react";
import { renderToString } from "npm:react-dom/server";
async function getSchedule() {
try {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const data = await fetch(
`https://api.stage.teamsurfboard.com/api/v1/schedule?start=${today.toISOString()}&end=${tomorrow.toISOString()}`,
{
headers: {
// ADD YOUR API TOKEN INTO THE ENV VARIABLES
"Authorization": `Bearer ${Deno.env.get("TEAMSURFBOARD_API_TOKEN")}`,
},
},
)
.then((res) => res.json())
.then((data) => data);
return data;
} catch (error) {
console.error("An error occurred:", error.message);
return null;
}
}
const processData = (data, hours) => {
return data.data.map((item) => {
return {
interval: item.interval,
hours: hours,
};
});
};
function Schedule({ data }) {
if (!data) return <p>Failed to fetch</p>;
const [hours, setHours] = useState(10);
const processedData = processData(data, hours);
console.log(processedData);
return (
<div>
<div>
<input type="number" value={hours} onChange={(e) => setHours(e.target.value)} />
{processedData?.map((item) => {
return (
<div>
<p>{item.interval.start}</p>
<p>{item.hours}</p>
</div>
);
})}
</div>
</div>
);
}
const App = ({ data }) => (
<html>
<head />
<body>
<h1>Val Town React Client Demo</h1>
<Schedule data={data} />
</body>
</html>
);
export default async function(req: Request): Promise<Response> {
const scheduleData = await getSchedule();
const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });
return new Response(stream, { headers: { "content-type": "text/html" } });
}