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,52 @@
+'use server';
+
+import db from '@/db';
+import { ContentType } from './types';
+import { cache } from '@/db/Cache';
+import { getEventsSchema } from './schema';
+
+export const getEvents = async (courseId: number): Promise<ContentType[]> => {
+  try {
+    const { success } = getEventsSchema.safeParse({ courseId });
+
+    if (!success) {
+      console.log('Parsing failed');
+      return [];
+    }
+    const value = await cache.get('getEvents', [courseId.toString()]);
+    if (value) {
+      return value;
+    }
+    const folders = await db.courseContent.findMany({
+      where: {
+        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,
+          });
+        }
+      });
+    });
+    cache.set('getEvents', [courseId.toString()], content);
+    return content;
+  } catch (err) {
+    console.error(err);
+    return [];
+  }
+};

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,11 @@
+import { z } from 'zod';
+import { getEventsSchema } from './schema';
+
+export type getEventsSchemaType = z.infer<typeof getEventsSchema>;
+
+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/components/Appbar.tsx

@@ -15,11 +15,26 @@ 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 { useEffect, useState } from 'react';
+import { getEvents } from '@/actions/calendar';
+import { ContentType } from '@/actions/calendar/types';
 
 export const Appbar = () => {
   const { data: session, status: sessionStatus } = useSession();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
   const currentPath = usePathname();
+  const courseId = currentPath.split('/')[2];
+  const [events, setEvents] = useState<ContentType[]>();
+
+  useEffect(() => {
+    async function fetchEvents() {
+      const fetchedEvents = (await getEvents(Number(courseId))) ?? [];
+      setEvents(fetchedEvents);
+    }
+
+    fetchEvents();
+  }, [courseId]);
 
   const isLoading = sessionStatus === 'loading';
 
@@ -43,9 +58,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,83 @@
+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 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', 'agenda']}
+        showMultiDayTimes
+        style={{ height: 500 }}
+        onView={handleOnChangeView}
+      />
+    </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>
+  );
+};

src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

tsconfig.json

@@ -16,14 +16,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next"
-      }
+        "name": "next",
+      },
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"]
-    }
+      "@public/*": ["./public/*"],
+    },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }