From c70ecdc33045c3c5d676486da84a2ee0647ab1e5 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 15 Feb 2023 20:36:46 -0800
Subject: [PATCH] Iframe response viewer

---
 src/App.tsx    | 12 ++++++++++--
 src/Editor.css | 17 ++++++++++++++---
 src/Editor.tsx |  2 +-
 src/style.css  | 10 +++++++++-
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7557da80..3fc930d2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,10 +13,13 @@ interface Response {
 function App() {
     const [responseBody, setResponseBody] = useState<Response | null>(null);
     const [url, setUrl] = useState("");
+    const [loading, setLoading] = useState(false);
 
     async function sendRequest() {
+        setLoading(true);
         const body = await invoke("send_request", {url: url}) as Response;
         setResponseBody(body);
+        setLoading(false);
     }
 
     return (
@@ -33,7 +36,7 @@ function App() {
                     onChange={(e) => setUrl(e.currentTarget.value)}
                     placeholder="Enter a URL..."
                 />
-                <button type="submit">Send</button>
+                <button type="submit" disabled={loading}>{loading ? 'Sending...' : 'Send'}</button>
             </form>
             {responseBody !== null && (
                 <>
@@ -44,7 +47,12 @@ function App() {
                         &nbsp;&bull;&nbsp;
                         {responseBody?.elapsed2}ms
                     </div>
-                    <Editor value={responseBody?.body}/>
+                    <div className="row">
+                        <Editor value={responseBody?.body}/>
+                        <div className="iframe-wrapper">
+                            <iframe srcDoc={responseBody.body}/>
+                        </div>
+                    </div>
                 </>
             )}
         </div>
diff --git a/src/Editor.css b/src/Editor.css
index 020a6dfa..8129fc50 100644
--- a/src/Editor.css
+++ b/src/Editor.css
@@ -1,13 +1,24 @@
 .cm-editor {
-    height: 20rem;
     background-color: #000;
-    border-radius: 0.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     text-align: left;
-    width: 100%;
     font-size: 0.8rem;
+}
+
+.cm-editor, .iframe-wrapper {
     padding: 0.3rem 0.5rem;
+    width: 100%;
+    height: 30rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: 0.5rem;
 }
 
 .cm-editor.cm-focused {
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 202c3333..b909aaa0 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -8,6 +8,6 @@ interface Props {
 export default function Editor(props: Props) {
     const {ref} = useCodeMirror({value: props.value});
     return (
-        <div ref={ref} id="editor-yo" style={{height: '10rem'}}/>
+        <div ref={ref} id="editor-yo" />
     )
 }
diff --git a/src/style.css b/src/style.css
index 17f4c542..19afab9f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -49,7 +49,8 @@ div, form, p {
 }
 
 .row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   justify-content: center;
   width: 100%;
 }
@@ -84,6 +85,13 @@ button {
 
 button {
   cursor: pointer;
+  width: 7rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+button:disabled {
+  opacity: 0.7;
 }
 
 button:hover {