diff --git a/apps/docs/src/app/demo/components/demo-client.tsx b/apps/docs/src/app/demo/components/demo-client.tsx new file mode 100644 index 0000000..47d3fc3 --- /dev/null +++ b/apps/docs/src/app/demo/components/demo-client.tsx @@ -0,0 +1,225 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useSearchParams } from "next/navigation"; +import { Palmtree } from "lucide-react"; +import { motion } from "motion/react"; + +import { BackgroundLights } from "@/components/ui/background-lights"; +import { Button } from "@/components/ui/button"; + +interface DemoStatus { + status: "waiting" | "ready"; + url: string | null; +} + +interface CreateDemoResponse { + message: string; + url: string | null; +} + +function DemoClientInner() { + const searchParams = useSearchParams(); + const demoId = searchParams.get("id"); + const token = searchParams.get("token"); + + const [status, setStatus] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const validateAccess = () => { + const storedToken = sessionStorage.getItem("demo_token"); + const storedId = sessionStorage.getItem("demo_id"); + const expiresAt = sessionStorage.getItem("demo_expires"); + + if (!demoId || !token || !storedToken || !storedId || !expiresAt) { + return false; + } + + if (token !== storedToken || demoId !== storedId || Date.now() > parseInt(expiresAt)) { + return false; + } + + return true; + }; + + if (!validateAccess()) { + setError("Unauthorized access. Please use the Live Demo button to access this page."); + setIsLoading(false); + return; + } + + const createDemo = async () => { + try { + const response = await fetch("https://palmr-demo-manager.kyantech.com.br/create-demo", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + palmr_demo_instance_id: demoId, + }), + }); + + if (!response.ok) { + throw new Error("Failed to create demo"); + } + + const data: CreateDemoResponse = await response.json(); + console.log("Demo creation response:", data); + } catch (err) { + console.error("Error creating demo:", err); + setError("Failed to create demo. Please try again."); + setIsLoading(false); + } + }; + + const checkStatus = async () => { + try { + const response = await fetch(`https://palmr-demo-manager.kyantech.com.br/status/${demoId}`); + + if (!response.ok) { + throw new Error("Failed to check demo status"); + } + + const data: DemoStatus = await response.json(); + setStatus(data); + + if (data.status === "ready" && data.url) { + setIsLoading(false); + } + } catch (err) { + console.error("Error checking status:", err); + setError("Failed to check demo status. Please try again."); + setIsLoading(false); + } + }; + + createDemo(); + + const interval = setInterval(checkStatus, 5000); // Check every 5 seconds + + checkStatus(); + + return () => { + clearInterval(interval); + sessionStorage.removeItem("demo_token"); + sessionStorage.removeItem("demo_id"); + sessionStorage.removeItem("demo_expires"); + }; + }, [demoId, token]); + + const handleGoToDemo = () => { + if (status?.url) { + window.open(status.url, "_blank"); + } + window.location.href = "/"; + }; + + if (error) { + return ( +
+ +
+
+

Error

+

{error}

+ +
+
+
+ ); + } + + if (isLoading) { + return ( +
+ +
+
+

Your demo is being generated, please wait...

+

+ This demo will be available for 30 minutes for testing. After that, all data will be permanently deleted + and become inaccessible. You can test Palmr. with a 300MB storage limit. +

+
+
+
+ ); + } + + return ( +
+ +
+ +
+ +
+
+ + Your demo is ready! + + + Click the button below to test + +
+
+ + + + + + +
+ +
+
+ ); +} + +export default function DemoClient() { + return ; +} diff --git a/apps/docs/src/app/demo/page.tsx b/apps/docs/src/app/demo/page.tsx index 0e493c0..a76a1df 100644 --- a/apps/docs/src/app/demo/page.tsx +++ b/apps/docs/src/app/demo/page.tsx @@ -1,224 +1,13 @@ "use client"; +import { Suspense } from "react"; -import { useEffect, useState } from "react"; -import { useSearchParams } from "next/navigation"; -import { Palmtree } from "lucide-react"; -import { motion } from "motion/react"; - -import { BackgroundLights } from "@/components/ui/background-lights"; -import { Button } from "@/components/ui/button"; - -interface DemoStatus { - status: "waiting" | "ready"; - url: string | null; -} - -interface CreateDemoResponse { - message: string; - url: string | null; -} +import DemoClient from "./components/demo-client"; export default function DemoPage() { - const searchParams = useSearchParams(); - const demoId = searchParams.get("id"); - const token = searchParams.get("token"); - - const [status, setStatus] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - const validateAccess = () => { - const storedToken = sessionStorage.getItem("demo_token"); - const storedId = sessionStorage.getItem("demo_id"); - const expiresAt = sessionStorage.getItem("demo_expires"); - - if (!demoId || !token || !storedToken || !storedId || !expiresAt) { - return false; - } - - if (token !== storedToken || demoId !== storedId || Date.now() > parseInt(expiresAt)) { - return false; - } - - return true; - }; - - if (!validateAccess()) { - setError("Unauthorized access. Please use the Live Demo button to access this page."); - setIsLoading(false); - return; - } - - const createDemo = async () => { - try { - const response = await fetch("https://palmr-demo-manager.kyantech.com.br/create-demo", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - palmr_demo_instance_id: demoId, - }), - }); - - if (!response.ok) { - throw new Error("Failed to create demo"); - } - - const data: CreateDemoResponse = await response.json(); - console.log("Demo creation response:", data); - } catch (err) { - console.error("Error creating demo:", err); - setError("Failed to create demo. Please try again."); - setIsLoading(false); - } - }; - - const checkStatus = async () => { - try { - const response = await fetch(`https://palmr-demo-manager.kyantech.com.br/status/${demoId}`); - - if (!response.ok) { - throw new Error("Failed to check demo status"); - } - - const data: DemoStatus = await response.json(); - setStatus(data); - - if (data.status === "ready" && data.url) { - setIsLoading(false); - } - } catch (err) { - console.error("Error checking status:", err); - setError("Failed to check demo status. Please try again."); - setIsLoading(false); - } - }; - - createDemo(); - - const interval = setInterval(checkStatus, 5000); // Check every 5 seconds - - checkStatus(); - - return () => { - clearInterval(interval); - sessionStorage.removeItem("demo_token"); - sessionStorage.removeItem("demo_id"); - sessionStorage.removeItem("demo_expires"); - }; - }, [demoId, token]); - - const handleGoToDemo = () => { - if (status?.url) { - window.open(status.url, "_blank"); - } - window.location.href = "/"; - }; - - if (error) { - return ( -
- -
-
-

Error

-

{error}

- -
-
-
- ); - } - - if (isLoading) { - return ( -
- -
-
-
-

Your demo is being generated, please wait...

-

- This demo will be available for 30 minutes for testing. After that, all data will be permanently deleted - and become inaccessible. You can test Palmr. with a 300MB storage limit. -

-
-
-
-
- ); - } - return ( -
- -
- -
- -
-
- - Your demo is ready! - - - Click the button below to test - -
-
- - - - - - - -
- -
-
+ + + ); } +