Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

after code generation cancellation, leave the app in a good state (revert to last version or reset app if no last version)

Browse Source
This commit is contained in:
Abi Raja 2023-12-11 18:56:20 -05:00
parent 89c716f759
commit 9f064c57a7
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/App.tsx
View File

@ -130,10 +130,21 @@ function App() {
setIsImportedFromCode(false); setIsImportedFromCode(false);
}; };
const stop = () => { const cancelCodeGeneration = () => {
wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE); wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
// make sure stop can correct the state even if the websocket is already closed // make sure stop can correct the state even if the websocket is already closed
setAppState(AppState.CODE_READY); cancelCodeGenerationAndReset();
};
const cancelCodeGenerationAndReset = () => {
// When this is the first version, reset the entire app state
if (currentVersion === null) {
reset();
} else {
// Otherwise, revert to the last version
setGeneratedCode(appHistory[currentVersion].code);
setAppState(AppState.CODE_READY);
}
}; };
function doGenerateCode( function doGenerateCode(
@ -189,6 +200,11 @@ function App() {
} }
}, },
(line) => setExecutionConsole((prev) => [...prev, line]), (line) => setExecutionConsole((prev) => [...prev, line]),
// On cancel
() => {
cancelCodeGenerationAndReset();
},
// On complete
() => { () => {
setAppState(AppState.CODE_READY); setAppState(AppState.CODE_READY);
} }
@ -343,10 +359,10 @@ function App() {
</div> </div>
<div className="flex mt-4 w-full"> <div className="flex mt-4 w-full">
<Button <Button
onClick={stop} onClick={cancelCodeGeneration}
className="w-full dark:text-white dark:bg-gray-700" className="w-full dark:text-white dark:bg-gray-700"
> >
Stop Cancel
</Button> </Button>
</div> </div>
<CodePreview code={generatedCode} /> <CodePreview code={generatedCode} />

10
frontend/src/generateCode.ts
View File

@ -6,7 +6,7 @@ import { FullGenerationSettings } from "./types";
const ERROR_MESSAGE = const ERROR_MESSAGE =
"Error generating code. Check the Developer Console AND the backend logs for details. Feel free to open a Github issue."; "Error generating code. Check the Developer Console AND the backend logs for details. Feel free to open a Github issue.";
const STOP_MESSAGE = "Code generation stopped"; const CANCEL_MESSAGE = "Code generation cancelled";
export function generateCode( export function generateCode(
wsRef: React.MutableRefObject<WebSocket | null>, wsRef: React.MutableRefObject<WebSocket | null>,
@ -14,6 +14,7 @@ export function generateCode(
onChange: (chunk: string) => void, onChange: (chunk: string) => void,
onSetCode: (code: string) => void, onSetCode: (code: string) => void,
onStatusUpdate: (status: string) => void, onStatusUpdate: (status: string) => void,
onCancel: () => void,
onComplete: () => void onComplete: () => void
) { ) {
const wsUrl = `${WS_BACKEND_URL}/generate-code`; const wsUrl = `${WS_BACKEND_URL}/generate-code`;
@ -39,15 +40,18 @@ export function generateCode(
toast.error(response.value); toast.error(response.value);
} }
}); });
ws.addEventListener("close", (event) => { ws.addEventListener("close", (event) => {
console.log("Connection closed", event.code, event.reason); console.log("Connection closed", event.code, event.reason);
if (event.code === USER_CLOSE_WEB_SOCKET_CODE) { if (event.code === USER_CLOSE_WEB_SOCKET_CODE) {
toast.success(STOP_MESSAGE); toast.success(CANCEL_MESSAGE);
onCancel();
} else if (event.code !== 1000) { } else if (event.code !== 1000) {
console.error("WebSocket error code", event); console.error("WebSocket error code", event);
toast.error(ERROR_MESSAGE); toast.error(ERROR_MESSAGE);
} else {
onComplete();
} }
onComplete();
}); });
ws.addEventListener("error", (error) => { ws.addEventListener("error", (error) => {