diff --git a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type1Layout.tsx b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type1Layout.tsx index c89239af..82ab12a9 100644 --- a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type1Layout.tsx +++ b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/Type1Layout.tsx @@ -26,7 +26,7 @@ const Type1Layout = ({ const { currentColors } = useSelector((state: RootState) => state.theme); return (
{body && body.length > 0 && body.length === 2 ? body.map((item, index) => ( -
- - +
+ + -
+
+ + +
+
+ )) + : body.map((item, index) => ( +
+ +
+
+ +
+
- )) - : body.map((item, index) => ( -
- -
-
- -
-
- - -
-
-
- ))} +
+ ))}
diff --git a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx new file mode 100644 index 00000000..148e81fa --- /dev/null +++ b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx @@ -0,0 +1,176 @@ +"use client"; +import React, { useEffect, useState, useCallback, useRef } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "@/store/store"; +import { Skeleton } from "@/components/ui/skeleton"; + + +import { DashboardApi } from "@/app/dashboard/api/dashboard"; + +import SlideContent from "../presentation/components/SlideContent"; + +import { + deletePresentationSlide, + setPresentationData, +} from "@/store/slices/presentationGeneration"; +import { toast } from "@/hooks/use-toast"; + + +import { Loader2 } from "lucide-react"; + +import { Button } from "@/components/ui/button"; +import { AlertCircle } from "lucide-react"; +import { setThemeColors, ThemeColors } from "../store/themeSlice"; +import { ThemeType } from "../upload/type"; +import { PresentationGenerationApi } from "../services/api/presentation-generation"; +import { renderSlideContent } from "../components/slide_config"; + + + +// Custom debounce function +function useDebounce void>( + callback: T, + delay: number +) { + const timeoutRef = useRef(); + + return useCallback( + (...args: Parameters) => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + + timeoutRef.current = setTimeout(() => { + callback(...args); + }, delay); + }, + [callback, delay] + ); +} + +const PresentationPage = ({ presentation_id }: { presentation_id: string }) => { + + const dispatch = useDispatch(); + const [loading, setLoading] = useState(true); + + const { currentTheme, currentColors } = useSelector( + (state: RootState) => state.theme + ); + const { presentationData } = useSelector( + (state: RootState) => state.presentationGeneration + ); + const [error, setError] = useState(false); + // Function to fetch the slides + useEffect(() => { + fetchUserSlides(); + }, []); + + // Function to fetch the user slides + const fetchUserSlides = async () => { + try { + const data = await DashboardApi.getPresentation(presentation_id); + if (data) { + if (data.presentation.theme) { + dispatch( + setThemeColors({ + ...data.presentation.theme.colors, + theme: data.presentation.theme.name as ThemeType, + }) + ); + setColorsVariables( + data.presentation.theme.colors, + data.presentation.theme.name as ThemeType + ); + } + dispatch(setPresentationData(data)); + setLoading(false); + } + } catch (error) { + setError(true); + toast({ + title: "Error", + description: "Failed to load presentation", + variant: "destructive", + }); + + console.error("Error fetching user slides:", error); + setLoading(false); + } + }; + const setColorsVariables = (colors: ThemeColors, theme: ThemeType) => { + const root = document.documentElement; + Object.entries(colors).forEach(([key, value]) => { + const cssKey = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()); + root.style.setProperty(`--${theme}-${cssKey}`, value); + }); + }; + const language = presentationData?.presentation?.language || "English"; + // Regular view + return ( +
+ {error ? ( +
+
+ + Oops! +

+ We encountered an issue loading your presentation. +

+

+ Please check your internet connection or try again later. +

+ +
+
+ ) : ( + + +
+
+ {!presentationData || + loading || + !presentationData?.slides || + presentationData?.slides.length === 0 ? ( +
+
+ {Array.from({ length: 2 }).map((_, index) => ( + + ))} +
+ +
+ ) : ( + <> + {presentationData && + presentationData.slides && + presentationData.slides.length > 0 && + presentationData.slides.map((slide, index) => ( + renderSlideContent(slide, language) + ))} + + )} +
+
+ + )} +
+ ); +}; + +export default PresentationPage; diff --git a/servers/nextjs/app/(presentation-generator)/pdf-maker/page.tsx b/servers/nextjs/app/(presentation-generator)/pdf-maker/page.tsx new file mode 100644 index 00000000..4ff0ef46 --- /dev/null +++ b/servers/nextjs/app/(presentation-generator)/pdf-maker/page.tsx @@ -0,0 +1,28 @@ +'use client' +import React from "react"; +import { FooterProvider } from "../context/footerContext"; + +import { Button } from "@/components/ui/button"; +import { useRouter, useSearchParams } from "next/navigation"; +import PdfMakerPage from "./PdfMakerPage"; +const page = () => { + + const router = useRouter(); + const params = useSearchParams(); + const queryId = params.get("id"); + if (!queryId) { + return ( +
+

No presentation id found

+

Please try again

+ +
+ ); + } + return ( + + + + ); +}; +export default page; diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx index 2b66f697..082a2a8d 100644 --- a/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx +++ b/servers/nextjs/app/(presentation-generator)/presentation/components/Header.tsx @@ -324,6 +324,9 @@ const Header = ({ {isStreaming && ( )} +