fix(logs): polling issue

src/frontstage/src/app/projects/[id]/page.tsx

@@ -1,61 +1,66 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import Error from "@/components/error";
+import Loader from "@/components/loader";
+import {
+  useDeployProject,
+  useFetchProject,
+  useFetchProjectLogs,
+} from "@/hooks/useProjectApi";
+import { Project } from "@/store/useProjectStore";
+import { CheckIcon } from "@heroicons/react/24/solid";
 import {
+  Button,
   Card,
   CardBody,
   CardHeader,
-  Divider,
   Chip,
-  Button,
-  Tooltip,
-  Progress,
   CircularProgress,
+  Divider,
   ScrollShadow,
+  Tooltip,
 } from "@nextui-org/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useParams } from "next/navigation";
-import {
-  deployProject,
-  useDeployProject,
-  useFetchProject,
-  useFetchProjectLogs,
-} from "@/hooks/useProjectApi";
-import { Project } from "@/store/useProjectStore";
-import { CheckIcon, ClockIcon } from "@heroicons/react/24/solid";
+import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import Loader from "@/components/loader";
-import Error from "@/components/error";
 
 const ProjectDetailPage: React.FC = () => {
   const params = useParams();
+  const [isPolling, setIsPolling] = useState(false);
+
   const projectId = params.id as string;
   const {
     data: project,
     isLoading,
     error,
-  } = useFetchProject<Project>(projectId);
-
-  const [isPolling, setIsPolling] = useState(false);
+    refetch: refetchProject,
+  } = useFetchProject<Project>(projectId, {
+    refetchInterval: isPolling ? 5000 : false, // Poll every 5 seconds if isPolling is true
+  });
 
   const {
     data: logs,
     isLoading: isLogsLoading,
     error: logsError,
     refetch: refetchLogs,
   } = useFetchProjectLogs<any>(projectId, {
-    enabled: false, // Disable automatic fetching
     refetchInterval: isPolling ? 5000 : false, // Poll every 5 seconds if isPolling is true
   });
 
   useEffect(() => {
     if (project?.status === "DEPLOYING") {
       setIsPolling(true);
-      refetchLogs(); // Start fetching logs
     } else {
       setIsPolling(false);
     }
-  }, [project?.status, refetchLogs]);
+  }, [project?.status]);
+
+  useEffect(() => {
+    if (projectId) {
+      refetchLogs();
+    }
+  }, [projectId, refetchLogs]);
 
   const deployProjectMutation = useDeployProject();
   const [isDeploying, setIsDeploying] = useState(false);

src/frontstage/src/hooks/useProjectApi.ts

@@ -134,7 +134,7 @@ export function useFetchAllProjects<T>() {
   });
 }
 
-export function useFetchProject<T>(projectId: string) {
+export function useFetchProject<T>(projectId: string, options = {}) {
   const { getToken } = useAuth();
 
   return useQuery<T>({
@@ -145,6 +145,7 @@ export function useFetchProject<T>(projectId: string) {
     },
     // Only fetch when projectId is available
     enabled: !!projectId,
+    ...options,
   });
 }