feat: update user code theme from question single page

Author: Logannford

src/actions/user/authed/update-user.ts

@@ -2,52 +2,51 @@
 
 import { prisma } from '@/lib/prisma';
 import { revalidateTag } from 'next/cache';
-import { getUserFromSession } from './get-user';
+import { getUser } from './get-user';
 import { UpdatableUserFields } from '@/types/User';
 
 export const updateUser = async (opts: {
   userDetails: Partial<UpdatableUserFields>;
 }) => {
-  try {
-    const { userDetails } = opts;
-
-    console.log('Received update request');
-    console.log('Raw userDetails:', JSON.stringify(userDetails, null, 2));
-
-    if (!userDetails) {
-      throw new Error('User data is required');
-    }
-
-    // Get the user details from the session
-    const sessionResult = await getUserFromSession();
-
-    // Ensure we have a valid user ID
-    if (!sessionResult?.data?.user?.id) {
-      throw new Error('No user found in session');
-    }
-
-    // Clean up the userDetails to remove any undefined or null values
-    const cleanedUserDetails = Object.fromEntries(
-      Object.entries(userDetails).filter(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ([_, v]) => v !== undefined && v !== null
-      )
-    );
-
-    // Update the user in the database
-    const updatedUser = await prisma.users.update({
-      where: {
-        uid: sessionResult.data.user.id,
-      },
-      data: cleanedUserDetails,
-    });
-
-    // Revalidate the user details cache
-    revalidateTag('user-details');
-
-    return updatedUser;
-  } catch (error) {
-    console.error('Error in updateUser:', error);
-    throw error;
+  console.log('updateUser', opts);
+
+  const { userDetails } = opts;
+
+  if (!userDetails) {
+    throw new Error('User data is required');
+  }
+
+  // Get the user details from the session
+  const user = await getUser();
+
+  // Ensure we have a valid user ID
+  if (!user?.uid) {
+    throw new Error('No user found in session');
   }
+
+  // Clean up the userDetails to remove any undefined or null values
+  const cleanedUserDetails = Object.fromEntries(
+    Object.entries(userDetails).filter(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ([_, v]) => v !== undefined && v !== null
+    )
+  );
+
+  // Ensure codeEditorTheme is included if provided
+  if (userDetails.codeEditorTheme !== undefined) {
+    cleanedUserDetails.codeEditorTheme = userDetails.codeEditorTheme;
+  }
+
+  // Update the user in the database
+  const updatedUser = await prisma.users.update({
+    where: {
+      uid: user.uid,
+    },
+    data: cleanedUserDetails,
+  });
+
+  // Revalidate the user details cache
+  revalidateTag('user-details');
+
+  return updatedUser;
 };

src/app/(app)/(questions)/question/[slug]/page.tsx

@@ -1,15 +1,15 @@
 import { getQuestion } from '@/utils/data/questions/get';
 import { Separator } from '@/components/ui/separator';
 import NoDailyQuestion from '@/components/global/no-daily-question';
-import QuestionDisplay from '@/components/app/questions/single/code-snippet';
+import CodeDisplay from '@/components/app/questions/single/code-snippet';
 import { getQuestionStats } from '@/utils/data/questions/get-question-stats';
 import { useUserServer } from '@/hooks/use-user-server';
 import QuestionCard from '@/components/app/questions/single/question-card';
 import { getRandomQuestion } from '@/utils/data/questions/get-random';
-import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
+import ExpandedCodeModal from '@/components/app/questions/single/layout/expanded-code-modal';
 import ResizableLayout from '@/components/ui/resizable-layout';
-import EditorIcon from '@/components/ui/icons/editor';
-import AiQuestionHelp from '@/components/app/questions/ai-question-help';
+import AiQuestionHelp from '@/components/app/questions/single/layout/ai-question-help';
+import ChangeCodeTheme from '@/components/app/questions/single/layout/change-code-theme';
 
 export default async function TodaysQuestionPage({
   params,
@@ -55,17 +55,18 @@ export default async function TodaysQuestionPage({
           {/** explain question ai button */}
           <AiQuestionHelp question={question} user={user} />
           {/** code theme selector */}
-          <EditorIcon />
+          <ChangeCodeTheme user={user} />
           {/** code snippet */}
           {question.codeSnippet && (
             <ExpandedCodeModal code={question.codeSnippet} />
           )}
         </div>
         <Separator className="bg-black-50" />
         {question?.codeSnippet && (
-          <QuestionDisplay
+          <CodeDisplay
             content={question.codeSnippet}
             backgroundColor="#111111"
+            user={user}
           />
         )}
       </div>

src/app/(app)/(questions)/question/custom/[uid]/page.tsx

@@ -7,7 +7,7 @@ import { getQuestionStats } from '@/utils/data/questions/get-question-stats';
 import { useUserServer } from '@/hooks/use-user-server';
 import QuestionCard from '@/components/app/questions/single/question-card';
 import { getRandomQuestion } from '@/utils/data/questions/get-random';
-import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
+import ExpandedCodeModal from '@/components/app/questions/single/layout/expanded-code-modal';
 import RelatedQuestions from '@/components/app/questions/single/related-question-card';
 import ResizableLayout from '@/components/ui/resizable-layout';
 

src/app/(app)/(roadmap)/roadmap/[roadmapUid]/[uid]/page.tsx

@@ -16,7 +16,7 @@ import { fetchRoadmapQuestion } from '@/utils/data/roadmap/questions/fetch-roadm
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import QuestionDisplay from '@/components/app/questions/single/code-snippet';
-import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
+import ExpandedCodeModal from '@/components/app/questions/single/layout/expanded-code-modal';
 
 import { useUserServer } from '@/hooks/use-user-server';
 // types

src/app/(app)/(roadmap)/roadmap/[roadmapUid]/onboarding/[index]/page.tsx

@@ -7,7 +7,7 @@ import OnboardingQuestionCard from '@/components/app/roadmaps/onboarding/onboard
 import { redirect } from 'next/navigation';
 import { checkIfUserIsOnCorrectQuestionIndex } from '@/utils/data/roadmap/questions/check-user-is-on-correct-index';
 import LoadingSpinner from '@/components/ui/loading';
-import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
+import ExpandedCodeModal from '@/components/app/questions/single/layout/expanded-code-modal';
 
 export default async function RoadmapQuestionPage({
   params,

src/app/(marketing)/daily-challenge/page.tsx

@@ -1,7 +1,7 @@
 import { getTotalSubmissions } from '@/actions/demo/get-total-submissions';
 import { getTodaysQuestion } from '@/utils/data/questions/get-today';
 import QuestionCard from '@/components/marketing/question/question-card';
-import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
+import ExpandedCodeModal from '@/components/app/questions/single/layout/expanded-code-modal';
 import { Separator } from '@/components/ui/separator';
 import { ChartColumn, User } from 'lucide-react';
 import QuestionDisplay from '@/components/app/questions/single/code-snippet';

src/app/(no_nav)/(auth)/login/page.tsx

@@ -1,5 +1,5 @@
 import LoginForm from '@/components/auth/login';
-import { Suspense } from 'react';
+
 import { createMetadata } from '@/utils/seo';
 
 export async function generateMetadata() {

src/components/app/questions/resources/question-stats-tab.tsx

@@ -1,4 +1,3 @@
-import { Separator } from '@/components/ui/separator';
 import { Check, User } from 'lucide-react';
 
 export default function QuestionStatsTab(opts: {

src/components/app/questions/single/answer-question-form.tsx

@@ -24,7 +24,6 @@ import { answerQuestionSchema } from '@/lib/zod/schemas/answer-question-schema';
 import type { Question } from '@/types/Questions';
 import type { UserRecord } from '@/types/User';
 import type { Answer } from '@/types/Answers';
-import { Separator } from '@/components/ui/separator';
 
 type SchemaProps = z.infer<typeof answerQuestionSchema>;
 type AnswerQuestionFormProps = {

src/components/app/questions/single/code-snippet.tsx

@@ -1,13 +1,14 @@
 'use client';
 import React from 'react';
 import { Highlight, themes } from 'prism-react-renderer';
-import { useUser } from '@/hooks/use-user';
+import { UserRecord } from '@/types/User';
 
 interface CodeDisplayProps {
   content: string;
   language?: string;
   backgroundColor?: string;
   hideIndex?: boolean;
+  user?: UserRecord | null;
 }
 
 interface HighlightProps {
@@ -29,6 +30,7 @@ export default function CodeDisplay({
   language,
   backgroundColor = '#111111',
   hideIndex = false,
+  user,
 }: CodeDisplayProps) {
   // Clean the content by removing pre and code tags
   const cleanContent = content
@@ -39,13 +41,13 @@ export default function CodeDisplay({
     .replace(/>/g, '>')
     .trim();
 
-  const { user } = useUser();
-
   return (
     <Highlight
-      theme={themes[(user?.codeEditorTheme as keyof typeof themes) || 'vsDark']}
+      theme={
+        themes[user?.codeEditorTheme as keyof typeof themes] || themes.vsDark
+      }
       code={cleanContent}
-      language={language || 'js'}
+      language={language || 'javascript'}
     >
       {({ style, tokens, getLineProps, getTokenProps }: HighlightProps) => (
         <pre

src/components/app/questions/ai-question-help.tsx renamed to src/components/app/questions/single/layout/ai-question-help.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import EditorIcon from '@/components/ui/icons/editor';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectItem,
+  SelectTrigger,
+  SelectContent,
+} from '@/components/ui/select';
+import { UserRecord } from '@/types/User';
+
+import { useState } from 'react';
+import { themes } from 'prism-react-renderer';
+import { useEffect } from 'react';
+import { updateUser } from '@/actions/user/authed/update-user';
+
+export default function ChangeCodeTheme({ user }: { user: UserRecord | null }) {
+  const [selectedTheme, setSelectedTheme] = useState<keyof typeof themes>(
+    'vs-dark' as keyof typeof themes
+  );
+
+  useEffect(() => {
+    setSelectedTheme(user?.codeEditorTheme as keyof typeof themes);
+  }, [user]);
+
+  const handleThemeChange = async (theme: keyof typeof themes) => {
+    console.log('theme', theme);
+    setSelectedTheme(theme);
+    await updateUser({ userDetails: { codeEditorTheme: theme } });
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <EditorIcon />
+      </PopoverTrigger>
+      <PopoverContent
+        className="bg-black-100 text-white border border-black-50 flex flex-col gap-y-2"
+        align="end"
+      >
+        <h5 className="text-lg font-semibold mb-2">Code Theme</h5>
+        <Select onValueChange={handleThemeChange} value={selectedTheme}>
+          <SelectTrigger className="border border-black-50 w-full">
+            {selectedTheme}
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(themes).map(([key]) => (
+              <SelectItem key={key} value={key}>
+                {key}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </PopoverContent>
+    </Popover>
+  );
+}