diff options
| -rw-r--r-- | src/Editor.tsx | 18 | ||||
| -rw-r--r-- | src/api.ts | 36 |
2 files changed, 44 insertions, 10 deletions
diff --git a/src/Editor.tsx b/src/Editor.tsx index 1d4b45a..8cf6901 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -3,7 +3,7 @@ import "ace-builds/src-noconflict/mode-java" import "ace-builds/src-noconflict/theme-github" import { useEffect, useState } from "react" import styles from "./Editor.module.css" -import { SubmitResult, submitSource, useExamples } from "./api" +import { useExamples, useSubmitSource } from "./api" import Select from "react-select" const defaultSourceText = `define times2 @@ -17,18 +17,13 @@ const defaultSourceText = `define times2 const Editor = () => { const examples = useExamples() const [sourceText, setSourceText] = useState(defaultSourceText) - const [result, setResult] = useState<SubmitResult>({ type: "not_yet_requested" }) + const { result, submitSource } = useSubmitSource() const [sourceDirty, setSourceDirty] = useState(false) const onChange = (text: string) => { setSourceText(text) setSourceDirty(true) } - const executeCode = async (text: string) => { - const result = await submitSource(text) - setResult(result) - } - const renderExamples = () => { switch (examples.type) { case "not_yet_requested": @@ -78,8 +73,13 @@ const Editor = () => { const renderResults = () => { switch (result.type) { case "not_yet_requested": - case "loading": return null + case "loading": + return ( + <div> + Running... + </div> + ) case "failed": return ( <div className={styles.error}> @@ -137,7 +137,7 @@ const Editor = () => { fontSize={16} /> </div> - <button id="run-button" className={styles.runButton} onClick={() => executeCode(sourceText)}> + <button id="run-button" className={styles.runButton} onClick={() => submitSource(sourceText)}> ▶️ Run code on server </button> <div id="results-editor" className={styles.results}> @@ -1,5 +1,6 @@ import useSWR, { SWRResponse } from "swr" import { RunnerApi, ExampleApi } from "slam-types" +import { useState } from "react" const RUNNER_API_URL = String(import.meta.env.VITE_RUNNER_API_URL) const EXAMPLE_API_URL = String(import.meta.env.VITE_EXAMPLE_API_URL) @@ -77,7 +78,7 @@ export const useExamples = () => mapSWRResult<ExampleApi.ListResponse.Body, Erro export type SubmitResult = APIResult<RunnerApi.SubmitResponse.Body["result"], Error> -export const submitSource = async (text: string): Promise<SubmitResult> => { +const postSource = async (text: string): Promise<SubmitResult> => { const apiResult = await postRequest<RunnerApi.SubmitRequest.Body, RunnerApi.SubmitResponse.Body, Error>( { baseUrl: RUNNER_API_URL, @@ -98,3 +99,36 @@ export const submitSource = async (text: string): Promise<SubmitResult> => { return apiResult } } + +export const useSubmitSource = () => { + const [result, setResult] = useState<SubmitResult>({ type: "not_yet_requested" }) + + const submitSource = async (text: string) => { + try { + setResult({ type: "loading" }) + const apiResult = await postRequest<RunnerApi.SubmitRequest.Body, RunnerApi.SubmitResponse.Body, Error>( + { + baseUrl: RUNNER_API_URL, + path: RunnerApi.SubmitRequest.path, + body: { + source: text, + }, + }, + ) + switch (apiResult.type) { + case "success": + setResult({ type: "success", data: apiResult.data.result }) + break + case "failed": + setResult({ type: "failed", error: apiResult.error }) + break + default: + break + } + } catch (err: any) { + setResult({ type: "failed", error: err }) + } + } + + return { result, submitSource } +}
\ No newline at end of file |