regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish loader for event calendar

Browse Source
This commit is contained in:
Regalijan 2024-09-17 02:44:15 -04:00
parent 6f316c0752
commit 7eefe190f5
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/routes/events-calendar.tsx
View File

@ -1,31 +1,57 @@
import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
import { Calendar, dayjsLocalizer } from "react-big-calendar";
import dayjs from "dayjs";
import { type LinksFunction } from "@remix-run/cloudflare";
import { Container } from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";
export const links: LinksFunction = () => {
return [{ href: calendarStyles, rel: "stylesheet" }];
};
export async function loader({ context }: { context: RequestContext }) {
const now = new Date();
const eventsData = await context.env.D1.prepare("SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day;")
const eventsData = await context.env.D1.prepare(
"SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day;",
)
.bind(now.getUTCMonth() + 1, now.getUTCFullYear())
.all();
if (eventsData.error) throw new Response(null, {
status: 500,
});
if (eventsData.error)
throw new Response(null, {
status: 500,
});
const eventList = eventsData.results.map(e => {
const calendarData = eventsData.results.map((e) => {
return {
id: e.id,
title: (e.type as string).toUpperCase(),
allDay: true,
start: new Date(e.year, e.month, e.day),
end: new Date(e.year, e.month, e.day)
}
})
start: new Date(
e.year as number,
(e.month as number) - 1,
e.day as number,
),
end: new Date(e.year as number, (e.month as number) - 1, e.day as number),
};
});
return {
calendarData,
eventList: eventsData.results,
};
}
export default function () {
const data = useLoaderData<typeof loader>();
return (
<Calendar localizer={dayjsLocalizer(dayjs)} style={{ height: 500 }} />
)
<Container maxW="container.lg" h="600px">
<Calendar
events={data?.eventList}
localizer={dayjsLocalizer(dayjs)}
style={{ height: 500 }}
/>
</Container>
);
}