fix: code cleanup, sitemap changes, explore page changes

Logannford · Logannford · commit ce1bd4a7a3a9 · 2025-01-10T11:56:01.000Z
diff --git a/src/actions/ai/roadmap/generate.ts b/src/actions/ai/roadmap/generate.ts
@@ -7,6 +7,7 @@ import { fetchRoadmapQuestions } from '@/utils/data/roadmap/questions/fetch-road
 import { generateRoadmapResponse } from './utils/generate-roadmap';
 import { revalidateTag } from 'next/cache';
 import { QuestionDifficulty } from '@/types/Questions';
+import { getUser } from '@/actions/user/authed/get-user';
 
 interface RoadmapQuestion {
   uid: string;
@@ -29,21 +30,29 @@ interface RoadmapQuestion {
 
 export const roadmapGenerate = async (opts: {
   roadmapUid: string;
-  // passed in the pass to generate data for ai + fetch questions
-  userUid: string;
   generateMore?: boolean;
 }) => {
   const { roadmapUid } = opts;
   opts.generateMore = opts.generateMore ?? false;
 
+  // get the user
+  const user = await getUser();
+  if (!user || user?.userLevel === 'FREE') {
+    throw new Error('User not found');
+  }
+
   // Retrieve and format the necessary data for AI
-  const formattedData = await generateDataForAi(opts);
+  const formattedData = await generateDataForAi({
+    roadmapUid,
+    userUid: user?.uid,
+    generateMore: opts.generateMore,
+  });
 
   let existingQuestions = [];
   if (formattedData === 'generated' || formattedData === 'invalid') {
     existingQuestions = await fetchRoadmapQuestions({
       roadmapUid,
-      userUid: opts.userUid,
+      userUid: user?.uid,
     });
 
     if (existingQuestions.length === 0) {
diff --git a/src/app/(app)/(roadmap)/roadmap/[roadmapUid]/onboarding/generate/page.tsx b/src/app/(app)/(roadmap)/roadmap/[roadmapUid]/onboarding/generate/page.tsx
@@ -1,8 +1,6 @@
 import { fetchDefaultUserAnswers } from '@/utils/data/roadmap/questions/default/fetch-default-user-answers';
 import LoadingSpinner from '@/components/ui/loading';
-import { useUserServer } from '@/hooks/use-user-server';
 import { Check, Route, X } from 'lucide-react';
-import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
 import RoadmapGenerateButton from '@/components/app/roadmaps/onboarding/onboarding-generate';
 
@@ -13,11 +11,6 @@ export default async function RoadmapGeneratingPage({
 }) {
   const { roadmapUid } = params;
 
-  const user = await useUserServer();
-  if (!user || !user.uid) {
-    return redirect('/login');
-  }
-
   // Fetch user answers
   const userAnswers = await fetchDefaultUserAnswers({
     roadmapUid,
@@ -27,39 +20,40 @@ export default async function RoadmapGeneratingPage({
   userAnswers.sort((a, b) => a.question.order - b.question.order);
 
   return (
-    <div className="h-screen flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-black-100 to-black">
       <div
-        className="w-full max-w-4xl p-8 border border-black-50 shadow-lg rounded-md relative"
+        className="w-full max-w-5xl p-8 border border-black-50 shadow-2xl rounded-xl relative overflow-hidden"
         style={{
           background:
-            'radial-gradient(128% 107% at 0% 0%,#212121 0%,rgb(0,0,0) 77.61472409909909%)',
+            'radial-gradient(128% 107% at 0% 0%, #212121 0%, rgb(0,0,0) 77.61472409909909%)',
         }}
       >
-        <div className="flex flex-col lg:flex-row gap-8 lg:gap-16">
+        <div className="absolute inset-0 bg-gradient-to-r from-accent/10 to-transparent opacity-20"></div>
+        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16 relative z-10">
           {/* User Answers Section */}
-          <div className="flex-1 z-50">
-            <h1 className="text-xl font-semibold mb-4 text-white">
+          <div className="flex-1">
+            <h2 className="text-2xl font-bold mb-6 text-white border-b border-black-50 pb-2">
               Your Answers
-            </h1>
-            <ul className="space-y-3">
+            </h2>
+            <ul className="space-y-4 max-h-[60vh] overflow-y-auto pr-4 custom-scrollbar">
               {userAnswers?.map((answer) => (
                 <li
                   key={answer.questionUid}
-                  className="flex items-center gap-4 p-2 bg-black-100 border border-black-50 rounded-md shadow-sm font-ubuntu"
+                  className="flex items-center gap-4 p-4 bg-black-100/50 border border-black-50 rounded-lg shadow-md transition-all duration-300 hover:shadow-lg hover:border-accent/50"
                 >
-                  <span className="text-sm font-medium text-white">
+                  <span className="text-lg font-medium text-accent">
                     {answer.question.order}.
                   </span>
-                  <span className={`text-sm font-semibold`}>
+                  <span className={`text-sm font-semibold flex-grow`}>
                     {answer.correct ? (
-                      <div className="flex items-center">
+                      <div className="flex items-center text-green-400">
                         Correct
-                        <Check className="size-4 ml-2 text-green-500" />
+                        <Check className="size-5 ml-2" />
                       </div>
                     ) : (
-                      <div className="flex items-center">
+                      <div className="flex items-center text-destructive">
                         Incorrect
-                        <X className="size-4 ml-2 text-destructive" />
+                        <X className="size-5 ml-2" />
                       </div>
                     )}
                   </span>
@@ -69,23 +63,22 @@ export default async function RoadmapGeneratingPage({
           </div>
 
           {/* Roadmap Generating Section */}
-          <div className="flex-1 flex flex-col items-center justify-center space-y-4 order-first lg:order-last">
-            <div className="space flex flex-col gap-y-2 items-center">
-              <Route />
-              <h1 className="text-2xl font-semibold text-white">
+          <div className="flex-1 flex flex-col items-center justify-center space-y-8 lg:border-l lg:border-black-50 lg:pl-12">
+            <div className="text-center">
+              <Route className="size-16 text-accent mb-4 mx-auto" />
+              <h1 className="text-3xl font-bold text-white mb-2">
                 Generating Your Roadmap
               </h1>
+              <p className="text-sm text-gray-400 max-w-md">
+                This process may take a few minutes. Please hold tight while we
+                prepare your personalised learning journey.
+              </p>
+            </div>
+            <div className="w-full max-w-xs">
+              <Suspense fallback={<LoadingSpinner />}>
+                <RoadmapGenerateButton roadmapUid={roadmapUid} />
+              </Suspense>
             </div>
-            <p className="text-xs text-gray-400 text-center">
-              This process may take a few minutes. <br /> Please hold tight
-              while we prepare your personalised roadmap.
-            </p>
-            <Suspense fallback={<LoadingSpinner />}>
-              <RoadmapGenerateButton
-                roadmapUid={roadmapUid}
-                userUid={user.uid}
-              />
-            </Suspense>
           </div>
         </div>
       </div>
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
@@ -35,7 +35,6 @@ export const metadata: Metadata = {
   description,
   keywords: [
     'learn to code for free',
-    'coding platform',
     'beginner-friendly coding lessons',
     'interactive coding challenges',
     'daily programming practice',
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -24,7 +24,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   }));
 
   const questionsPosts = questions.questions.map((question) => ({
-    url: `${baseUrl}/questions/${question.slug}`,
+    url: `${baseUrl}/question/${question.slug}`,
     lastModified: new Date(question.createdAt),
   }));
 
diff --git a/src/components/app/leaderboard/user-rank.tsx b/src/components/app/leaderboard/user-rank.tsx
@@ -12,23 +12,16 @@ import { shortenText } from '@/utils';
 export default async function UserRank(opts: { questionUid: string }) {
   const { questionUid } = opts;
 
-  const userData = await useUserServer();
+  // run this in parallel as they do not depend on each other
+  const [userData, userRank, userAnswer] = await Promise.all([
+    useUserServer(),
+    getUserAnswerRank({ questionUid }),
+    getUserAnswer({ questionUid }),
+  ]);
   if (!userData) return null;
 
   const displayName = getUserDisplayName(userData);
 
-  // run this in parallel as they do not depend on each other
-  const [userRank, userAnswer] = await Promise.all([
-    getUserAnswerRank({
-      questionUid,
-      userUid: userData.uid,
-    }),
-    getUserAnswer({
-      questionUid,
-      userUid: userData.uid,
-    }),
-  ]);
-
   if (!userAnswer) {
     return (
       <div className="flex justify-between w-full items-center">
diff --git a/src/components/app/questions/layout/carousel/question-carousel-card.tsx b/src/components/app/questions/layout/carousel/question-carousel-card.tsx
@@ -2,22 +2,36 @@ import { QuestionWithTags } from '@/types/Questions';
 import Link from 'next/link';
 import Chip from '@/components/ui/chip';
 import { capitalise, getQuestionDifficultyColor } from '@/utils';
+import { getUserAnswer } from '@/utils/data/answers/get-user-answer';
+import { CheckCircle, Circle } from 'lucide-react';
 
-export default function QuestionCarouselCard(opts: {
+export default async function QuestionCarouselCard(opts: {
   questionData: QuestionWithTags;
 }) {
   const { questionData } = opts;
 
+  const userAnswered = await getUserAnswer({ questionUid: questionData.uid });
+
   return (
     <Link
       href={`/question/${questionData?.slug}`}
-      className="h-full bg-black-75"
+      className="h-full bg-black-75 group"
     >
       <div className="flex flex-col justify-between space-y-5 items-start border border-black-50 hover:border-accent duration-300 p-6 rounded-lg group w-full h-full relative overflow-hidden">
         <h6 className="text-wrap text-start line-clamp-2">
           {questionData?.question}
         </h6>
-        <div className="w-full flex justify-between items-end">
+        <div className="flex w-full justify-between items-center">
+          <div className="flex items-center gap-x-2">
+            {userAnswered ? (
+              <CheckCircle className="flex-shrink-0 size-5 text-green-500" />
+            ) : (
+              <Circle className="flex-shrink-0 size-5 text-black-50" />
+            )}
+            <p className="text-sm font-medium">
+              {userAnswered ? 'Answered' : 'Not Answered'}
+            </p>
+          </div>
           <Chip
             text={capitalise(questionData?.difficulty)}
             color={getQuestionDifficultyColor(questionData?.difficulty).bg}
diff --git a/src/components/app/questions/layout/carousel/question-carousel.tsx b/src/components/app/questions/layout/carousel/question-carousel.tsx
@@ -68,7 +68,6 @@ export default function QuestionCarousel(opts: {
           </div>
         </div>
         <div className="relative w-full">
-          <div className="hidden md:block absolute left-0 top-0 h-full w-12 bg-gradient-to-r from-[#000] to-transparent z-10" />
           <div className="hidden md:block absolute right-0 top-0 h-full w-12 bg-gradient-to-l from-[#000000] to-transparent z-10" />
           <CarouselContent className="grid grid-flow-col auto-cols-[calc(100%-8px)] md:auto-cols-[calc(50%-8px)] lg:auto-cols-[calc(33.33%-8px)] gap-4">
             {questions.map((q) => (
@@ -78,11 +77,11 @@ export default function QuestionCarousel(opts: {
             ))}
           </CarouselContent>
           <CarouselPrevious
-            className="hidden md:block border-none text-white -top-12 left-0 z-10"
+            className="hidden md:block border-none text-white -top-14 -left-6 z-10"
             variant="ghost"
           />
           <CarouselNext
-            className="hidden md:block border-none text-white -top-12"
+            className="hidden md:block border-none text-white -top-14"
             variant="ghost"
           />
         </div>
diff --git a/src/components/app/questions/layout/question-card.tsx b/src/components/app/questions/layout/question-card.tsx
@@ -4,6 +4,8 @@ import TagDisplay from '@/components/app/questions/previous/tag-display';
 import { getQuestionStats } from '@/utils/data/questions/get-question-stats';
 import Link from 'next/link';
 import Chip from '@/components/ui/chip';
+import { getUserAnswer } from '@/utils/data/answers/get-user-answer';
+import { CheckCircle } from 'lucide-react';
 
 export default async function QuestionCard(opts: {
   questionData: QuestionWithoutAnswers;
@@ -24,6 +26,11 @@ export default async function QuestionCard(opts: {
     ? await getQuestionStats(identifier, questionData[identifier] || '')
     : null;
 
+  // has the user answered this question?
+  const userAnswered = Boolean(
+    await getUserAnswer({ questionUid: questionData.uid })
+  );
+
   // if identifier is uid, this is a custom question
   const href =
     identifier === 'uid'
@@ -34,19 +41,24 @@ export default async function QuestionCard(opts: {
     <Link
       href={href}
       key={questionData.uid}
-      className="flex flex-col space-y-5 items-start border border-black-50 hover:border-accent duration-300 p-5 rounded-lg group w-full relative overflow-hidden"
+      className="flex flex-col space-y-5 items-start bg-black-75 border border-black-50 hover:border-accent duration-300 p-5 rounded-lg group w-full relative overflow-hidden"
     >
       <div className="flex flex-col gap-y-2 w-full">
-        <div className="flex w-full justify-between">
-          <h6 className="text-base text-wrap text-start line-clamp-3">
+        <div className="flex w-full justify-between items-center">
+          <h6 className="text-base text-wrap text-start line-clamp-2 flex-grow">
             {questionData?.question}
           </h6>
+          {userAnswered && (
+            <div className="flex-shrink-0 ml-2">
+              <CheckCircle className="size-5 text-green-500" />
+            </div>
+          )}
         </div>
         {showSubmissions && (
           <div className="text-start text-[10px]">
             <p className="font-ubuntu text-sm">
               Submissions:{' '}
-              <span className="font-medium underline">
+              <span className="font-medium">
                 {questionStats?.totalSubmissions}
               </span>
             </p>
@@ -55,19 +67,17 @@ export default async function QuestionCard(opts: {
       </div>
       <div className="mt-5 w-full flex justify-between items-end z-10 relative">
         <div className="flex gap-4 items-end">
-          {questionData?.tags?.length
-            ? questionData?.tags?.length > 0 && (
-                <div className="space-y-0.5 text-start">
-                  <div className="flex items-center gap-1">
-                    <TagDisplay
-                      tags={questionData?.tags || []}
-                      numberOfTags={numberOfTags}
-                      showcaseTag={showcaseTag}
-                    />
-                  </div>
-                </div>
-              )
-            : ''}
+          {questionData?.tags?.length && questionData?.tags?.length > 0 && (
+            <div className="space-y-0.5 text-start">
+              <div className="flex items-center gap-1">
+                <TagDisplay
+                  tags={questionData?.tags || []}
+                  numberOfTags={numberOfTags}
+                  showcaseTag={showcaseTag}
+                />
+              </div>
+            </div>
+          )}
         </div>
         <div className="flex items-center gap-x-3">
           {questionData?.difficulty && (
@@ -83,7 +93,6 @@ export default async function QuestionCard(opts: {
               small
             />
           )}
-          {/** question date */}
           {questionData?.questionDate && questionData?.dailyQuestion && (
             <Chip
               color="bg-black-100"
diff --git a/src/components/app/roadmaps/[uid]/generate-more-questions.tsx b/src/components/app/roadmaps/[uid]/generate-more-questions.tsx
@@ -18,7 +18,6 @@ const GenerateMoreQuestionsButton = forwardRef(
       try {
         await roadmapGenerate({
           roadmapUid: roadmap.uid,
-          userUid: roadmap.userUid,
           generateMore: true,
         });
       } catch (error) {
diff --git a/src/components/app/roadmaps/onboarding/onboarding-generate.tsx b/src/components/app/roadmaps/onboarding/onboarding-generate.tsx
@@ -3,14 +3,11 @@ import Link from 'next/link';
 
 export default async function RoadmapGenerateButton({
   roadmapUid,
-  userUid
 }: {
   roadmapUid: string;
-  userUid: string;
 }) {
   const generate = await roadmapGenerate({
     roadmapUid,
-    userUid
   });
 
   if (generate.length || generate === 'generated') {
diff --git a/src/components/marketing/global/footer/footer.tsx b/src/components/marketing/global/footer/footer.tsx
diff --git a/src/utils/data/answers/get-user-answer.ts b/src/utils/data/answers/get-user-answer.ts
diff --git a/src/utils/data/leaderboard/get-user-rank.ts b/src/utils/data/leaderboard/get-user-rank.ts
