refactor(route): rename [id] to [problemId] in problems route

src/app/(app)/problems/[problemId]/layout.tsx

@@ -3,16 +3,16 @@ import { ProblemHeader } from "@/features/problems/components/problem-header";
 
 interface ProblemLayoutProps {
   children: React.ReactNode;
-  params: Promise<{ id: string }>;
+  params: Promise<{ problemId: string }>;
 }
 
 export default async function ProblemLayout({
   children,
   params,
 }: ProblemLayoutProps) {
-  const { id } = await params;
+  const { problemId } = await params;
 
-  if (!id) {
+  if (!problemId) {
     return notFound();
   }
 

src/features/problems/description/components/content.tsx

@@ -4,11 +4,11 @@ import { MdxRenderer } from "@/components/content/mdx-renderer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 interface DescriptionContentProps {
-  id: string;
+  problemId: string;
 }
 
-const DescriptionContent = async ({ id }: DescriptionContentProps) => {
+const DescriptionContent = async ({ problemId }: DescriptionContentProps) => {
-  const problem = await getCachedProblem(id);
+  const problem = await getCachedProblem(problemId);
 
   return (
     <ScrollArea className="h-full">

src/features/problems/description/components/panel.tsx

@@ -5,16 +5,16 @@ import {
 } from "@/features/problems/description/components/content";
 
 interface DescriptionPanelProps {
-  id: string;
+  problemId: string;
 }
 
-const DescriptionPanel = ({ id }: DescriptionPanelProps) => {
+const DescriptionPanel = ({ problemId }: DescriptionPanelProps) => {
   return (
     <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background overflow-hidden">
       <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <Suspense fallback={<DescriptionContentSkeleton />}>
-            <DescriptionContent id={id} />
+            <DescriptionContent problemId={problemId} />
           </Suspense>
         </div>
       </div>

src/features/problems/solution/components/content.tsx

@@ -4,11 +4,11 @@ import { MdxRenderer } from "@/components/content/mdx-renderer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 interface SolutionContentProps {
-  id: string;
+  problemId: string;
 }
 
-const SolutionContent = async ({ id }: SolutionContentProps) => {
+const SolutionContent = async ({ problemId }: SolutionContentProps) => {
-  const problem = await getCachedProblem(id);
+  const problem = await getCachedProblem(problemId);
 
   return (
     <ScrollArea className="h-full">

src/features/problems/solution/components/panel.tsx

@@ -5,16 +5,16 @@ import {
 } from "@/features/problems/solution/components/content";
 
 interface SolutionPanelProps {
-  id: string;
+  problemId: string;
 }
 
-const SolutionPanel = ({ id }: SolutionPanelProps) => {
+const SolutionPanel = ({ problemId }: SolutionPanelProps) => {
   return (
     <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background overflow-hidden">
       <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <Suspense fallback={<SolutionContentSkeleton />}>
-            <SolutionContent id={id} />
+            <SolutionContent problemId={problemId} />
           </Suspense>
         </div>
       </div>

src/lib/prisma.ts

@@ -61,52 +61,60 @@ export const getCachedProblems = cache(
   )
 );
 
-const getProblem = async (id: string) => {
+const getProblem = async (problemId: string) => {
   const startTime = Date.now();
-  log.debug({ id }, "Fetching single problem");
+  log.debug({ problemId }, "Fetching single problem");
   try {
-    const problem = await prisma.problem.findUnique({ where: { id } });
+    const problem = await prisma.problem.findUnique({
+      where: { id: problemId },
+    });
     if (problem) {
-      log.debug({ id, durationMs: Date.now() - startTime }, "Problem found");
+      log.debug(
+        { problemId, durationMs: Date.now() - startTime },
+        "Problem found"
+      );
     } else {
-      log.warn({ id, durationMs: Date.now() - startTime }, "Problem not found");
+      log.warn(
+        { problemId, durationMs: Date.now() - startTime },
+        "Problem not found"
+      );
     }
     return problem;
   } catch (error) {
     log.error(
-      { id, durationMs: Date.now() - startTime, error },
+      { problemId, durationMs: Date.now() - startTime, error },
       "Failed to fetch problem"
     );
     throw error;
   }
 };
 
-export const getCachedProblem = cache((id: string) =>
+export const getCachedProblem = cache((problemId: string) =>
   unstable_cache(
     async () => {
       const startTime = Date.now();
       log.debug(
-        { id },
+        { problemId },
         "Calling getProblemCached (expect cache hit if warmed)"
       );
       try {
-        const result = await getProblem(id);
+        const result = await getProblem(problemId);
         log.info(
-          { id, durationMs: Date.now() - startTime },
+          { problemId, durationMs: Date.now() - startTime },
           "getProblemCached finished"
         );
         return result;
       } catch (error) {
         log.error(
-          { id, durationMs: Date.now() - startTime, error },
+          { problemId, durationMs: Date.now() - startTime, error },
           "getProblemCached failed"
         );
         throw error;
       }
     },
-    ["getProblem", id],
+    ["getProblem", problemId],
     {
-      tags: [`problem-${id}`],
+      tags: [`problem-${problemId}`],
     }
   )()
 );