A little improvement on move handling

src/app/runs/[runId]/components/Editor.tsx

@@ -9,8 +9,9 @@ import { json } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
 import { java } from "@codemirror/lang-java";
 import { useEffect, useState } from "react";
-import useAction from "@/hook/use-action";
+import useAction, { useActionOnce } from "@/hook/use-action";
 import { getLiveRunMoves } from "@/modules/live-run/actions";
+import { LiveRun } from "@/modules/live-run/types";
 
 type Language =
   | "javascript"
@@ -50,9 +51,9 @@ type Move = {
   };
 };
 
-export default function Editor() {
+export default function Editor({ run }: { run: LiveRun | null }) {
   const [editorView, setEditorView] = useState<EditorView>();
-  const [moves] = useAction<Move[]>(getLiveRunMoves);
+  const [moves] = useActionOnce<Move[]>(getLiveRunMoves, [run]);
 
   useEffect(() => {
     if (!editorView || !moves) return;

src/app/runs/[runId]/page.tsx

@@ -82,7 +82,7 @@ export default function Run() {
                 <File size={16} /> myfile.js
               </header>
               <div className="flex-1 pt-3 pb-4 md:pb-5 w-full h-full">
-                <Editor />
+                <Editor run={run} />
               </div>
             </div>
           </CardContent>

src/hook/use-action.ts

@@ -18,6 +18,26 @@ export default function useAction<T>(
   return [value, loaded, error];
 }
 
+export function useActionOnce<T>(
+  action: () => Promise<T>,
+  dependencies: any[] = [],
+): [T | null, boolean, Error | null] {
+  const [value, setValue] = useState<T | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (loaded) return;
+
+    action()
+      .then(setValue)
+      .catch(setError)
+      .finally(() => setLoaded(true));
+  }, dependencies);
+
+  return [value, loaded, error];
+}
+
 export function useActionInterval<T>(
   action: () => Promise<T>,
   interval: number,