feat: connect the questions to the video

package.json

@@ -51,6 +51,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",

prisma/migrations/20240928105907_add_optional_videoid_to_question/migration.sql

@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "Question" ADD COLUMN     "videoId" INTEGER;
+
+-- CreateIndex
+CREATE INDEX "Question_videoId_idx" ON "Question"("videoId");
+
+-- AddForeignKey
+ALTER TABLE "Question" ADD CONSTRAINT "Question_videoId_fkey" FOREIGN KEY ("videoId") REFERENCES "Content"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -53,6 +53,7 @@ model Content {
   comments         Comment[]
   commentsCount    Int             @default(0)
   bookmark         Bookmark[]
+  questions        Question[]
 }
 
 model CourseContent {
@@ -266,9 +267,12 @@ model Question {
   answers      Answer[]
   votes        Vote[]
   tags         String[]
+  video        Content?  @relation(fields: [videoId], references: [id])
+  videoId      Int?
   updatedAt    DateTime @updatedAt
 
   @@index([authorId])
+  @@index([videoId])
 }
 
 model Answer {

src/actions/question/index.ts

@@ -32,7 +32,7 @@ const createQuestionHandler = async (
     };
   }
 
-  const { title, content, tags } = data;
+  const { title, content, tags, videoId } = data;
 
   // Create initial slug
   let slug = generateHandle(title);
@@ -61,6 +61,7 @@ const createQuestionHandler = async (
         title,
         content,
         tags,
+        videoId,
         authorId: session.user.id,
         slug, // Include the slug
       },

src/actions/question/schema.ts

@@ -4,12 +4,14 @@ export const QuestionInsertSchema = z.object({
   title: z.string().min(5, 'Question title too short'),
   content: z.string().min(0, 'Question content too short'),
   tags: z.array(z.string()).optional(),
+  videoId: z.number().optional(),
 });
 
 export const QuestionUpdateSchema = z.object({
   title: z.string().min(5, 'Question title too short'),
   content: z.string().min(0, 'Question content too short'),
   tags: z.array(z.string()).optional(),
+  videoId: z.number().optional(),
   questionId: z.number(),
 });
 export const QuestionDeleteSchema = z.object({

src/actions/question/types.ts

@@ -45,6 +45,12 @@ export interface QuestionQuery {
         name: boolean;
       };
     };
+    video: {
+      select: {
+        id: boolean;
+        title: boolean;
+      };
+    };
     votes: {
       where: {
         userId: string | undefined;
@@ -57,7 +63,7 @@ export interface QuestionQuery {
   };
   where?: {
     authorId?: string;
-
+    videoId?: number;
     title?: {
       contains: string;
     };
@@ -76,13 +82,20 @@ export interface Author {
   email?: string | null;
 }
 
+export interface Video {
+  id: number;
+  title: string;
+} 
+
 export interface ExtendedQuestion extends Question {
   author: Author;
+  video: Video;
   votes: any[];
 }
 
 export interface ExtendedAnswer extends Answer {
   author: Author;
+  video: Video;
   votes: any[];
   responses: ExtendedAnswer[];
 }

src/actions/types.ts

@@ -5,6 +5,7 @@ export interface QueryParams {
   page?: number;
   tabtype?: TabType;
   search?: string;
+  videoId?: number;
   date?: string;
   type?: CommentType;
   parentId?: number;

src/app/(main)/(pages)/question/[slug]/@question/page.tsx

@@ -35,6 +35,12 @@ const SingleQuestionPage = async ({
           name: true,
         },
       },
+      video: {
+        select: {
+          id: true,
+          title: true,
+        },
+      },
       votes: {
         where: {
           userId: sessionId,

src/app/(main)/(pages)/question/page.tsx

@@ -15,6 +15,13 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+
 import { Button } from '@/components/ui/button';
 import { QueryParams, TabType } from '@/actions/types';
 import { getDisabledFeature, getUpdatedUrl, paginationData } from '@/lib/utils';
@@ -24,6 +31,7 @@ import { authOptions } from '@/lib/auth';
 import PostCard from '@/components/posts/PostCard';
 import Pagination from '@/components/Pagination';
 import { redirect } from 'next/navigation';
+import SearchQuestionByVideo from '@/components/search/SearchQuestionByVideo';
 
 type QuestionsResponse = {
   data: ExtendedQuestion[] | null;
@@ -57,20 +65,32 @@ const getQuestionsWithQuery = async (
         select: { userId: true, voteType: true },
       },
       author: { select: { id: true, name: true } },
+      video: {
+        select: {
+          id: true,
+          title: true,
+        },
+      },
     },
   };
 
-  const searchQuery = searchParams.search
-    ? {
-        where: {
-          ...additionalQuery.where,
-          title: {
-            contains: searchParams.search,
-            mode: 'insensitive',
+  const searchQuery =
+    searchParams.search || searchParams.videoId
+      ? {
+          where: {
+            ...additionalQuery.where,
+            ...(searchParams.search && {
+              title: {
+                contains: searchParams.search,
+                mode: 'insensitive',
+              },
+            }),
+            ...(searchParams.videoId && {
+              videoId: parseInt(searchParams.videoId.toString(), 10),
+            }),
           },
-        },
-      }
-    : {};
+        }
+      : {};
 
   const dateFilter = searchParams.date;
   if (dateFilter) {
@@ -152,8 +172,21 @@ export default async function QuestionsPage({
         {/* Next question button */}
         <NewPostDialog />
         <div className="flex w-full flex-col gap-4">
-          <div className="flex flex-col justify-between gap-4 md:flex-row">
-            <Search />
+          <div className="flex flex-col md:flex-row justify-between gap-4 items-end">
+            <Tabs defaultValue="searchQuestion" className="w-full md:w-[400px]">
+              <TabsList className='mb-1 bg-primary/5'>
+                <TabsTrigger value="searchQuestion">Search by question</TabsTrigger>
+                <TabsTrigger value="searchVideo">Search by video</TabsTrigger>
+              </TabsList>
+              <TabsContent value="searchQuestion">
+                <div className="flex flex-col justify-between gap-4 md:flex-row">
+                  <Search />
+                </div>
+              </TabsContent>
+              <TabsContent value="searchVideo">
+                <SearchQuestionByVideo />
+              </TabsContent>
+            </Tabs>
             <div className="flex items-center justify-between gap-2">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>