feat: adds userAnswered to /questions page

Author: Logannford

src/components/app/questions/layout/question-card.tsx

@@ -5,6 +5,10 @@ import { getQuestionStats } from '@/utils/data/questions/get-question-stats';
 import Link from 'next/link';
 import Chip from '@/components/ui/chip';
 import { Suspense } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { Circle } from 'lucide-react';
+import { CheckCircle } from 'lucide-react';
+import { Answer } from '@/types/Answers';
 
 // separate async component for stats to avoid blocking render
 async function QuestionStats({
@@ -26,7 +30,7 @@ async function QuestionStats({
 }
 
 export default function QuestionCard(opts: {
-  questionData: QuestionWithoutAnswers;
+  questionData: QuestionWithoutAnswers & { userAnswers: Answer[] };
   showSubmissions?: boolean;
   numberOfTags?: number;
   showcaseTag?: string;
@@ -75,6 +79,38 @@ export default function QuestionCard(opts: {
           </Suspense>
         )}
       </div>
+      <div className="flex items-center gap-x-2">
+        {questionData.userAnswers && questionData.userAnswers.length > 0 ? (
+          <div>
+            {questionData.userAnswers[0].correctAnswer ? (
+              <CheckCircle className="flex-shrink-0 size-5 text-green-500" />
+            ) : (
+              <Circle className="flex-shrink-0 size-5 text-black-50" />
+            )}
+          </div>
+        ) : (
+          <Circle className="flex-shrink-0 size-5 text-black-50" />
+        )}
+        <div className="text-sm font-medium">
+          {questionData.userAnswers && questionData.userAnswers.length > 0 ? (
+            questionData.userAnswers[0].correctAnswer ? (
+              <p>Correct</p>
+            ) : (
+              <p>Incorrect</p>
+            )
+          ) : (
+            <div className="relative">
+              <p className="group-hover:opacity-0 transition-opacity duration-300">
+                Not Answered
+              </p>
+              <div className="absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap flex items-center gap-x-1">
+                <p>Learn Now</p>
+                <ChevronRight className="flex-shrink-0 size-4 text-white group-hover:translate-x-2 transition-transform duration-300" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
       <div className="mt-5 w-full flex justify-between items-end z-10 relative">
         {!customQuestion && (
           <div className="flex gap-4 items-end">

src/utils/data/questions/list.ts

@@ -8,9 +8,16 @@ import type {
 import { getTagsFromQuestion } from './tags/get-tags-from-question';
 import { QuestionFilters } from '@/types/Filters';
 import { getUser } from '@/actions/user/authed/get-user';
+import { Answer } from '@/types/Answers';
 
 type ListQuestionsReturnType = {
-  questions: Question[] | QuestionWithoutAnswers[];
+  questions:
+    | (Question[] & {
+        userAnswers: Answer[] | null;
+      })
+    | (QuestionWithoutAnswers[] & {
+        userAnswers: Answer[] | null;
+      });
   total: number;
   page: number;
   pageSize: number;
@@ -38,16 +45,15 @@ export const listQuestions = async (
     previousQuestions = false,
   } = opts;
 
-  // Move authentication outside of cache to avoid cookie access inside cache
-  let authenticatedUser = null;
-  if (customQuestions) {
-    authenticatedUser = await getUser();
+  const user = await getUser();
 
-    if (!authenticatedUser || authenticatedUser.uid !== userUid) {
-      throw new Error('Unauthorized access to custom questions');
-    }
+  if (customQuestions && !user) {
+    throw new Error('Unauthorized access to custom questions');
   }
 
+  // if we have an authenticated user, we include the userAnswers in the query
+  const includeUserAnswers = Boolean(user);
+
   return unstable_cache(
     async () => {
       const skip = (page - 1) * pageSize;
@@ -143,6 +149,13 @@ export const listQuestions = async (
               tag: true,
             },
           },
+          userAnswers: includeUserAnswers
+            ? {
+                where: {
+                  userUid: userUid,
+                },
+              }
+            : undefined,
           linkedReports: {
             select: {
               userUid: true,
@@ -159,7 +172,7 @@ export const listQuestions = async (
         questions.filter((question) => {
           if (!question.customQuestion) return true;
           return question.linkedReports.length > 0;
-        }) as Question[]
+        }) as unknown as Question[]
       );
 
       // Get total count with same security constraints