🎉 feat: response tab

src-tauri/src/main.rs

@@ -8,8 +8,10 @@ use tauri::{Menu, MenuItem, Submenu};
 mod command;
 
 fn main() {
-  let app = Menu::new().add_native_item(MenuItem::Hide)
-      .add_native_item(MenuItem::Quit);
+  let app = Menu::new()
+    .add_native_item(MenuItem::CloseWindow)
+    .add_native_item(MenuItem::Hide)
+    .add_native_item(MenuItem::Quit);
 
   let edit = Menu::new()
     .add_native_item(MenuItem::Undo)

src/App.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
     import page from './store/page'
+    import responsePage from './store/response-tab'
     import useDeriveSave from './store/deriveSave'
     import controller from './store/controller'
 
-    import Editor from './components/editor.svelte'
-    import Tab from './components/tab.svelte'
-    import Preview from './components/preview.svelte'
     import Controller from './components/controller.svelte'
+    import Tab from './components/tab.svelte'
     import SplitPane from './components/split-pane.svelte'
+
     import SubTab from './components/sub-tab.svelte'
+    import Editor from './components/editor.svelte'
     import HeaderEditor from './components/header-editor.svelte'
     import GqlVariableEditor from './components/variable-editor.svelte'
 
+    import Response from './components/response.svelte'
+    import ResponseTab from './components/response-tab.svelte'
+    import ResponseHeader from './components/response-header.svelte'
+    import ResponseStatus from './components/response-status.svelte'
+
     import './styles/tailwind.css'
 
     $: hideIfInvalid =
@@ -26,17 +32,26 @@
 
 <Tab />
 <Controller class={hideIfInvalid} />
-<SubTab class={hideIfInvalid} />
 
 <main class="flex">
     <SplitPane class={hideIfInvalid} minWidth={50}>
-        <main slot="left">
+        <main class="flex flex-col" slot="left">
+            <SubTab class={hideIfInvalid} />
             <Editor class={$page !== 'body' ? 'hidden' : ''} />
             <HeaderEditor class={$page !== 'headers' ? 'hidden' : ''} />
             <GqlVariableEditor
                 class={$page !== 'gql variables' ? 'hidden' : ''}
             />
         </main>
-        <Preview slot="right" />
+        <section class="flex flex-col" slot="right">
+            <ResponseTab />
+
+            <div class="relative flex flex-col w-full">
+                <ResponseStatus />
+
+                <Response class={$responsePage !== 'body' ? 'hidden' : ''} />
+                <ResponseHeader class={$responsePage !== 'headers' ? 'hidden' : ''} />
+            </div>
+        </section>
     </SplitPane>
 </main>

src/components/controller.svelte

@@ -8,7 +8,7 @@
     import fetchStorage from '../store/fetch'
     import type { Language, Method } from '../store/fetch'
     import { saveFetchStorage } from '../store/deriveSave'
-    import fetchResponse from '../store/response'
+    import fetchResponse, { defaultResponse } from '../store/response'
 
     import { trySerialize } from '../lib/json'
 
@@ -55,7 +55,7 @@
 
     const get = async () => {
         fetchResponse.update((v) => ({
-            ...v,
+            ...defaultResponse,
             error: !v.error?.startsWith('Lagrange Error: ') ? v.error : '',
             isLoading: true
         }))
@@ -65,11 +65,10 @@
         try {
             headers = JSON.parse($fetchStorage.headers || '{}')
         } catch (err) {
-            return fetchResponse.update((v) => ({
-                ...v,
-                error: 'Lagrange Error: Malform headers',
-                isLoading: false
-            }))
+            return fetchResponse.set({
+                ...defaultResponse,
+                error: 'Lagrange Error: Malform headers'
+            })
         }
 
         let options: FetchOptions = {
@@ -83,15 +82,13 @@
 
             if ($fetchStorage.language === 'graphql')
                 try {
-                    console.log('Var', $fetchStorage.variables)
                     variables = JSON.parse($fetchStorage.variables)
                 } catch (err) {
-                    console.log('Err')
-                    return fetchResponse.update((v) => ({
-                        ...v,
+                    return fetchResponse.set({
+                        ...defaultResponse,
                         error: 'Lagrange Error: Malform variables',
                         isLoading: false
-                    }))
+                    })
                 }
 
             const body =
@@ -112,17 +109,29 @@
         try {
             const response = await fetch(url, options)
 
-            const { data: value } = response
+            const { data: value, headers: responseHeaders, status } = response
 
             fetchResponse.set({
                 isLoading: false,
                 response: trySerialize(value as string),
-                error: null
+                error: null,
+                headers: responseHeaders,
+                status
             })
         } catch (error) {
+            if (
+                error
+                    ?.toString()
+                    .includes('failed to lookup address information')
+            )
+                return fetchResponse.set({
+                    ...defaultResponse,
+                    isLoading: false,
+                    error: 'Lagrange Error: Unable to resolve hostname'
+                })
+
             fetchResponse.set({
-                isLoading: false,
-                response: null,
+                ...defaultResponse,
                 error: error?.toString()
             })
         }

src/components/editor.svelte

@@ -42,24 +42,12 @@
         })
 
         editor.onKeyDown(
-            ({
-                browserEvent: {
-                    key,
-                    metaKey,
-                    stopPropagation
-                },
-            }) => {
+            ({ browserEvent: { key, metaKey, stopPropagation } }) => {
                 if (metaKey && key === 'Enter') {
                     const pos = editor.getPosition()
 
                     $fetchStorage.body = editor.getValue()
-
                     window.dispatchEvent(new CustomEvent('fetch-request'))
-
-                    requestAnimationFrame(() => {
-                        editor.setValue($fetchStorage.body)
-                        editor.setPosition(pos)
-                    })
                 }
             }
         )

src/components/header-editor.svelte

@@ -12,13 +12,13 @@
     }) => {
         updateEditor($fetchStorage.headers, 'json')
 
-        fetchStorage.subscribe(async ({ headers, language }) => {
+        fetchStorage.subscribe(async ({ headers }) => {
             if (!editor) return
             if (headers === prevHeaders) return
 
             prevHeaders = headers
 
-            updateEditor(headers, language)
+            updateEditor(headers, "json")
         })
 
         editor.onDidBlurEditorText(() => {
@@ -28,9 +28,15 @@
 
         editor.onKeyDown(({ browserEvent: { key, metaKey } }) => {
             if (metaKey && key === 'Enter') {
+                const pos = editor.getPosition()
+
                 $fetchStorage.headers = editor.getValue()
 
                 window.dispatchEvent(new CustomEvent('fetch-request'))
+
+                requestAnimationFrame(() => {
+                    editor.setPosition(pos)
+                })
             }
         })
     }

src/components/response-header.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import fetchResponse from '../store/response'
+
+    import editor from '../lib/editor'
+    import type { EditorConfig } from '../lib/editor'
+
+    let preview = ''
+
+    const onEditorReady: EditorConfig['handleCustomEvent'] = ({
+        detail: { updateEditor }
+    }) => {
+        fetchResponse.subscribe(({ status, headers }) => {
+            if (preview === headers) return
+
+            preview = JSON.stringify(headers, null, 2)
+            updateEditor(status && preview ? preview : '', 'json')
+        })
+    }
+</script>
+
+<div
+    use:editor={{ readOnly: true }}
+    on:editorReady={onEditorReady}
+    class={`w-full h-screen dark:text-white ${$$props.class}`}
+/>

src/components/response-status.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import fetchResponse from '../store/response'
+
+    let localError = ''
+
+    fetchResponse.subscribe(({ error }) => {
+        if (error && error.startsWith('Lagrange Error: '))
+            return (localError = error.replace('Lagrange Error: ', ''))
+
+        localError = ''
+    })
+</script>
+
+{#if localError}
+    <section
+        class="z-10 absolute top-0 left-0 flex flex-col justify-center items-center gap-2 w-full h-full bg-white dark:bg-gray-800 app-safe-area"
+    >
+        <img
+            class="w-36 h-36 object-contain object-center"
+            src="/red.gif"
+            alt="Griffon"
+        />
+        <h6 class="text-xl text-gray-600 dark:text-gray-200">{localError}</h6>
+        <p class="text-sm text-gray-400 dark:text-gray-500">
+            {#if localError.includes('Malform headers')}
+                Invalid JSON format in <button>Headers</button>
+            {:else if localError.includes('Malform variables')}
+                Invalid JSON format in <button>Variables</button>
+            {:else if localError === 'Unable to resolve hostname'}
+                Make sure you're connected to internet and pointing to the right URL
+            {/if}
+        </p>
+    </section>
+{/if}
+{#if $fetchResponse.isLoading}
+    <div
+        class="z-20 absolute top-0 left-0 flex flex-col justify-center items-center w-full h-full text-gray-900 dark:text-gray-300 app-safe-area bg-white dark:bg-gray-800"
+    >
+        <img
+            class="w-36 h-36 mb-4 object-contain object-center"
+            src="/a-chan.gif"
+            alt="Loading"
+        />
+        <h4 class="text-xl">Loading...</h4>
+    </div>
+{/if}