(null)
- const [code, setCode] = useState("");
- const [expanded, setExpanded] = useState(false);
+ const [code, setCode] = useState("")
+ const [expanded, setExpanded] = useState(false)
const [loading, setLoading] = useState({
generate: false,
regenerate: false,
- });
- const [input, setInput] = useState("");
- const [currentPrompt, setCurrentPrompt] = useState("");
+ })
+ const [input, setInput] = useState("")
+ const [currentPrompt, setCurrentPrompt] = useState("")
useEffect(() => {
setTimeout(() => {
- inputRef.current?.focus();
- }, 100);
- }, [inputRef.current]);
+ inputRef.current?.focus()
+ }, 100)
+ }, [inputRef.current])
const handleGenerate = async ({
regenerate = false,
}: {
- regenerate?: boolean;
+ regenerate?: boolean
}) => {
if (user.generations >= 10) {
toast.error(
"You reached the maximum # of generations. Contact @ishaandey_ on X/Twitter to reset :)"
- );
- return;
+ )
+ return
}
- setLoading({ generate: !regenerate, regenerate });
- setCurrentPrompt(input);
+ setLoading({ generate: !regenerate, regenerate })
+ setCurrentPrompt(input)
socket.emit(
"generateCode",
data.fileName,
@@ -75,25 +75,25 @@ export default function GenerateInput({
data.line,
regenerate ? currentPrompt : input,
(res: { response: string; success: boolean }) => {
- console.log("Generated code", res.response, res.success);
+ console.log("Generated code", res.response, res.success)
// if (!res.success) {
// toast.error("Failed to generate code.");
// return;
// }
- setCode(res.response);
- router.refresh();
+ setCode(res.response)
+ router.refresh()
}
- );
- };
+ )
+ }
useEffect(() => {
if (code) {
- setExpanded(true);
- onExpand();
- setLoading({ generate: false, regenerate: false });
+ setExpanded(true)
+ onExpand()
+ setLoading({ generate: false, regenerate: false })
}
- }, [code]);
+ }, [code])
return (
@@ -105,7 +105,7 @@ export default function GenerateInput({
}}
value={input}
onChange={(e) => setInput(e.target.value)}
- placeholder="✨ Generate code with a prompt"
+ placeholder="Generate code with a prompt"
className="h-8 w-full rounded-md border border-muted-foreground bg-transparent px-3 py-1 text-sm shadow-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
/>
@@ -192,5 +192,5 @@ export default function GenerateInput({
) : null}
- );
+ )
}
diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx
index 25b37fd..ee556a1 100644
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -1,68 +1,51 @@
-"use client";
+"use client"
-import dynamic from "next/dynamic";
-import Loading from "@/components/editor/loading";
-import { Sandbox, User } from "@/lib/types";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { getTaskIp, startServer } from "@/lib/actions";
-import { checkServiceStatus } from "@/lib/utils";
+import dynamic from "next/dynamic"
+import Loading from "@/components/editor/loading"
+import { Sandbox, User } from "@/lib/types"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { getTaskIp, startServer } from "@/lib/actions"
+import { checkServiceStatus, setupServer } from "@/lib/utils"
const CodeEditor = dynamic(() => import("@/components/editor/editor"), {
ssr: false,
loading: () => ,
-});
+})
export default function Editor({
- isOwner,
userData,
sandboxData,
}: {
- isOwner: boolean;
- userData: User;
- sandboxData: Sandbox;
+ userData: User
+ sandboxData: Sandbox
}) {
- const [isServiceRunning, setIsServiceRunning] = useState(false);
- const [isDeploymentActive, setIsDeploymentActive] = useState(false);
- const [taskIp, setTaskIp] = useState();
- const [didFail, setDidFail] = useState(false);
+ const isDev = process.env.VERCEL_ENV === "development"
+
+ const [isServiceRunning, setIsServiceRunning] = useState(false)
+ const [isDeploymentActive, setIsDeploymentActive] = useState(false)
+ const [taskIp, setTaskIp] = useState()
+ const [didFail, setDidFail] = useState(false)
useEffect(() => {
- if (!isOwner) {
- toast.error("You are not the owner of this sandbox. (TEMPORARY)");
- setDidFail(true);
- return;
+ if (isDev) {
+ setIsServiceRunning(true)
+ setIsDeploymentActive(true)
+ setTaskIp("localhost")
+ return
}
- startServer(sandboxData.id).then((response) => {
- if (!response.success) {
- toast.error(response.message);
- setDidFail(true);
- } else {
- setIsServiceRunning(true);
+ setupServer({
+ sandboxId: sandboxData.id,
+ setIsServiceRunning,
+ setIsDeploymentActive,
+ setTaskIp,
+ setDidFail,
+ toast,
+ })
+ }, [])
- 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 (didFail) return ;
+ if (didFail) return
if (!isServiceRunning || !isDeploymentActive || !taskIp)
return (
- );
+ )
return (
- );
+ )
}
diff --git a/frontend/lib/actions.ts b/frontend/lib/actions.ts
index 432b859..d335a87 100644
--- a/frontend/lib/actions.ts
+++ b/frontend/lib/actions.ts
@@ -1,21 +1,21 @@
-"use server";
+"use server"
-import { revalidatePath } from "next/cache";
-import ecsClient, { ec2Client } from "./ecs";
+import { revalidatePath } from "next/cache"
+import ecsClient, { ec2Client } from "./ecs"
import {
CreateServiceCommand,
DescribeClustersCommand,
DescribeServicesCommand,
DescribeTasksCommand,
ListTasksCommand,
-} from "@aws-sdk/client-ecs";
-import { DescribeNetworkInterfacesCommand } from "@aws-sdk/client-ec2";
+} from "@aws-sdk/client-ecs"
+import { DescribeNetworkInterfacesCommand } from "@aws-sdk/client-ec2"
export async function createSandbox(body: {
- type: string;
- name: string;
- userId: string;
- visibility: string;
+ type: string
+ name: string
+ userId: string
+ visibility: string
}) {
const res = await fetch(
"https://database.ishaan1013.workers.dev/api/sandbox",
@@ -26,15 +26,15 @@ export async function createSandbox(body: {
},
body: JSON.stringify(body),
}
- );
+ )
- return await res.text();
+ return await res.text()
}
export async function updateSandbox(body: {
- id: string;
- name?: string;
- visibility?: "public" | "private";
+ id: string
+ name?: string
+ visibility?: "public" | "private"
}) {
await fetch("https://database.ishaan1013.workers.dev/api/sandbox", {
method: "POST",
@@ -42,17 +42,17 @@ export async function updateSandbox(body: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
- });
+ })
- revalidatePath("/dashboard");
+ revalidatePath("/dashboard")
}
export async function deleteSandbox(id: string) {
await fetch(`https://database.ishaan1013.workers.dev/api/sandbox?id=${id}`, {
method: "DELETE",
- });
+ })
- revalidatePath("/dashboard");
+ revalidatePath("/dashboard")
}
export async function shareSandbox(sandboxId: string, email: string) {
@@ -65,15 +65,15 @@ export async function shareSandbox(sandboxId: string, email: string) {
},
body: JSON.stringify({ sandboxId, email }),
}
- );
- const text = await res.text();
+ )
+ const text = await res.text()
if (res.status !== 200) {
- return { success: false, message: text };
+ return { success: false, message: text }
}
- revalidatePath(`/code/${sandboxId}`);
- return { success: true, message: "Shared successfully." };
+ revalidatePath(`/code/${sandboxId}`)
+ return { success: true, message: "Shared successfully." }
}
export async function unshareSandbox(sandboxId: string, userId: string) {
@@ -83,102 +83,102 @@ export async function unshareSandbox(sandboxId: string, userId: string) {
"Content-Type": "application/json",
},
body: JSON.stringify({ sandboxId, userId }),
- });
+ })
- revalidatePath(`/code/${sandboxId}`);
+ revalidatePath(`/code/${sandboxId}`)
}
export async function describeService(serviceName: string) {
const command = new DescribeServicesCommand({
cluster: process.env.NEXT_PUBLIC_AWS_ECS_CLUSTER!,
services: [serviceName],
- });
+ })
- return await ecsClient.send(command);
+ return await ecsClient.send(command)
}
export async function getTaskIp(serviceName: string) {
const listCommand = new ListTasksCommand({
cluster: process.env.NEXT_PUBLIC_AWS_ECS_CLUSTER!,
serviceName,
- });
+ })
- const listResponse = await ecsClient.send(listCommand);
- const taskArns = listResponse.taskArns;
+ const listResponse = await ecsClient.send(listCommand)
+ const taskArns = listResponse.taskArns
const describeCommand = new DescribeTasksCommand({
cluster: process.env.NEXT_PUBLIC_AWS_ECS_CLUSTER!,
tasks: taskArns,
- });
+ })
- const describeResponse = await ecsClient.send(describeCommand);
- const tasks = describeResponse.tasks;
- const taskAttachment = tasks?.[0].attachments?.[0].details;
+ const describeResponse = await ecsClient.send(describeCommand)
+ const tasks = describeResponse.tasks
+ const taskAttachment = tasks?.[0].attachments?.[0].details
if (!taskAttachment) {
- throw new Error("Task attachment not found");
+ throw new Error("Task attachment not found")
}
const eni = taskAttachment.find(
(detail) => detail.name === "networkInterfaceId"
- )?.value;
+ )?.value
if (!eni) {
- throw new Error("Network interface not found");
+ throw new Error("Network interface not found")
}
const describeNetworkInterfacesCommand = new DescribeNetworkInterfacesCommand(
{
NetworkInterfaceIds: [eni],
}
- );
+ )
const describeNetworkInterfacesResponse = await ec2Client.send(
describeNetworkInterfacesCommand
- );
+ )
const ip =
describeNetworkInterfacesResponse.NetworkInterfaces?.[0].Association
- ?.PublicIp;
+ ?.PublicIp
if (!ip) {
- throw new Error("Public IP not found");
+ throw new Error("Public IP not found")
}
- return ip;
+ return ip
}
-async function doesServiceExist(serviceName: string) {
- const response = await describeService(serviceName);
+export async function doesServiceExist(serviceName: string) {
+ const response = await describeService(serviceName)
const activeServices = response.services?.filter(
(service) => service.status === "ACTIVE"
- );
+ )
- console.log("activeServices: ", activeServices);
+ console.log("activeServices: ", activeServices)
- return activeServices?.length === 1;
+ return activeServices?.length === 1
}
async function countServices() {
const command = new DescribeClustersCommand({
clusters: [process.env.NEXT_PUBLIC_AWS_ECS_CLUSTER!],
- });
+ })
- const response = await ecsClient.send(command);
- return response.clusters?.[0].activeServicesCount!;
+ const response = await ecsClient.send(command)
+ return response.clusters?.[0].activeServicesCount!
}
export async function startServer(
serviceName: string
): Promise<{ success: boolean; message: string }> {
- const serviceExists = await doesServiceExist(serviceName);
+ const serviceExists = await doesServiceExist(serviceName)
if (serviceExists) {
- return { success: true, message: "" };
+ return { success: true, message: "" }
}
- const activeServices = await countServices();
+ const activeServices = await countServices()
if (activeServices >= 100) {
return {
success: false,
message:
"Too many servers are running! Please try again later or contact @ishaandey_ on Twitter/X.",
- };
+ }
}
const command = new CreateServiceCommand({
@@ -201,13 +201,13 @@ export async function startServer(
assignPublicIp: "ENABLED",
},
},
- });
+ })
try {
- const response = await ecsClient.send(command);
- console.log("started server:", response.service?.serviceName);
+ const response = await ecsClient.send(command)
+ console.log("started server:", response.service?.serviceName)
- return { success: true, message: "" };
+ return { success: true, message: "" }
// store in workers kv:
// {
@@ -223,6 +223,6 @@ export async function startServer(
return {
success: false,
message: `Error starting server: ${error.message}. Try again in a minute, or contact @ishaandey_ on Twitter/X if it still doesn't work.`,
- };
+ }
}
}
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index 137d45d..c56ff4b 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -1,22 +1,27 @@
-import { type ClassValue, clsx } from "clsx";
+import { type ClassValue, clsx } from "clsx"
// import { toast } from "sonner"
-import { twMerge } from "tailwind-merge";
-import { Sandbox, TFile, TFolder } from "./types";
-import { Service } from "@aws-sdk/client-ecs";
-import { describeService } from "./actions";
+import { twMerge } from "tailwind-merge"
+import { Sandbox, TFile, TFolder } from "./types"
+import { Service } from "@aws-sdk/client-ecs"
+import {
+ describeService,
+ doesServiceExist,
+ getTaskIp,
+ startServer,
+} from "./actions"
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
+ return twMerge(clsx(inputs))
}
export function processFileType(file: string) {
- const ending = file.split(".").pop();
+ const ending = file.split(".").pop()
- if (ending === "ts" || ending === "tsx") return "typescript";
- if (ending === "js" || ending === "jsx") return "javascript";
+ if (ending === "ts" || ending === "tsx") return "typescript"
+ if (ending === "js" || ending === "jsx") return "javascript"
- if (ending) return ending;
- return "plaintext";
+ if (ending) return ending
+ return "plaintext"
}
export function validateName(
@@ -25,7 +30,7 @@ export function validateName(
type: "file" | "folder"
) {
if (newName === oldName || newName.length === 0) {
- return { status: false, message: "" };
+ return { status: false, message: "" }
}
if (
newName.includes("/") ||
@@ -34,9 +39,9 @@ export function validateName(
(type === "file" && !newName.includes(".")) ||
(type === "folder" && newName.includes("."))
) {
- return { status: false, message: "Invalid file name." };
+ return { status: false, message: "Invalid file name." }
}
- return { status: true, message: "" };
+ return { status: true, message: "" }
}
export function addNew(
@@ -49,9 +54,9 @@ export function addNew(
setFiles((prev) => [
...prev,
{ id: `projects/${sandboxData.id}/${name}`, name, type: "file" },
- ]);
+ ])
} else {
- console.log("adding folder");
+ console.log("adding folder")
setFiles((prev) => [
...prev,
{
@@ -60,48 +65,92 @@ export function addNew(
type: "folder",
children: [],
},
- ]);
+ ])
}
}
export function checkServiceStatus(serviceName: string): Promise {
return new Promise((resolve, reject) => {
- let tries = 0;
+ let tries = 0
const interval = setInterval(async () => {
try {
- tries++;
+ tries++
if (tries > 40) {
- clearInterval(interval);
- reject(new Error("Timed out."));
+ clearInterval(interval)
+ reject(new Error("Timed out."))
}
- const response = await describeService(serviceName);
+ const response = await describeService(serviceName)
const activeServices = response.services?.filter(
(service) => service.status === "ACTIVE"
- );
- console.log("Checking activeServices status", activeServices);
+ )
+ console.log("Checking activeServices status", activeServices)
if (activeServices?.length === 1) {
- const service = activeServices?.[0];
+ const service = activeServices?.[0]
if (
service.runningCount === service.desiredCount &&
service.deployments?.length === 1
) {
if (service.deployments[0].rolloutState === "COMPLETED") {
- clearInterval(interval);
- resolve(service);
+ clearInterval(interval)
+ resolve(service)
} else if (service.deployments[0].rolloutState === "FAILED") {
- clearInterval(interval);
- reject(new Error("Deployment failed."));
+ clearInterval(interval)
+ reject(new Error("Deployment failed."))
}
}
}
} catch (error: any) {
- clearInterval(interval);
- reject(error);
+ clearInterval(interval)
+ reject(error)
}
- }, 3000);
- });
+ }, 3000)
+ })
+}
+
+export async function setupServer({
+ sandboxId,
+ setIsServiceRunning,
+ setIsDeploymentActive,
+ setTaskIp,
+ setDidFail,
+ toast,
+}: {
+ sandboxId: string
+ setIsServiceRunning: React.Dispatch>
+ setIsDeploymentActive: React.Dispatch>
+ setTaskIp: React.Dispatch>
+ setDidFail: React.Dispatch>
+ toast: any
+}) {
+ const doesExist = await doesServiceExist(sandboxId)
+
+ if (!doesExist) {
+ const response = await startServer(sandboxId)
+
+ if (!response.success) {
+ toast.error(response.message)
+ setDidFail(true)
+ return
+ }
+ }
+
+ setIsServiceRunning(true)
+
+ try {
+ if (!doesExist) {
+ await checkServiceStatus(sandboxId)
+ }
+
+ setIsDeploymentActive(true)
+
+ const taskIp = await getTaskIp(sandboxId)
+ setTaskIp(taskIp)
+ } catch (error) {
+ toast.error("An error occurred while initializing your server.")
+ setDidFail(true)
+ }
}