From 55df6b10013dc72bc2f8f46103eb984f0991431b Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Sun, 6 Feb 2022 22:49:23 +0200 Subject: Stuff --- src/Editor.module.css | 2 +- src/Editor.tsx | 12 ++++++++---- src/api.ts | 45 ++++++++++++++++++++++++++++++++++++--------- 3 files changed, 45 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/Editor.module.css b/src/Editor.module.css index e0bb076..5c0f626 100644 --- a/src/Editor.module.css +++ b/src/Editor.module.css @@ -1,5 +1,5 @@ .runButton { - margin-top: 10px; + margin: 10px 0; } .error { diff --git a/src/Editor.tsx b/src/Editor.tsx index afce380..2fff5b9 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 { useState } from "react" import styles from "./Editor.module.css" -import { APIResult, submitSource, useExamples } from "./api" +import { SubmitResult, submitSource, useExamples } from "./api" import Select from "react-select" const defaultSourceText = `define times2 @@ -17,7 +17,7 @@ const defaultSourceText = `define times2 const Editor = () => { const examples = useExamples() const [sourceText, setSourceText] = useState(defaultSourceText) - const [result, setResult] = useState>({ type: "not_yet_requested" }) + const [result, setResult] = useState({ type: "not_yet_requested" }) const onChange = setSourceText const executeCode = async (text: string) => { @@ -69,20 +69,24 @@ const Editor = () => { Failed to run code on the server. See console for details. ) - case "success": + case "success": { + const text = `Output:\n${result.data}` return ( undefined} - value={result.data} + value={text} name="results" editorProps={{ $blockScrolling: true }} width="100%" + minLines={10} + maxLines={10} fontSize={16} readOnly /> ) + } } } diff --git a/src/api.ts b/src/api.ts index 725f0d8..7ac283b 100644 --- a/src/api.ts +++ b/src/api.ts @@ -1,8 +1,10 @@ import useSWR, { SWRResponse } from "swr" +import { RunnerApiSubmitRequest, RunnerApiSubmitResponse } from "slam-types" -const API_URL = import.meta.env.VITE_API_URL +const RUNNER_API_URL = String(import.meta.env.VITE_RUNNER_API_URL) +const EXAMPLE_API_URL = String(import.meta.env.VITE_EXAMPLE_API_URL) -const fetcher = (path: string) => fetch(`${API_URL}${path}`) +const fetcher = (baseUrl: string) => (path: string) => fetch(`${baseUrl}${path}`) .then(res => res.json()) .catch((err) => { console.error(`An error occurred when fetching API path ${path}`) @@ -49,8 +51,14 @@ const mapSWRResult = ({ data, error }: SWRResponse): APIResult return { type: "success", data } } -const postRequest = async (path: string, body: any, opts?: any): Promise> => { - const url = `${API_URL}${path}` +interface BasePostRequest { + baseUrl: string + path: string + body: R +} + +const postRequest = async ({ baseUrl, path, body }: BasePostRequest, opts?: any): Promise> => { + const url = `${baseUrl}${path}` const body_ = typeof body === "string" ? body : JSON.stringify(body) try { const resp = await fetch(url, { method: "POST", body: body_, headers: { @@ -70,10 +78,29 @@ const postRequest = async (path: string, body: any, opts?: any): Promise mapSWRResult( - useSWR("/examples", fetcher), + useSWR("/examples", fetcher(EXAMPLE_API_URL)), ) -export const submitSource = async (text: string) => postRequest( - "/submit", - text, -) +export type SubmitResult = APIResult + +export const submitSource = async (text: string): Promise => { + const apiResult = await postRequest( + { + baseUrl: RUNNER_API_URL, + path: RunnerApiSubmitRequest.path, + body: { + source: text, + }, + }, + ) + + switch (apiResult.type) { + case "success": + return { type: "success", data: apiResult.data.result } + case "failed": + return { type: "failed", error: apiResult.error } + case "not_yet_requested": + case "loading": + return apiResult + } +} -- cgit v1.3