From 7a69293ba820b432ae117a2e10d943acdc627d8b Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Tue, 8 Feb 2022 00:00:16 +0200
Subject: Add better state management for submit source

---
 src/Editor.tsx | 18 +++++++++---------
 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}>
diff --git a/src/api.ts b/src/api.ts
index 226e213..be0c7a1 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -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
-- 
cgit v1.3