From a96d162f649704df5d9b567158366015cbe3172c Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Sat, 5 Feb 2022 16:48:16 +0200
Subject: Get basic stuff working

---
 src/Editor.tsx | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/Editor.tsx

(limited to 'src/Editor.tsx')

diff --git a/src/Editor.tsx b/src/Editor.tsx
new file mode 100644
index 0000000..d179b83
--- /dev/null
+++ b/src/Editor.tsx
@@ -0,0 +1,68 @@
+import AceEditor from "react-ace"
+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 } from "./api"
+
+const Editor = () => {
+  const [sourceText, setSourceText] = useState("")
+  const [result, setResult] = useState<APIResult<string, Error>>({ type: "not_yet_requested" })
+  const onChange = setSourceText
+
+  const executeCode = async (text: string) => {
+    const result = await submitSource(text)
+    setResult(result)
+  }
+
+  const renderResults = () => {
+    switch (result.type) {
+      case "not_yet_requested":
+      case "loading":
+        return null
+      case "failed":
+        return (
+          <div className={styles.error}>
+            Failed to run code on the server. See console for details.
+          </div>
+        )
+      case "success":
+        return (
+          <AceEditor
+            mode=""
+            theme="github"
+            onChange={() => undefined}
+            value={result.data}
+            name="results"
+            editorProps={{ $blockScrolling: true }}
+            width="100%"
+            fontSize={16}
+            readOnly
+          />
+        )
+    }
+  }
+
+  return (
+    <>
+      <AceEditor
+        mode=""
+        theme="github"
+        onChange={onChange}
+        value={sourceText}
+        name="editor"
+        editorProps={{ $blockScrolling: true }}
+        width="100%"
+        fontSize={16}
+      />
+      <button className={styles.runButton} onClick={() => executeCode(sourceText)}>
+        ▶️ Run code on server
+      </button>
+      <div className={styles.results}>
+        {renderResults()}
+      </div>
+    </>
+  )
+}
+
+export default Editor
-- 
cgit v1.3