feat(calendar): add calendar to home page

src/app/(main)/home/page.tsx

@@ -1,22 +1,17 @@
 'use client';
 
-import { RedirectButton } from '@/components/buttons/redirect-button';
+import Calendar from '@/components/calendar';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {
-  const { data, isLoading } = useGetApiUserMe();
+  const { data } = useGetApiUserMe();
 
   return (
-    <div className='flex flex-col items-center justify-center h-full'>
+    <div className='max-h-full'>
-      <div>
+      <Calendar
-        <h1>
+        userId={data?.data.user?.id}
-          Hello{' '}
+        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
-          {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
+      />
-        </h1>
-        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
-        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
-        <RedirectButton redirectUrl='/events/new' buttonText='New Event' />
-      </div>
     </div>
   );
-};
+}

src/app/api/user/[user]/calendar/route.ts

@@ -217,6 +217,10 @@ export const GET = auth(async function GET(req, { params }) {
 
   return returnZodTypeCheckedResponse(UserCalendarResponseSchema, {
     success: true,
-    calendar,
+    calendar: calendar.filter(
+      (event, index, self) =>
+        self.findIndex((e) => e.id === event.id && e.type === event.type) ===
+        index,
+    ),
   });
 });

src/components/calendar.tsx

@@ -41,7 +41,13 @@ const DaDRBCalendar = withDragAndDrop<
 
 const localizer = momentLocalizer(moment);
 
-export default function Calendar({ userId }: { userId?: string }) {
+export default function Calendar({
+  userId,
+  height,
+}: {
+  userId?: string;
+  height: string;
+}) {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
@@ -62,9 +68,9 @@ export default function Calendar({ userId }: { userId?: string }) {
           )}
         >
           {userId ? (
-            <CalendarWithUserEvents userId={userId} />
+            <CalendarWithUserEvents userId={userId} height={height} />
           ) : (
-            <CalendarWithoutUserEvents />
+            <CalendarWithoutUserEvents height={height} />
           )}
         </ErrorBoundary>
       )}
@@ -72,7 +78,13 @@ export default function Calendar({ userId }: { userId?: string }) {
   );
 }
 
-function CalendarWithUserEvents({ userId }: { userId: string }) {
+function CalendarWithUserEvents({
+  userId,
+  height,
+}: {
+  userId: string;
+  height: string;
+}) {
   const sesstion = useSession();
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
@@ -131,6 +143,9 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
       components={{
         toolbar: CustomToolbar,
       }}
+      style={{
+        height: height,
+      }}
       onView={setCurrentView}
       view={currentView}
       date={currentDate}
@@ -213,7 +228,7 @@ function CalendarWithUserEvents({ userId }: { userId: string }) {
   );
 }
 
-function CalendarWithoutUserEvents() {
+function CalendarWithoutUserEvents({ height }: { height: string }) {
   const [currentView, setCurrentView] = React.useState<
     'month' | 'week' | 'day' | 'agenda' | 'work_week'
   >('week');
@@ -224,6 +239,9 @@ function CalendarWithoutUserEvents() {
       localizer={localizer}
       culture='de-DE'
       defaultView='week'
+      style={{
+        height: height,
+      }}
       components={{
         toolbar: CustomToolbar,
       }}

src/components/custom-toolbar.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
+  padding: calc(var(--spacing) * 2);
+  padding-left: calc(50px + var(--spacing));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

src/components/misc/header.tsx

@@ -45,7 +45,7 @@ export default function Header({
           <UserDropdown />
         </span>
       </header>
-      <main>{children}</main>
+      <main className='max-h-full overflow-y-auto p-5'>{children}</main>
     </div>
   );
 }

src/components/react-big-calendar.css

@@ -810,9 +810,6 @@ button.rbc-input::-moz-focus-inner {
   -ms-flex-direction: row;
   flex-direction: row;
 }
-.rbc-time-header.rbc-overflowing {
-  border-right: 1px solid #ddd;
-}
 .rbc-rtl .rbc-time-header.rbc-overflowing {
   border-right-width: 0;
   border-left: 1px solid #ddd;