/** @jsxImportSource npm:react **/ import { renderToString } from "npm:react-dom@18/server"; import { addDays } from "npm:date-fns"; import moment from "npm:moment"; export default async function(req: Request): Promise { // ============= Data Fetching ================= const today = new Date(); const tomorrow = addDays(today, 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); // ============= React Components ================= const Schedule = ({ data }) => { const groupedSchedules = groupSchedulesByDate(data.data); return (

{Object.entries(groupedSchedules).map(([date, schedules]) => (

{moment(date).format("MMMM D, YYYY")}

{schedules.map((schedule, index) => )}

))}

); }; const ScheduleItem = ({ schedule }) => { return (

{schedule.surfer.email}

Shift: {moment(schedule.interval.start).format("HH:mm")} - {moment(schedule.interval.end).format("HH:mm")}

{schedule.taskSchedule?.length > 0 ? (

{task.task.name} {moment(task.interval.start).format("HH:mm")} - {moment(task.interval.end).format("HH:mm")}

) :

No tasks scheduled

}

); }; function groupSchedulesByDate(schedules) { return schedules.reduce((acc, schedule) => { const date = schedule.interval.start.split("T")[0]; if (!acc[date]) { acc[date] = []; } acc[date].push(schedule); return acc; }, {}); } // ============= Styles ================= const styles = { container: { fontFamily: "Arial, sans-serif", maxWidth: "1200px", margin: "0 auto", padding: "20px", backgroundColor: "#f5f5f5", }, dateGroup: { marginBottom: "30px", }, dateHeader: { color: "#333", borderBottom: "2px solid #3498db", paddingBottom: "10px", marginBottom: "20px", }, scheduleGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "20px", }, scheduleItem: { backgroundColor: "white", borderRadius: "8px", padding: "20px", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", ":hover": { transform: "translateY(-5px)", }, }, surferEmail: { color: "#3498db", marginTop: "0", marginBottom: "10px", fontSize: "1.2em", }, shiftTime: { fontWeight: "bold", color: "#555", marginBottom: "15px", }, taskList: { listStyleType: "none", padding: "0", margin: "0", }, taskItem: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #eee", }, taskName: { color: "#333", fontWeight: "bold", }, taskTime: { color: "#777", fontSize: "0.9em", }, noTasks: { color: "#777", fontStyle: "italic", }, }; // ============= Final Response ================= return new Response( renderToString(

24 Hour Schedule for Teamsurfboard Staging:

, ), { headers: { "Content-Type": "text/html" } }, ); }

keenanzucker