diff --git a/app/[code]/page.tsx b/app/[code]/page.tsx index 4cea035..89f36b1 100644 --- a/app/[code]/page.tsx +++ b/app/[code]/page.tsx @@ -5,143 +5,104 @@ import Link from 'next/link'; import { useSearchParams } from 'next/navigation'; import { io } from 'socket.io-client'; import debounce from 'lodash.debounce'; +import LZString from 'lz-string'; const socket = io('https://codenow-server.onrender.com'); -// const socket = io(process.env.SOCKET_URL); const ShareCodePage: React.FC = () => { const searchParams = useSearchParams(); - const initialCode = searchParams.get('code') || ''; - const [sharedCode, setSharedCode] = useState(initialCode); + const initialCode = LZString.decompressFromEncodedURIComponent(searchParams.get('code') || '') || ''; + const [sharedCode, setSharedCode] = useState(initialCode); const [toastMessage, setToastMessage] = useState(null); const textareaRef = useRef(null); useEffect(() => { - if (initialCode) { - setSharedCode(initialCode); - } + if (initialCode) setSharedCode(initialCode); - socket.on('codeUpdate', (newCode: string) => { - console.log('Received code update:', newCode); - setSharedCode(newCode); - }); + const handleCodeUpdate = (newCode: string) => setSharedCode(newCode); + const handleMessage = (message: string) => console.log(message); - socket.on('message', (message: string) => { - console.log(message); - }); + socket.on('codeUpdate', handleCodeUpdate); + socket.on('message', handleMessage); return () => { - socket.off('codeUpdate'); - socket.off('message'); + socket.off('codeUpdate', handleCodeUpdate); + socket.off('message', handleMessage); }; }, [initialCode]); + const showToast = (message: string) => { + setToastMessage(message); + setTimeout(() => setToastMessage(null), 3000); + }; + const handleCopy = () => { navigator.clipboard.writeText(sharedCode); - setToastMessage("The code has been copied to your clipboard."); - setTimeout(() => setToastMessage(null), 3000); + showToast("The code has been copied to your clipboard."); }; const handleShare = () => { - const url = `${window.location.origin}${window.location.pathname}?code=${encodeURIComponent(sharedCode)}`; - navigator.clipboard.writeText(url); - setToastMessage("The shareable link has been copied to your clipboard."); - setTimeout(() => setToastMessage(null), 3000); + const compressedCode = LZString.compressToEncodedURIComponent(sharedCode); + navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}?code=${compressedCode}`); + showToast("The shareable link has been copied to your clipboard."); }; - // Debounced function to emit codeChange with URL - const debouncedEmitCodeChange = useRef( - debounce((newCode) => { - const url = window.location.href; // Capture the current URL - console.log('Emitting Code Change:', { newCode, url }); // Debugging line - socket.emit('codeChange', { newCode, url }); // Emit both the new code and the URL - localStorage.setItem('sharedCode', newCode); - }, 500) - ).current; + const debouncedEmitCodeChange = useRef(debounce((newCode: string) => { + socket.emit('codeChange', { newCode, url: window.location.href }); + localStorage.setItem('sharedCode', newCode); + }, 500)).current; const handleTextareaChange = (e: React.ChangeEvent) => { const newCode = e.target.value; - console.log('New Code:', newCode); // Debugging line setSharedCode(newCode); debouncedEmitCodeChange(newCode); }; - const calculateLineNumbers = () => { - if (textareaRef.current) { - const lineCount = textareaRef.current.value.split('\n').length; - return Array.from({ length: lineCount }, (_, i) => i + 1); - } - return []; - }; - - const lines = calculateLineNumbers(); + const lines = textareaRef.current ? Array.from({ length: textareaRef.current.value.split('\n').length }, (_, i) => i + 1) : []; return (
-
- - - CodeNow - - - - - - CodeNow - -
- +
+ + + CodeNow + + + + + + CodeNow + +
-
-
-

Shared Code

-
+
+

Shared Code

-
- -
-
+
{lines.map((lineNumber) => ( -
- {lineNumber} -
+
{lineNumber}
))}