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 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'src/Editor.tsx')

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}>
-- 
cgit v1.3