chore: format frontend code
This commit is contained in:
Akhilesh Rangani
@ -1,34 +1,44 @@
|
||||
"use client"
|
||||
|
||||
import React, { createContext, useContext, useState, useRef } from 'react';
|
||||
import { ImperativePanelHandle } from "react-resizable-panels";
|
||||
import React, { createContext, useContext, useRef, useState } from "react"
|
||||
import { ImperativePanelHandle } from "react-resizable-panels"
|
||||
|
||||
interface PreviewContextType {
|
||||
isPreviewCollapsed: boolean;
|
||||
setIsPreviewCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
previewURL: string;
|
||||
setPreviewURL: React.Dispatch<React.SetStateAction<string>>;
|
||||
previewPanelRef: React.RefObject<ImperativePanelHandle>;
|
||||
isPreviewCollapsed: boolean
|
||||
setIsPreviewCollapsed: React.Dispatch<React.SetStateAction<boolean>>
|
||||
previewURL: string
|
||||
setPreviewURL: React.Dispatch<React.SetStateAction<string>>
|
||||
previewPanelRef: React.RefObject<ImperativePanelHandle>
|
||||
}
|
||||
|
||||
const PreviewContext = createContext<PreviewContextType | undefined>(undefined);
|
||||
const PreviewContext = createContext<PreviewContextType | undefined>(undefined)
|
||||
|
||||
export const PreviewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true);
|
||||
const [previewURL, setPreviewURL] = useState<string>("");
|
||||
const previewPanelRef = useRef<ImperativePanelHandle>(null);
|
||||
export const PreviewProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
|
||||
const [previewURL, setPreviewURL] = useState<string>("")
|
||||
const previewPanelRef = useRef<ImperativePanelHandle>(null)
|
||||
|
||||
return (
|
||||
<PreviewContext.Provider value={{ isPreviewCollapsed, setIsPreviewCollapsed, previewURL, setPreviewURL, previewPanelRef }}>
|
||||
<PreviewContext.Provider
|
||||
value={{
|
||||
isPreviewCollapsed,
|
||||
setIsPreviewCollapsed,
|
||||
previewURL,
|
||||
setPreviewURL,
|
||||
previewPanelRef,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</PreviewContext.Provider>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export const usePreview = () => {
|
||||
const context = useContext(PreviewContext);
|
||||
const context = useContext(PreviewContext)
|
||||
if (context === undefined) {
|
||||
throw new Error('usePreview must be used within a PreviewProvider');
|
||||
throw new Error("usePreview must be used within a PreviewProvider")
|
||||
}
|
||||
return context;
|
||||
};
|
||||
return context
|
||||
}
|
||||
|
||||
@ -1,63 +1,65 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import React, { createContext, useContext, useEffect, useState } from "react"
|
||||
import { io, Socket } from "socket.io-client"
|
||||
|
||||
interface SocketContextType {
|
||||
socket: Socket | null;
|
||||
setUserAndSandboxId: (userId: string, sandboxId: string) => void;
|
||||
socket: Socket | null
|
||||
setUserAndSandboxId: (userId: string, sandboxId: string) => void
|
||||
}
|
||||
|
||||
const SocketContext = createContext<SocketContextType | undefined>(undefined);
|
||||
const SocketContext = createContext<SocketContextType | undefined>(undefined)
|
||||
|
||||
export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [socket, setSocket] = useState<Socket | null>(null);
|
||||
const [userId, setUserId] = useState<string | null>(null);
|
||||
const [sandboxId, setSandboxId] = useState<string | null>(null);
|
||||
export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [socket, setSocket] = useState<Socket | null>(null)
|
||||
const [userId, setUserId] = useState<string | null>(null)
|
||||
const [sandboxId, setSandboxId] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (userId && sandboxId) {
|
||||
console.log("Initializing socket connection...");
|
||||
const newSocket = io(`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`);
|
||||
console.log("Socket instance:", newSocket);
|
||||
setSocket(newSocket);
|
||||
console.log("Initializing socket connection...")
|
||||
const newSocket = io(
|
||||
`${process.env.NEXT_PUBLIC_SERVER_URL}?userId=${userId}&sandboxId=${sandboxId}`
|
||||
)
|
||||
console.log("Socket instance:", newSocket)
|
||||
setSocket(newSocket)
|
||||
|
||||
newSocket.on('connect', () => {
|
||||
console.log("Socket connected:", newSocket.id);
|
||||
});
|
||||
newSocket.on("connect", () => {
|
||||
console.log("Socket connected:", newSocket.id)
|
||||
})
|
||||
|
||||
newSocket.on('disconnect', () => {
|
||||
console.log("Socket disconnected");
|
||||
});
|
||||
newSocket.on("disconnect", () => {
|
||||
console.log("Socket disconnected")
|
||||
})
|
||||
|
||||
return () => {
|
||||
console.log("Disconnecting socket...");
|
||||
newSocket.disconnect();
|
||||
};
|
||||
console.log("Disconnecting socket...")
|
||||
newSocket.disconnect()
|
||||
}
|
||||
}
|
||||
}, [userId, sandboxId]);
|
||||
}, [userId, sandboxId])
|
||||
|
||||
const setUserAndSandboxId = (newUserId: string, newSandboxId: string) => {
|
||||
setUserId(newUserId);
|
||||
setSandboxId(newSandboxId);
|
||||
};
|
||||
setUserId(newUserId)
|
||||
setSandboxId(newSandboxId)
|
||||
}
|
||||
|
||||
const value = {
|
||||
socket,
|
||||
setUserAndSandboxId,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={ value }>
|
||||
{children}
|
||||
</SocketContext.Provider>
|
||||
);
|
||||
};
|
||||
<SocketContext.Provider value={value}>{children}</SocketContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useSocket = (): SocketContextType => {
|
||||
const context = useContext(SocketContext);
|
||||
const context = useContext(SocketContext)
|
||||
if (!context) {
|
||||
throw new Error('useSocket must be used within a SocketProvider');
|
||||
throw new Error("useSocket must be used within a SocketProvider")
|
||||
}
|
||||
return context;
|
||||
};
|
||||
return context
|
||||
}
|
||||
|
||||
@ -1,33 +1,44 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import { Terminal } from '@xterm/xterm';
|
||||
import { createTerminal as createTerminalHelper, closeTerminal as closeTerminalHelper } from '@/lib/terminal';
|
||||
import { useSocket } from '@/context/SocketContext';
|
||||
import { useSocket } from "@/context/SocketContext"
|
||||
import {
|
||||
closeTerminal as closeTerminalHelper,
|
||||
createTerminal as createTerminalHelper,
|
||||
} from "@/lib/terminal"
|
||||
import { Terminal } from "@xterm/xterm"
|
||||
import React, { createContext, useContext, useState } from "react"
|
||||
|
||||
interface TerminalContextType {
|
||||
terminals: { id: string; terminal: Terminal | null }[];
|
||||
setTerminals: React.Dispatch<React.SetStateAction<{ id: string; terminal: Terminal | null }[]>>;
|
||||
activeTerminalId: string;
|
||||
setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>;
|
||||
creatingTerminal: boolean;
|
||||
setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
createNewTerminal: (command?: string) => Promise<void>;
|
||||
closeTerminal: (id: string) => void;
|
||||
deploy: (callback: () => void) => void;
|
||||
terminals: { id: string; terminal: Terminal | null }[]
|
||||
setTerminals: React.Dispatch<
|
||||
React.SetStateAction<{ id: string; terminal: Terminal | null }[]>
|
||||
>
|
||||
activeTerminalId: string
|
||||
setActiveTerminalId: React.Dispatch<React.SetStateAction<string>>
|
||||
creatingTerminal: boolean
|
||||
setCreatingTerminal: React.Dispatch<React.SetStateAction<boolean>>
|
||||
createNewTerminal: (command?: string) => Promise<void>
|
||||
closeTerminal: (id: string) => void
|
||||
deploy: (callback: () => void) => void
|
||||
}
|
||||
|
||||
const TerminalContext = createContext<TerminalContextType | undefined>(undefined);
|
||||
const TerminalContext = createContext<TerminalContextType | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { socket } = useSocket();
|
||||
const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
|
||||
const [activeTerminalId, setActiveTerminalId] = useState<string>('');
|
||||
const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false);
|
||||
export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const { socket } = useSocket()
|
||||
const [terminals, setTerminals] = useState<
|
||||
{ id: string; terminal: Terminal | null }[]
|
||||
>([])
|
||||
const [activeTerminalId, setActiveTerminalId] = useState<string>("")
|
||||
const [creatingTerminal, setCreatingTerminal] = useState<boolean>(false)
|
||||
|
||||
const createNewTerminal = async (command?: string): Promise<void> => {
|
||||
if (!socket) return;
|
||||
setCreatingTerminal(true);
|
||||
if (!socket) return
|
||||
setCreatingTerminal(true)
|
||||
try {
|
||||
createTerminalHelper({
|
||||
setTerminals,
|
||||
@ -35,36 +46,36 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
||||
setCreatingTerminal,
|
||||
command,
|
||||
socket,
|
||||
});
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Error creating terminal:", error);
|
||||
console.error("Error creating terminal:", error)
|
||||
} finally {
|
||||
setCreatingTerminal(false);
|
||||
setCreatingTerminal(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const closeTerminal = (id: string) => {
|
||||
if (!socket) return;
|
||||
const terminalToClose = terminals.find(term => term.id === id);
|
||||
if (!socket) return
|
||||
const terminalToClose = terminals.find((term) => term.id === id)
|
||||
if (terminalToClose) {
|
||||
closeTerminalHelper({
|
||||
term: terminalToClose,
|
||||
terminals,
|
||||
setTerminals,
|
||||
setActiveTerminalId,
|
||||
setClosingTerminal: () => {},
|
||||
setClosingTerminal: () => {},
|
||||
socket,
|
||||
activeTerminalId,
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const deploy = (callback: () => void) => {
|
||||
if (!socket) console.error("Couldn't deploy: No socket");
|
||||
if (!socket) console.error("Couldn't deploy: No socket")
|
||||
console.log("Deploying...")
|
||||
socket?.emit("deploy", () => {
|
||||
callback();
|
||||
});
|
||||
callback()
|
||||
})
|
||||
}
|
||||
|
||||
const value = {
|
||||
@ -76,20 +87,20 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
||||
setCreatingTerminal,
|
||||
createNewTerminal,
|
||||
closeTerminal,
|
||||
deploy
|
||||
};
|
||||
deploy,
|
||||
}
|
||||
|
||||
return (
|
||||
<TerminalContext.Provider value={value}>
|
||||
{children}
|
||||
</TerminalContext.Provider>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export const useTerminal = (): TerminalContextType => {
|
||||
const context = useContext(TerminalContext);
|
||||
const context = useContext(TerminalContext)
|
||||
if (!context) {
|
||||
throw new Error('useTerminal must be used within a TerminalProvider');
|
||||
throw new Error("useTerminal must be used within a TerminalProvider")
|
||||
}
|
||||
return context;
|
||||
};
|
||||
return context
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user