Stuff

3 files changed, 45 insertions, 14 deletions

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<APIResult<string, Error>>({ type: "not_yet_requested" })
+  const [result, setResult] = useState<SubmitResult>({ 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.
           </div>
         )
-      case "success":
+      case "success": {
+        const text = `Output:\n${result.data}`
         return (
           <AceEditor
             mode=""
             theme="github"
             onChange={() => 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 = <D, E>({ data, error }: SWRResponse<D, E>): APIResult<D, E>
   return { type: "success", data }
 }
 
-const postRequest = async <D, E>(path: string, body: any, opts?: any): Promise<APIResult<D, E>> => {
-  const url = `${API_URL}${path}`
+interface BasePostRequest<R> {
+  baseUrl: string
+  path: string
+  body: R
+}
+
+const postRequest = async <R, D, E>({ baseUrl, path, body }: BasePostRequest<R>, opts?: any): Promise<APIResult<D, E>> => {
+  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 <D, E>(path: string, body: any, opts?: any): Promise<A
 }
 
 export const useExamples = () => mapSWRResult<Example[], Error>(
-  useSWR("/examples", fetcher),
+  useSWR("/examples", fetcher(EXAMPLE_API_URL)),
 )
 
-export const submitSource = async (text: string) => postRequest<string, Error>(
-  "/submit",
-  text,
-)
+export type SubmitResult = APIResult<RunnerApiSubmitResponse.Body["result"], Error>
+
+export const submitSource = async (text: string): Promise<SubmitResult> => {
+  const apiResult = await postRequest<RunnerApiSubmitRequest.Body, RunnerApiSubmitResponse.Body, Error>(
+    {
+      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
+  }
+}