calendar added

package.json

@@ -71,6 +71,7 @@
     "notion-client": "^6.16.0",
     "pdf-lib": "^1.17.1",
     "react": "^18",
+    "react-big-calendar": "^1.13.2",
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.1.0",
@@ -105,6 +106,7 @@
     "@testing-library/react": "^15.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-big-calendar": "^1.8.9",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",

src/actions/calendar/index.ts

@@ -0,0 +1,54 @@
+'use server';
+
+import db from '@/db';
+import { ContentType, InputTypeGetEvents, ReturnTypeGetEvents } from './types';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { getEventsSchema } from './schema';
+import { createSafeAction } from '@/lib/create-safe-action';
+
+export const getEventsHandler = async (
+  data: InputTypeGetEvents,
+): Promise<ReturnTypeGetEvents> => {
+  try {
+    const session = await getServerSession(authOptions);
+
+    if (!session || !session.user) {
+      return { error: 'Unauthorized or insufficient permissions' };
+    }
+
+    const folders = await db.courseContent.findMany({
+      where: {
+        courseId: data.courseId,
+      },
+      include: {
+        content: {
+          select: {
+            children: true,
+          },
+        },
+      },
+    });
+
+    const content: ContentType[] = [];
+
+    folders.forEach((folder) => {
+      folder.content.children.forEach((el) => {
+        if (el.type === 'video') {
+          content.push({
+            id: el.id,
+            title: el.title,
+            start: el.createdAt,
+            end: el.createdAt,
+          });
+        }
+      });
+    });
+
+    return { data: content };
+  } catch (err: any) {
+    return { error: err.message || 'Failed to fetch events' };
+  }
+};
+
+export const getEvents = createSafeAction(getEventsSchema, getEventsHandler);

src/actions/calendar/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const getEventsSchema = z.object({
+  courseId: z.number(),
+});

src/actions/calendar/types.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+import { getEventsSchema } from './schema';
+import { ActionState } from '@/lib/create-safe-action';
+
+export type InputTypeGetEvents = z.infer<typeof getEventsSchema>;
+export type ReturnTypeGetEvents = ActionState<
+  InputTypeGetEvents,
+  ContentType[]
+>;
+
+export type ContentType = {
+  id: number;
+  title: string;
+  start: Date;
+  end: Date;
+};

src/app/error.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
 import { InfoIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect } from 'react';
 
 export default function ErrorPage({
   error,
-  reset,
 }: {
   error: Error & { digest?: string };
   reset: () => void;

src/app/globals.css

@@ -66,7 +66,6 @@
   transform: translateX(-50%);
 }
 
-
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
@@ -87,7 +86,7 @@
   display: block !important;
 }
 
-.video-js .vjs-current-time{
+.video-js .vjs-current-time {
   display: block !important;
 }
 
@@ -111,30 +110,29 @@ width of the controls on screens smaller than 512px */
   }
 
   .video-js .vjs-control {
-    width: 2rem !important; 
+    width: 2rem !important;
   }
 }
 
-.vjs-tech:focus-visible{
+.vjs-tech:focus-visible {
   outline: none;
 }
 
-.timeline-segments  {
+.timeline-segments {
   position: relative;
   left: 0;
   height: 5px;
   background-color: #afa4a4;
   transition: height 150ms ease-in-out;
 }
-.timeline-segments-preview{
+.timeline-segments-preview {
   position: absolute;
   left: 0;
   background: #fff;
   top: 0;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-
 }
 .timeline-segments-progress {
   position: absolute;
@@ -144,8 +142,44 @@ width of the controls on screens smaller than 512px */
   bottom: 0;
   z-index: 2;
   pointer-events: none;
-
 }
-.timeline-segments:hover{
+.timeline-segments:hover {
   height: 10px;
-}
+}
+
+.rbc-header {
+  color: var(--header-color);
+  font-size: 14px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px !important;
+  background: #17405d;
+}
+
+.rbc-allday-cell {
+  display: none;
+}
+
+.rbc-time-slot {
+  color: #74a4c3;
+  z-index: 1;
+}
+
+.rbc-event {
+  min-width: auto;
+}
+
+.rbc-month-content {
+  border-radius: 20px;
+}
+
+.rbc-event-label {
+  display: none;
+}
+
+.rbc-event-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Appbar.tsx

@@ -15,11 +15,15 @@ import SearchBar from './search/SearchBar';
 import MobileScreenSearch from './search/MobileScreenSearch';
 import ProfileDropdown from './profile-menu/ProfileDropdown';
 import { ThemeToggler } from './ThemeToggler';
+import { CalendarDialog } from './Calendar';
+import { useEvents } from '@/hooks/useEvents';
 
 export const Appbar = () => {
   const { data: session, status: sessionStatus } = useSession();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
   const currentPath = usePathname();
+  const courseId = currentPath.split('/')[2];
+  const { events } = useEvents(courseId);
 
   const isLoading = sessionStatus === 'loading';
 
@@ -43,9 +47,13 @@ export const Appbar = () => {
                 <div className="hidden md:block">
                   <SearchBar />
                 </div>
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center space-x-7">
                   {/* Search Bar for smaller devices */}
                   <MobileScreenSearch />
+                  <CalendarDialog
+                    inCourse={courseId ? true : false}
+                    events={events!}
+                  />
                   <ProfileDropdown />
                 </div>
               </>

src/components/Calendar.tsx

@@ -0,0 +1,93 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { Calendar, dayjsLocalizer, View, Views } from 'react-big-calendar';
+import dayjs from 'dayjs';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import { useCallback, useState } from 'react';
+
+const localizer = dayjsLocalizer(dayjs);
+
+interface CalendarProps {
+  inCourse: boolean;
+  events: { id: number; title: String; start: Date; end: Date }[];
+}
+
+const MyCalendar = ({
+  events,
+}: {
+  events: {
+    id: number;
+    title: String;
+    start: Date;
+    end: Date;
+  }[];
+}) => {
+  const [view, setView] = useState<View>(Views.MONTH);
+
+  const [date, setDate] = useState(new Date());
+
+  const onNavigate = useCallback(
+    (newDate: Date) => {
+      return setDate(newDate);
+    },
+    [setDate],
+  );
+
+  const calendarStyle = () => {
+    return {
+      style: {
+        backgroundColor: 'white',
+        color: 'black',
+      },
+    };
+  };
+
+  const handleOnChangeView = (selectedView: View) => {
+    setView(selectedView);
+  };
+
+  return (
+    <div>
+      <Calendar
+        date={date}
+        onNavigate={onNavigate}
+        localizer={localizer}
+        events={events}
+        view={view}
+        defaultView={Views.MONTH}
+        views={['month', 'week', 'day']}
+        showMultiDayTimes
+        style={{ height: 500 }}
+        onView={handleOnChangeView}
+        dayPropGetter={calendarStyle}
+      />
+    </div>
+  );
+};
+
+export const CalendarDialog = ({ inCourse, events }: CalendarProps) => {
+  if (!inCourse) return null;
+
+  return (
+    <Dialog>
+      <DialogTrigger className="cursor-pointer" asChild>
+        <CalendarIcon />
+      </DialogTrigger>
+      <DialogContent className="min-w-[900px] max-w-fit">
+        <DialogHeader>
+          <DialogTitle>Track your progress</DialogTitle>
+          <DialogDescription>
+            <MyCalendar events={events} />
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};