fix(Nextjs): Get Presentation by ID stuck in loading

servers/nextjs/app/(presentation-generator)/presentation/components/PresentationPage.tsx

@@ -14,13 +14,14 @@ import {
   usePresentationStreaming,
   usePresentationData,
   usePresentationNavigation,
-  useAutoSave
+  useAutoSave,
 } from "../hooks";
 import { PresentationPageProps } from "../types";
 import LoadingState from "./LoadingState";
 
-const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id }) => {
-
+const PresentationPage: React.FC<PresentationPageProps> = ({
+  presentation_id,
+}) => {
   // State management
   const [loading, setLoading] = useState(true);
   const [selectedSlide, setSelectedSlide] = useState(0);
@@ -28,7 +29,6 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
   const [error, setError] = useState(false);
   const [isMobilePanelOpen, setIsMobilePanelOpen] = useState(false);
 
-
   const { presentationData, isStreaming } = useSelector(
     (state: RootState) => state.presentationGeneration
   );
@@ -37,7 +37,6 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
   const { isSaving } = useAutoSave({
     debounceMs: 2000,
     enabled: !!presentationData && !isStreaming,
-
   });
 
   // Custom hooks
@@ -54,7 +53,12 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
     toggleFullscreen,
     handlePresentExit,
     handleSlideChange,
-  } = usePresentationNavigation(presentation_id, selectedSlide, setSelectedSlide, setIsFullscreen);
+  } = usePresentationNavigation(
+    presentation_id,
+    selectedSlide,
+    setSelectedSlide,
+    setIsFullscreen
+  );
 
   // Initialize streaming
   usePresentationStreaming(
@@ -65,13 +69,10 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
     fetchUserSlides
   );
 
-
   const onSlideChange = (newSlide: number) => {
     handleSlideChange(newSlide, presentationData);
   };
 
-
-
   // Presentation Mode View
   if (isPresentMode) {
     return (
@@ -94,15 +95,11 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
           role="alert"
         >
           <AlertCircle className="w-16 h-16 mb-4 text-red-500" />
-          <h2 className="text-xl font-semibold mb-2">
-            Something went wrong
-          </h2>
+          <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
           <p className="text-center mb-4">
             We couldn't load your presentation. Please try again.
           </p>
-          <Button onClick={() => window.location.reload()}>
-            Refresh Page
-          </Button>
+          <Button onClick={() => window.location.reload()}>Refresh Page</Button>
         </div>
       </div>
     );
@@ -110,12 +107,8 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
 
   return (
     <div className="h-screen flex overflow-hidden flex-col">
-
       <div className="fixed right-6 top-[5.2rem] z-50">
-        {isSaving && (
-          <Loader2 className="w-6 h-6 animate-spin text-blue-500" />
-        )}
-
+        {isSaving && <Loader2 className="w-6 h-6 animate-spin text-blue-500" />}
       </div>
 
       <Header presentation_id={presentation_id} currentSlide={selectedSlide} />
@@ -123,7 +116,7 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
 
       <div
         style={{
-          background: '#c8c7c9',
+          background: "#c8c7c9",
         }}
         className="flex flex-1 relative pt-6"
       >
@@ -136,11 +129,14 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
         />
 
         <div className="flex-1 h-[calc(100vh-100px)] overflow-y-auto">
-          <div id="presentation-slides-wrapper" className="mx-auto flex flex-col items-center overflow-hidden justify-center p-2 sm:p-6 pt-0">
+          <div
+            id="presentation-slides-wrapper"
+            className="mx-auto flex flex-col items-center overflow-hidden justify-center p-2 sm:p-6 pt-0"
+          >
             {!presentationData ||
-              loading ||
-              !presentationData?.slides ||
-              presentationData?.slides.length === 0 ? (
+            loading ||
+            !presentationData?.slides ||
+            presentationData?.slides.length === 0 ? (
               <div className="relative w-full h-[calc(100vh-120px)] mx-auto">
                 <div className="">
                   {Array.from({ length: 2 }).map((_, index) => (
@@ -163,7 +159,6 @@ const PresentationPage: React.FC<PresentationPageProps> = ({ presentation_id })
                       slide={slide}
                       index={index}
                       presentationId={presentation_id}
-
                     />
                   ))}
               </>

servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { toast } from "sonner";
 import { DashboardApi } from "@/app/dashboard/api/dashboard";
@@ -12,7 +12,6 @@ export const usePresentationData = (
   const dispatch = useDispatch();
 
   const fetchUserSlides = useCallback(async () => {
-    console.log("fetching user slides inside usePresentationData");
     try {
       const data = await DashboardApi.getPresentation(presentationId);
       if (data) {
@@ -27,11 +26,7 @@ export const usePresentationData = (
     }
   }, [presentationId, dispatch, setLoading, setError]);
 
-  // useEffect(() => {
-  //   fetchUserSlides();
-  // }, [fetchUserSlides]);
-
   return {
     fetchUserSlides,
   };
-}; 
+};

servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationStreaming.ts

@@ -1,6 +1,10 @@
 import { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { clearPresentationData, setPresentationData, setStreaming } from "@/store/slices/presentationGeneration";
+import {
+  clearPresentationData,
+  setPresentationData,
+  setStreaming,
+} from "@/store/slices/presentationGeneration";
 import { jsonrepair } from "jsonrepair";
 import { RootState } from "@/store/store";
 
@@ -11,8 +15,6 @@ export const usePresentationStreaming = (
   setError: (error: boolean) => void,
   fetchUserSlides: () => void
 ) => {
-  const { presentationData } = useSelector((state: RootState) => state.presentationGeneration);
-
   const dispatch = useDispatch();
   const previousSlidesLength = useRef(0);
 
@@ -64,7 +66,7 @@ export const usePresentationStreaming = (
               dispatch(setStreaming(false));
               setLoading(false);
               eventSource.close();
-              
+
               // Remove stream parameter from URL
               const newUrl = new URL(window.location.href);
               newUrl.searchParams.delete("stream");
@@ -81,7 +83,7 @@ export const usePresentationStreaming = (
             setLoading(false);
             dispatch(setStreaming(false));
             eventSource.close();
-            
+
             // Remove stream parameter from URL
             const newUrl = new URL(window.location.href);
             newUrl.searchParams.delete("stream");
@@ -102,12 +104,7 @@ export const usePresentationStreaming = (
     if (stream) {
       initializeStream();
     } else {
-      console.log("stream is null", stream);
-      console.log("presentationData", presentationData);
-      if(!presentationData || presentationData.slides.length === 0){
-        console.log("fetching user slides");
-        fetchUserSlides();
-      }
+      fetchUserSlides();
     }
 
     return () => {
@@ -116,4 +113,4 @@ export const usePresentationStreaming = (
       }
     };
   }, [presentationId, stream, dispatch, setLoading, setError, fetchUserSlides]);
-}; 
+};