diff --git a/client/src/App.css b/client/src/App.css index 10c92bd..38e0009 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,5 +1,4 @@ .container { - max-width: 500px; margin: auto; padding: 1rem; letter-spacing: 0.25rem; @@ -23,12 +22,13 @@ .enter:before { content: '\21b5'; + display: inline-block; } .enter:after { content: ''; display: block; - clear: both; + clear: right; } .tab:before { diff --git a/client/src/App.jsx b/client/src/App.jsx index eb5321b..8386901 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,35 +2,57 @@ import { useEffect, useState } from 'react'; import './App.css'; const KEYS_TO_DISABLE = ['Backspace', 'Shift', 'Alt', 'Control', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Escape', 'Delete', 'PageDown', 'PageUp', 'Home', 'End', 'Insert', 'WakeUp', 'Pause', 'ScrollLock', 'ContextMenu', 'BrowserForward', 'BrowserBack', 'CapsLock', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; -const SNIPPET = 'ctx := context.Background();\nconsole.log("hello");\nfunction() {\n\talert(123);\n}'; function App() { + const [code, setCode] = useState(''); + const [loaded, setLoaded] = useState(false); const [characters, setCharacters] = useState([]); + useEffect(() => { + (async function() { + const response = await fetch('http://localhost:5000/generate?lang=golang&lines=10'); + const reader = response.body.getReader(); + const decoder = new TextDecoder(); + + while(true) { + const {value, done} = await reader.read(); + + setCode(prev => prev + decoder.decode(value)); + + if (done) { + setLoaded(true); + break; + } + } + })(); + }, []); + useEffect(() => { function handleKeyPress(event) { event.preventDefault(); - if (characters.length === SNIPPET.length) return; + if (!loaded) return; + if (characters.length === code.length) return; if (KEYS_TO_DISABLE.includes(event.key)) return; - if (SNIPPET[characters.length] === '\n') + if (code[characters.length] === '\n') return setCharacters( characters.concat(event.key === 'Enter') ); - if (SNIPPET[characters.length] === '\t') + if (code[characters.length] === '\t') return setCharacters( characters.concat(event.key === 'Tab') ); setCharacters( - characters.concat(event.key === SNIPPET[characters.length]) + characters.concat(event.key === code[characters.length]) ); } window.addEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress); - }, [characters]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [loaded, characters]); function renderCharacterClassName(index) { if (index === characters.length) return 'highlight' @@ -40,16 +62,22 @@ function App() { return 'correct' } + // TODO: Remove rendering of spacing characters and render a cursor with the highlight instead. + // TODO: Or look into pretty printing libraries. function renderSpacingCharacter(char) { - if (/^\t$/.test(char)) return 'tab' if (/^\n$/.test(char)) return 'enter' + if (/^\t$/.test(char)) return 'tab' if (/^\s$/.test(char)) return 'space' return '' } - return