services logic

frontend/components/editor/editor.tsx

@@ -35,19 +35,20 @@ import { ImperativePanelHandle } from "react-resizable-panels";
 export default function CodeEditor({
   userData,
   sandboxData,
+  ip,
 }: {
   userData: User;
   sandboxData: Sandbox;
+  ip: string;
 }) {
   const socket = io(
     // `ws://${sandboxData.id}.ws.ishaand.com?userId=${userData.id}&sandboxId=${sandboxData.id}`
-    `http://localhost:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+    `http://${ip}:4000?userId=${userData.id}&sandboxId=${sandboxData.id}`,
     {
       timeout: 2000,
     }
   );
 
-  const [isAwaitingConnection, setIsAwaitingConnection] = useState(true);
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
   const [disableAccess, setDisableAccess] = useState({
     isDisabled: false,
@@ -362,9 +363,7 @@ export default function CodeEditor({
 
   // Socket event listener effect
   useEffect(() => {
-    const onConnect = () => {
-      setIsAwaitingConnection(false);
-    };
+    const onConnect = () => {};
 
     const onDisconnect = () => {
       setTerminals([]);
@@ -534,14 +533,6 @@ export default function CodeEditor({
     });
   };
 
-  if (isAwaitingConnection)
-    return (
-      <Loading
-        text="Connecting to server..."
-        description="This could take a few minutes if the backend needs to scale resources for your cloud code editing environment. Please check back soon."
-      />
-    );
-
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
     return (

frontend/components/editor/index.tsx

@@ -4,8 +4,9 @@ import dynamic from "next/dynamic";
 import Loading from "@/components/editor/loading";
 import { Sandbox, User } from "@/lib/types";
 import { useEffect, useState } from "react";
-// import { startServer } from "@/lib/utils";
 import { toast } from "sonner";
+import { getTaskIp, startServer } from "@/lib/actions";
+import { checkServiceStatus } from "@/lib/utils";
 
 const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
   ssr: false,
@@ -13,29 +14,70 @@ const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
 });
 
 export default function Editor({
+  isOwner,
   userData,
   sandboxData,
 }: {
+  isOwner: boolean;
   userData: User;
   sandboxData: Sandbox;
 }) {
-  const [isServerRunning, setIsServerRunning] = useState(false);
+  const [isServiceRunning, setIsServiceRunning] = useState(false);
+  const [isDeploymentActive, setIsDeploymentActive] = useState(false);
+  const [taskIp, setTaskIp] = useState<string>();
   const [didFail, setDidFail] = useState(false);
 
   useEffect(() => {
-    // startServer(sandboxData.id, userData.id, (success: boolean) => {
-    //   if (!success) {
-    //     toast.error("Failed to start server.");
-    //     setDidFail(true);
-    //   } else {
-    //     setIsServerRunning(true);
-    //   }
-    // });
-    console.log("startServer");
+    if (!isOwner) {
+      toast.error("You are not the owner of this sandbox. (TEMPORARY)");
+      setDidFail(true);
+      return;
+    }
+
+    startServer(sandboxData.id).then((response) => {
+      if (!response.success) {
+        toast.error(response.message);
+        setDidFail(true);
+      } else {
+        setIsServiceRunning(true);
+
+        checkServiceStatus(sandboxData.id)
+          .then(() => {
+            setIsDeploymentActive(true);
+
+            getTaskIp(sandboxData.id)
+              .then((ip) => {
+                setTaskIp(ip);
+              })
+              .catch(() => {
+                setDidFail(true);
+                toast.error("An error occurred while getting your server IP.");
+              });
+          })
+          .catch(() => {
+            toast.error("An error occurred while initializing your server.");
+            setDidFail(true);
+          });
+      }
+    });
   }, []);
 
-  // if (!isServerRunning || didFail)
-  //   return <Loading didFail={didFail} text="Creating your sandbox resources" />;
+  if (didFail) return <Loading didFail={didFail} />;
+  if (!isServiceRunning || !isDeploymentActive || !taskIp)
+    return (
+      <Loading
+        text="Creating sandbox resources"
+        description={
+          isDeploymentActive
+            ? "Preparing server networking..."
+            : isServiceRunning
+            ? "Initializing server, this could take a minute..."
+            : "Requesting your server creation..."
+        }
+      />
+    );
 
-  return <CodeEditor userData={userData} sandboxData={sandboxData} />;
+  return (
+    <CodeEditor ip={taskIp} userData={userData} sandboxData={sandboxData} />
+  );
 }

frontend/components/editor/loading/index.tsx

@@ -48,12 +48,14 @@ export default function Loading({
               )}
             </DialogTitle>
             {didFail ? (
-              <DialogDescription>
+              <DialogDescription className="pt-2">
                 Try again in a minute, or contact @ishaandey_ on Twitter/X if it
                 still doesn't work.
               </DialogDescription>
             ) : description ? (
-              <DialogDescription>{description}</DialogDescription>
+              <DialogDescription className="pt-2">
+                {description}
+              </DialogDescription>
             ) : null}
           </DialogHeader>
         </DialogContent>