Problem refrencing

src/app/run/page.tsx

@@ -10,9 +10,16 @@ import useAction, { useActionInterval } from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
 import ProblemCard from "../problems/components/ProblemCard";
 import ProfileCard from "./components/ProfileCard";
+import { getProblem } from "@/modules/problems/actions";
 
 export default function Run() {
-  const [runInfo] = useActionInterval(getLiveRun, 1000);
+  const [run] = useActionInterval(getLiveRun, 1000);
+  const [problem] = useAction(
+    async () => (run?.id ? getProblem(run.problem) : null),
+    [run],
+  );
+
+  console.log(problem);
 
   const chatMessages: ChatMessage[] = [
     { user: "Alice", message: "Nice split!", time: "1:53" },
@@ -40,21 +47,11 @@ export default function Run() {
           </div>
 
           <div className="flex-1 animate-fade-in opacity-0 stagger-2">
-            {runInfo && <RunTimer run={runInfo} />}
+            {run && <RunTimer run={run} />}
           </div>
 
           <div className="flex-2">
-            <ProblemCard
-              index={4}
-              problem={{
-                id: "fix-auth-callback",
-                title: "Fix the Broken Auth Callback",
-                description:
-                  "Users can log in with OAuth, but sessions aren't persisted. Fix it.",
-                language: "typescript",
-                difficulty: "easy",
-              }}
-            />
+            {problem && <ProblemCard index={4} problem={problem} />}
           </div>
         </div>
 

src/hook/use-action.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 export default function useAction<T>(
   action: () => Promise<T>,
-  dependencies = [],
+  dependencies: any[] = [],
 ): [T | null, boolean, Error | null] {
   const [value, setValue] = useState<T | null>(null);
   const [loaded, setLoaded] = useState(false);
@@ -21,7 +21,7 @@ export default function useAction<T>(
 export function useActionInterval<T>(
   action: () => Promise<T>,
   interval: number,
-  dependencies = [],
+  dependencies: any[] = [],
 ): [T | null, boolean, Error | null] {
   const [value, setValue] = useState<T | null>(null);
   const [loaded, setLoaded] = useState(false);

src/modules/live-run/actions.ts

@@ -56,7 +56,7 @@ export async function getLiveRun(): Promise<LiveRun> {
     username: "selimaj",
     start: 1770497350654,
     views: 230,
-    problem: "solve",
+    problem: "fix-auth-callback",
     category: "any%",
     runsCount: 0,
   };

src/modules/problems/actions.ts

@@ -6,3 +6,7 @@ import { Problem } from "./types";
 export async function getProblems(): Promise<Problem[]> {
   return await Core.getProblems();
 }
+
+export async function getProblem(id: string): Promise<Problem | undefined> {
+  return await Core.getProblem(id);
+}

src/modules/problems/core.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import "server-only";
-import { ProblemDefinition } from "./types";
+import { Problem, ProblemDefinition } from "./types";
 
 const problems: ProblemDefinition[] = [
   {
@@ -35,7 +35,7 @@ const problems: ProblemDefinition[] = [
   },
 ];
 
-export async function getProblems() {
+export async function getProblems(): Promise<Problem[]> {
   return problems.map((def) => ({
     id: def.id,
     title: def.title,
@@ -44,3 +44,17 @@ export async function getProblems() {
     language: def.language,
   }));
 }
+
+export async function getProblem(id: string): Promise<Problem | undefined> {
+  const problem = problems.find((p) => p.id === id);
+
+  if (!problem) return;
+
+  return {
+    id: problem.id,
+    title: problem.title,
+    description: problem.description,
+    difficulty: problem.difficulty,
+    language: problem.language,
+  };
+}