From 85ebfe41618f2c41decc86da4fae360a8aec1830 Mon Sep 17 00:00:00 2001
From: James Murdza <james@jamesmurdza.com>
Date: Sat, 15 Jun 2024 21:04:33 -0400
Subject: [PATCH] fix: use the container URL for the preview panel

---
 backend/server/src/index.ts                  | 1 +
 frontend/components/editor/index.tsx         | 6 ++++++
 frontend/components/editor/preview/index.tsx | 6 ++++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts
index 3b0b237..2cb24c6 100644
--- a/backend/server/src/index.ts
+++ b/backend/server/src/index.ts
@@ -132,6 +132,7 @@ io.on("connection", async (socket) => {
       if (!containers[data.sandboxId]) {
         containers[data.sandboxId] = await Sandbox.create();
         console.log("Created container ", data.sandboxId);
+        io.emit("previewURL", "https://" + containers[data.sandboxId].getHostname(5173));
       }
     } catch (error) {
       console.error("Error creating container ", data.sandboxId, error);
diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index dfd1809..2b0d16c 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -94,6 +94,9 @@ export default function CodeEditor({
     }[]
   >([])
 
+  // Preview state
+  const [previewURL, setPreviewURL] = useState<string>("");
+
   const isOwner = sandboxData.userId === userData.id
   const clerk = useClerk()
 
@@ -413,6 +416,7 @@ export default function CodeEditor({
     socketRef.current?.on("rateLimit", onRateLimit)
     socketRef.current?.on("terminalResponse", onTerminalResponse)
     socketRef.current?.on("disableAccess", onDisableAccess)
+    socketRef.current?.on("previewURL", setPreviewURL)
 
     return () => {
       socketRef.current?.off("connect", onConnect)
@@ -421,6 +425,7 @@ export default function CodeEditor({
       socketRef.current?.off("rateLimit", onRateLimit)
       socketRef.current?.off("terminalResponse", onTerminalResponse)
       socketRef.current?.off("disableAccess", onDisableAccess)
+      socketRef.current?.off("previewURL", setPreviewURL)
     }
     // }, []);
   }, [terminals])
@@ -769,6 +774,7 @@ export default function CodeEditor({
                   previewPanelRef.current?.expand()
                   setIsPreviewCollapsed(false)
                 }}
+                src={previewURL}
               />
             </ResizablePanel>
             <ResizableHandle />
diff --git a/frontend/components/editor/preview/index.tsx b/frontend/components/editor/preview/index.tsx
index 0544a12..a400d14 100644
--- a/frontend/components/editor/preview/index.tsx
+++ b/frontend/components/editor/preview/index.tsx
@@ -15,9 +15,11 @@ import { toast } from "sonner"
 export default function PreviewWindow({
   collapsed,
   open,
+  src
 }: {
   collapsed: boolean
   open: () => void
+  src: string
 }) {
   const ref = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
@@ -45,7 +47,7 @@ export default function PreviewWindow({
 
                 <PreviewButton
                   onClick={() => {
-                    navigator.clipboard.writeText(`http://localhost:5173`)
+                    navigator.clipboard.writeText(src)
                     toast.info("Copied preview link to clipboard")
                   }}
                 >
@@ -73,7 +75,7 @@ export default function PreviewWindow({
             ref={ref}
             width={"100%"}
             height={"100%"}
-            src={`http://localhost:5173`}
+            src={src}
           />
         </div>
       )}