|
|
@ -45,10 +45,14 @@ export default function CodeEditor({
|
|
|
|
const { socket, setUserAndSandboxId } = useSocket();
|
|
|
|
const { socket, setUserAndSandboxId } = useSocket();
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
// Check if socket is null, and initialize it by setting userId and sandboxId
|
|
|
|
// Ensure userData.id and sandboxData.id are available before attempting to connect
|
|
|
|
if (!socket && userData.id && sandboxData.id) {
|
|
|
|
if (userData.id && sandboxData.id) {
|
|
|
|
|
|
|
|
// Check if the socket is not initialized or not connected
|
|
|
|
|
|
|
|
if (!socket || (socket && !socket.connected)) {
|
|
|
|
|
|
|
|
// Initialize socket connection
|
|
|
|
setUserAndSandboxId(userData.id, sandboxData.id);
|
|
|
|
setUserAndSandboxId(userData.id, sandboxData.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
|
|
|
|
}, [socket, userData.id, sandboxData.id, setUserAndSandboxId]);
|
|
|
|
|
|
|
|
|
|
|
|
//Preview Button state
|
|
|
|
//Preview Button state
|
|
|
@ -427,7 +431,7 @@ export default function CodeEditor({
|
|
|
|
return () => {
|
|
|
|
return () => {
|
|
|
|
socket?.disconnect()
|
|
|
|
socket?.disconnect()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
}, [socket])
|
|
|
|
|
|
|
|
|
|
|
|
// Socket event listener effect
|
|
|
|
// Socket event listener effect
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
@ -477,8 +481,7 @@ export default function CodeEditor({
|
|
|
|
socket?.off("disableAccess", onDisableAccess)
|
|
|
|
socket?.off("disableAccess", onDisableAccess)
|
|
|
|
socket?.off("previewURL", loadPreviewURL)
|
|
|
|
socket?.off("previewURL", loadPreviewURL)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// }, []);
|
|
|
|
}, [socket, terminals, setTerminals, setFiles, toast, setDisableAccess, isOwner, loadPreviewURL]);
|
|
|
|
}, [terminals])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Helper functions for tabs:
|
|
|
|
// Helper functions for tabs:
|
|
|
|
|
|
|
|
|
|
|
@ -488,14 +491,13 @@ export default function CodeEditor({
|
|
|
|
const fileCache = useRef(new Map());
|
|
|
|
const fileCache = useRef(new Map());
|
|
|
|
|
|
|
|
|
|
|
|
// Debounced function to get file content
|
|
|
|
// Debounced function to get file content
|
|
|
|
const debouncedGetFile = useCallback(
|
|
|
|
const debouncedGetFile =
|
|
|
|
debounce((tabId, callback) => {
|
|
|
|
(tabId: any, callback: any) => {
|
|
|
|
socket?.emit('getFile', tabId, callback);
|
|
|
|
socket?.emit('getFile', tabId, callback);
|
|
|
|
}, 300), // 300ms debounce delay, adjust as needed
|
|
|
|
} // 300ms debounce delay, adjust as needed
|
|
|
|
[]
|
|
|
|
|
|
|
|
);
|
|
|
|
const selectFile = (tab: TTab) => {
|
|
|
|
|
|
|
|
|
|
|
|
const selectFile = useCallback((tab: TTab) => {
|
|
|
|
|
|
|
|
if (tab.id === activeFileId) return;
|
|
|
|
if (tab.id === activeFileId) return;
|
|
|
|
|
|
|
|
|
|
|
|
setGenerate((prev) => ({ ...prev, show: false }));
|
|
|
|
setGenerate((prev) => ({ ...prev, show: false }));
|
|
|
@ -520,7 +522,7 @@ export default function CodeEditor({
|
|
|
|
|
|
|
|
|
|
|
|
setEditorLanguage(processFileType(tab.name));
|
|
|
|
setEditorLanguage(processFileType(tab.name));
|
|
|
|
setActiveFileId(tab.id);
|
|
|
|
setActiveFileId(tab.id);
|
|
|
|
}, [activeFileId, tabs, debouncedGetFile]);
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Close tab and remove from tabs
|
|
|
|
// Close tab and remove from tabs
|
|
|
|
const closeTab = (id: string) => {
|
|
|
|
const closeTab = (id: string) => {
|
|
|
|