Feat/bookmarks

package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.5",
     "axios": "^1.6.2",

prisma/migrations/20240318200949_add_bookmark/migration.sql

@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "Bookmark" (
+    "id" SERIAL NOT NULL,
+    "userId" TEXT NOT NULL,
+    "contentId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "courseId" INTEGER NOT NULL,
+
+    CONSTRAINT "Bookmark_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Bookmark_contentId_key" ON "Bookmark"("contentId");
+
+-- AddForeignKey
+ALTER TABLE "Bookmark" ADD CONSTRAINT "Bookmark_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Bookmark" ADD CONSTRAINT "Bookmark_contentId_fkey" FOREIGN KEY ("contentId") REFERENCES "Content"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Bookmark" ADD CONSTRAINT "Bookmark_courseId_fkey" FOREIGN KEY ("courseId") REFERENCES "Course"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -19,6 +19,7 @@ model Course {
   slug           String
   content        CourseContent[]
   purchasedBy    UserPurchases[]
+  bookmarks      Bookmark[]
 }
 
 model UserPurchases {
@@ -49,6 +50,7 @@ model Content {
   notionMetadataId Int?
   comments         Comment[]
   commentsCount    Int             @default(0)
+  bookmark         Bookmark?
 }
 
 model CourseContent {
@@ -126,6 +128,7 @@ model User {
   votes          Vote[]
   discordConnect DiscordConnect?
   disableDrm     Boolean         @default(false)
+  bookmarks      Bookmark[]
   password       String?
   appxUserId     String?
   appxUsername     String?
@@ -158,6 +161,17 @@ model VideoProgress {
   @@unique([contentId, userId])
 }
 
+model Bookmark {
+  id        Int      @id @default(autoincrement())
+  userId    String
+  contentId Int      @unique
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  content   Content  @relation(fields: [contentId], references: [id], onDelete: Cascade)
+  createdAt DateTime @default(now())
+  courseId  Int
+  course    Course  @relation(fields: [courseId], references: [id], onDelete: Cascade)
+}
+
 model Comment {
   id           Int         @id @default(autoincrement())
   content      String
@@ -200,4 +214,3 @@ enum CommentType {
   INTRO
   DEFAULT
 }
-

src/actions/bookmark/index.ts

@@ -0,0 +1,80 @@
+'use server';
+import { createSafeAction } from '@/lib/create-safe-action';
+import { BookmarkCreateSchema, BookmarkDeleteSchema } from './schema';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { rateLimit } from '@/lib/utils';
+import db from '@/db';
+import {
+  InputTypeCreateBookmark,
+  InputTypeDeleteBookmark,
+  ReturnTypeCreateBookmark,
+} from './types';
+import { revalidatePath } from 'next/cache';
+
+const reloadBookmarkPage = (courseId: number) => {
+  revalidatePath(`/courses/${courseId}/bookmarks`);
+};
+
+const createBookmarkHandler = async (
+  data: InputTypeCreateBookmark,
+): Promise<ReturnTypeCreateBookmark> => {
+  const session = await getServerSession(authOptions);
+
+  if (!session || !session.user) {
+    return { error: 'Unauthorized or insufficient permissions' };
+  }
+
+  const { contentId, courseId } = data;
+  const userId = session.user.id;
+
+  if (!rateLimit(userId)) {
+    return { error: 'Rate limit exceeded. Please try again later.' };
+  }
+
+  try {
+    const addedBookmark = await db.bookmark.create({
+      data: { contentId, userId, courseId },
+    });
+    reloadBookmarkPage(courseId);
+    return { data: addedBookmark };
+  } catch (error: any) {
+    return { error: error.message || 'Failed to create comment.' };
+  }
+};
+
+const deleteBookmarkHandler = async (
+  data: InputTypeDeleteBookmark,
+): Promise<any> => {
+  const session = await getServerSession(authOptions);
+
+  if (!session || !session.user) {
+    return { error: 'Unauthorized or insufficient permissions' };
+  }
+
+  const { id, courseId } = data;
+  const userId = session.user.id;
+
+  if (!rateLimit(userId)) {
+    return { error: 'Rate limit exceeded. Please try again later.' };
+  }
+
+  try {
+    const deletedBookmark = await db.bookmark.delete({
+      where: { id },
+    });
+    reloadBookmarkPage(courseId);
+    return { data: deletedBookmark };
+  } catch (error: any) {
+    return { error: error.message || 'Failed to create comment.' };
+  }
+};
+
+export const createBookmark = createSafeAction(
+  BookmarkCreateSchema,
+  createBookmarkHandler,
+);
+export const deleteBookmark = createSafeAction(
+  BookmarkDeleteSchema,
+  deleteBookmarkHandler,
+);

src/actions/bookmark/schema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const BookmarkCreateSchema = z.object({
+  contentId: z.number(),
+  courseId: z.number(),
+});
+export const BookmarkDeleteSchema = z.object({
+  id: z.number(),
+  courseId: z.number(),
+});

src/actions/bookmark/types.ts

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+import { BookmarkCreateSchema, BookmarkDeleteSchema } from './schema';
+import { ActionState } from '@/lib/create-safe-action';
+import { Bookmark, Content } from '@prisma/client';
+
+export type InputTypeCreateBookmark = z.infer<typeof BookmarkCreateSchema>;
+export type ReturnTypeCreateBookmark = ActionState<
+  InputTypeCreateBookmark,
+  Bookmark
+>;
+export type InputTypeDeleteBookmark = z.infer<typeof BookmarkDeleteSchema>;
+export type ReturnTypeDeleteBookmark = ActionState<
+  InputTypeDeleteBookmark,
+  Bookmark
+>;
+
+export type TBookmarkWithContent = Bookmark & {
+  content: Content & { parent?: Content | null };
+};

src/app/courses/[...courseId]/page.tsx

@@ -1,19 +1,17 @@
-import React from 'react';
-import { Course } from '@/store/atoms';
-import {
-  Content,
-  Folder,
-  Video,
-  getCourse,
-  getFullCourseContent,
-} from '@/db/course';
+import { Folder, Video, getCourse, getFullCourseContent } from '@/db/course';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/auth';
 import { getPurchases } from '@/utiles/appx';
 import { redirect } from 'next/navigation';
 import { CourseView } from '@/components/CourseView';
 import { QueryParams } from '@/actions/types';
 
+import { Content } from '@prisma/client';
+import { TBookmarkWithContent } from '@/actions/bookmark/types';
+import db from '@/db';
+import { rateLimit } from '@/lib/utils';
+import BookmarkView from '@/components/bookmark/BookmarkView';
+
 interface PurchaseType {
   id: number;
   title: string;
@@ -27,6 +25,34 @@ interface PurchaseType {
   totalVideosWatched: number;
 }
 
+const getBookmarkData = async (
+  courseId: string,
+): Promise<TBookmarkWithContent[] | { error: string }> => {
+  const session = await getServerSession(authOptions);
+  const userId = session.user.id;
+
+  if (!rateLimit(userId)) {
+    return { error: 'Rate limit exceeded. Please try again later.' };
+  }
+
+  return await db.bookmark.findMany({
+    where: {
+      userId,
+      courseId: parseInt(courseId, 10),
+    },
+    include: {
+      content: {
+        include: {
+          parent: true,
+        },
+      },
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+};
+
 const checkAccess = async (courseId: string) => {
   const session = await getServerSession(authOptions);
 
@@ -78,6 +104,23 @@ export default async function Course({
   const fullCourseContent: Folder[] = await getFullCourseContent(
     parseInt(courseId, 10),
   );
+
+  if (!hasAccess) {
+    redirect('/api/auth/signin');
+  }
+
+  if (params.courseId[1] === 'bookmarks') {
+    const bookmarkData = await getBookmarkData(courseId);
+
+    return (
+      <BookmarkView
+        bookmarkData={bookmarkData}
+        courseId={course.id}
+        fullCourseContent={fullCourseContent}
+      />
+    );
+  }
+
   const courseContent = findContentById(
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
@@ -86,10 +129,6 @@ export default async function Course({
     courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
   const nextContent = null; //await getNextVideo(Number(rest[rest.length - 1]))
 
-  if (!hasAccess) {
-    redirect('/api/auth/signin');
-  }
-
   return (
     <>
       <CourseView

src/app/globals.css

@@ -93,4 +93,4 @@
 
 .vjs-duration {
   display: block !important;
-}
+}

src/components/Appbar.tsx

@@ -8,7 +8,7 @@ import { useSession } from 'next-auth/react';
 import { useRecoilState } from 'recoil';
 import { sidebarOpen as sidebarOpenAtom } from '../store/atoms/sidebar';
 import { ToggleButton } from './Sidebar';
-import { usePathname } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';
 import Logo from './landing/logo/logo';
 import { Button } from './ui/button';
 import { Sparkles } from 'lucide-react';
@@ -19,6 +19,12 @@ export const Appbar = () => {
   const session = useSession();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
   const currentPath = usePathname();
+  const params = useParams();
+  let bookmarkPageUrl = null;
+  if (params.courseId && params.courseId[0]) {
+    bookmarkPageUrl = `/courses/${params.courseId[0]}/bookmarks`;
+  }
+
   return (
     <>
       <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2 print:hidden">
@@ -36,6 +42,21 @@ export const Appbar = () => {
           {session?.data?.user ? (
             <div className="flex items-center space-x-2">
               <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-2">
+                {currentPath.includes('courses') && bookmarkPageUrl && (
+                  <Button
+                    variant="link"
+                    className={
+                      currentPath === bookmarkPageUrl
+                        ? 'font-bold underline'
+                        : ''
+                    }
+                    size={'sm'}
+                    asChild
+                  >
+                    <Link href={bookmarkPageUrl}>Bookmarks</Link>
+                  </Button>
+                )}
+
                 <Button variant={'link'} size={'sm'} asChild>
                   <JoinDiscord isNavigated={false} />
                 </Button>