From fbf563dfdff5c68e608fa0c612bc11641757e798 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 14 Apr 2025 10:40:08 +0800
Subject: [PATCH] refactor(details): move panel cleanup logic into useEffect

---
 src/app/(app)/problems/[id]/@Details/page.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/(app)/problems/[id]/@Details/page.tsx b/src/app/(app)/problems/[id]/@Details/page.tsx
index dbd8666..25f1765 100644
--- a/src/app/(app)/problems/[id]/@Details/page.tsx
+++ b/src/app/(app)/problems/[id]/@Details/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useEffect } from "react";
 import { ArrowLeftIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useProblem } from "@/hooks/use-problem";
@@ -15,14 +16,17 @@ export default function DetailsPage() {
   const { api, submission } = useDockviewStore();
   const { editorLanguageConfigs, problemId } = useProblem();
 
-  if (!api || !problemId || !submission?.id) return null;
-
-  if (problemId !== submission.problemId) {
-    const detailsPanel = api.getPanel("Details");
-    if (detailsPanel) {
-      api.removePanel(detailsPanel);
+  useEffect(() => {
+    if (!api || !problemId || !submission?.id) return;
+    if (problemId !== submission.problemId) {
+      const detailsPanel = api.getPanel("Details");
+      if (detailsPanel) {
+        api.removePanel(detailsPanel);
+      }
     }
-  }
+  }, [api, problemId, submission])
+
+  if (!api || !problemId || !submission?.id) return null;
 
   const createdAt = new Date(submission.createdAt);
   const submittedDisplay = isBefore(createdAt, subDays(new Date(), 1))