🎉 feat: form url encode type

SaltyAom · Dec 28, 2021 · 4845ba3 · 4845ba3
1 parent c21c827
commit 4845ba3
Show file tree

Hide file tree

Showing 18 changed files with 145 additions and 43 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -4,6 +4,8 @@
     import useDeriveSave from './store/deriveSave'
     import controller from './store/controller'
 
+    import Welcome from './components/welcome.svelte'
+
     import Controller from './components/controller.svelte'
     import Tab from './components/tab.svelte'
     import SplitPane from './components/split-pane.svelte'
@@ -33,7 +35,14 @@
 <Tab />
 <Controller class={hideIfInvalid} />
 
-<main class="flex">
+<Welcome
+    class={$controller.index < 0 ||
+    $controller.index > $controller.tabs.length - 1
+        ? ''
+        : 'hidden'}
+/>
+
+<main class="content-app flex">
     <SplitPane class={hideIfInvalid} minWidth={50}>
         <main class="flex flex-col" slot="left">
             <SubTab class={hideIfInvalid} />
@@ -50,7 +59,9 @@
                 <ResponseStatus />
 
                 <Response class={$responsePage !== 'body' ? 'hidden' : ''} />
-                <ResponseHeader class={$responsePage !== 'headers' ? 'hidden' : ''} />
+                <ResponseHeader
+                    class={$responsePage !== 'headers' ? 'hidden' : ''}
+                />
             </div>
         </section>
     </SplitPane>

diff --git a/src/components/controller.svelte b/src/components/controller.svelte
@@ -91,19 +91,33 @@
                     })
                 }
 
-            const body =
-                $fetchStorage.language === 'graphql'
-                    ? JSON.stringify({
-                          query: $fetchStorage.body
-                              .split('\n')
-                              .map((line) => line.split('#')[0])
-                              .join(''),
-                          variables
-                      })
-                    : JSON.stringify($fetchStorage.body)
-
-            options.body = Body.text(body)
-            options.headers['Content-Type'] = 'application/json'
+            try {
+                if ($fetchStorage.type === 'form') {
+                    options.body = Body.form(JSON.parse($fetchStorage.body))
+                    options.headers['Content-Type'] =
+                        'application/x-www-form-urlencoded'
+                } else {
+                    const body =
+                        $fetchStorage.language === 'graphql'
+                            ? {
+                                  query: $fetchStorage.body
+                                      .split('\n')
+                                      .map((line) => line.split('#')[0])
+                                      .join(''),
+                                  variables
+                              }
+                            : JSON.parse($fetchStorage.body)
+
+                    options.body = Body.json(body)
+                    options.headers['Content-Type'] = 'application/json'
+                }
+            } catch (err) {
+                return fetchResponse.set({
+                    ...defaultResponse,
+                    error: 'Lagrange Error: Malform Json body',
+                    isLoading: false
+                })
+            }
         }
 
         try {

diff --git a/src/components/editor.svelte b/src/components/editor.svelte
@@ -62,5 +62,5 @@
     use:editor
     on:editorReady={onEditorReady}
     on:editorDestroy={onEditorDestroy}
-    class={`w-full h-screen dark:text-white ${$$props.class}`}
+    class={`content-app w-full h-screen dark:text-white ${$$props.class}`}
 />
diff --git a/src/components/header-editor.svelte b/src/components/header-editor.svelte
@@ -50,5 +50,5 @@
     use:editor
     on:editorReady={onEditorReady}
     on:editorDestroy={onEditorDestroy}
-    class={`w-full h-screen dark:text-white ${$$props.class}`}
+    class={`content-app w-full h-screen dark:text-white ${$$props.class}`}
 />
diff --git a/src/components/response-header.svelte b/src/components/response-header.svelte
@@ -21,5 +21,5 @@
 <div
     use:editor={{ readOnly: true }}
     on:editorReady={onEditorReady}
-    class={`w-full h-screen dark:text-white ${$$props.class}`}
+    class={`content-app w-full h-screen dark:text-white ${$$props.class}`}
 />
diff --git a/src/components/response-status.svelte b/src/components/response-status.svelte
@@ -27,7 +27,10 @@
             {: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
+                Make sure you're connected to internet and pointing to the right
+                URL
+            {:else if localError === 'Malform Json body'}
+                Invalid JSON format in <button>Body</button>
             {/if}
         </p>
     </section>

diff --git a/src/components/response-tab.svelte b/src/components/response-tab.svelte
@@ -18,7 +18,7 @@
     const getColor = (status: number) => {
         let value = `${status}`
 
-        return colorMap[value[0]] || 'text-transparent'
+        return colorMap[value[0]] || '!text-transparent'
     }
 </script>
 

diff --git a/src/components/response.svelte b/src/components/response.svelte
@@ -26,5 +26,5 @@
 <div
     use:editor={{ readOnly: true }}
     on:editorReady={onEditorReady}
-    class={`w-full h-screen dark:text-white ${$$props.class}`}
+    class={`content-app w-full h-screen dark:text-white ${$$props.class}`}
 />
diff --git a/src/components/sub-tab.svelte b/src/components/sub-tab.svelte
@@ -1,17 +1,48 @@
 <script lang="ts">
-    import active, { pages } from '../store/page'
+    import fetchStorage from '../store/fetch'
+    import active, { pages, mapOptionWidth } from '../store/page'
     import type { Page } from '../store/page'
+    import { saveFetchStorage } from '../store/deriveSave'
+
+    import { ChevronDownIcon } from 'svelte-feather-icons'
 
     const setActiveTab = (tab: Page) => () => {
         active.set(tab)
     }
+
+    const saveOption = async () => {
+        await saveFetchStorage()
+    }
 </script>
 
 <aside
     class={`flex gap-1 text-sm w-full bg-white dark:bg-gray-800 h-[35px] px-2 pt-0.5 pb-1 border-b border-gray-200 dark:border-gray-700 ${
         $$props.class || ''
     }`}
 >
+    {#if $active === 'body'}
+        <div class="relative inline-flex items-center dark:text-gray-300">
+            <select
+                bind:value={$fetchStorage.type}
+                class="box-content appearance-none inline-flex items-center px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded capitalize whitespace-nowrap bg-transparent outline-none"
+                style={`width:${mapOptionWidth[$fetchStorage.type]}ch`}
+                on:change={saveOption}
+            >
+                <option>body</option>
+                <option>form</option>
+            </select>
+            <ChevronDownIcon
+                class="absolute w-4 h-4 right-1.5 pointer-events-none"
+            />
+        </div>
+    {:else}
+        <button
+            on:click={setActiveTab('body')}
+            class="inline-flex items-center px-2 py-1 text-gray-400 dark:text-gray-600 capitalize whitespace-nowrap"
+            >{$fetchStorage.type}
+        </button>
+    {/if}
+
     {#each pages as tab (tab)}
         {#if tab === $active}
             <button

diff --git a/src/components/tab.svelte b/src/components/tab.svelte
@@ -5,7 +5,7 @@
     import response, { defaultResponse } from '../store/response'
     import { movePersistedFile, saveFetchStorage } from '../store/deriveSave'
 
-    import { PlusIcon, XIcon } from 'svelte-feather-icons'
+    import { PlusIcon, XIcon, HomeIcon } from 'svelte-feather-icons'
 
     const newTab = () => {
         controller.update((v) => ({
@@ -103,6 +103,13 @@
     id="tab"
     class="flex items-center gap-2 w-full h-11 px-2 py-1.5 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 overflow-y-hidden"
 >
+    <button
+        on:click|preventDefault={setActiveTab(-1)}
+        class=" dark:text-white w-8 h-8 p-1.5 bg-white dark:bg-gray-700 rounded border dark:border-gray-700"
+    >
+        <HomeIcon />
+    </button>
+
     {#each $controller.tabs as tab, index (index)}
         {#if index === $controller.index}
             <div

diff --git a/src/components/variable-editor.svelte b/src/components/variable-editor.svelte
@@ -50,5 +50,5 @@
     use:editor
     on:editorReady={onEditorReady}
     on:editorDestroy={onEditorDestroy}
-    class={`w-full h-screen dark:text-white ${$$props.class}`}
+    class={`content-app w-full h-screen dark:text-white ${$$props.class}`}
 />
diff --git a/src/components/welcome.svelte b/src/components/welcome.svelte
@@ -0,0 +1,9 @@
+<main
+    id="welcome"
+    class={`flex flex-col justify-center items-center gap-2 w-full h-full ${$$props.class}`}
+>
+    <h1 class="text-2xl dark:text-gray-200 cursor-default">Lagrange</h1>
+    <p class="text-sm text-gray-600 dark:text-gray-400 cursor-default">
+        A simple API client for a simple task
+    </p>
+</main>
diff --git a/src/lib/editor.ts b/src/lib/editor.ts
@@ -31,18 +31,13 @@ const editor = (
     const updateEditor = (body: string, language = 'json') => {
         if (!editor) return
 
-        requestAnimationFrame(() => {
-            let position = editor.getPosition()
+        let position = editor.getPosition()
 
-            if (prevLanguage === language) editor.setValue(body)
-            else editor.setModel(Monaco.editor.createModel(body, language))
+        if (prevLanguage === language) editor.setValue(body)
+        else editor.setModel(Monaco.editor.createModel(body, language))
 
-            prevLanguage = language
-
-            requestAnimationFrame(() => {
-                editor.setPosition(position)
-            })
-        })
+        prevLanguage = language
+        editor.setPosition(position)
     }
 
     onMount(async () => {

diff --git a/src/store/controller.ts b/src/store/controller.ts
@@ -11,11 +11,7 @@ export interface Controller {
 
 export const defaultController: Controller = {
     index: 0,
-    tabs: [
-        {
-            label: 'New Tab'
-        }
-    ]
+    tabs: []
 }
 
 const controller = writable<Controller>(defaultController)

diff --git a/src/store/fetch.ts b/src/store/fetch.ts
@@ -10,6 +10,7 @@ export type Method =
     | 'CREATE'
 
 export type Language = 'json' | 'graphql' | 'text' | 'html'
+export type FetchType = 'body' | 'form'
 
 export interface FetchStorage {
     url: string
@@ -19,6 +20,7 @@ export interface FetchStorage {
     response: string
     headers: string
     variables: string
+    type: FetchType
 }
 
 export const defaultFetchStorage: FetchStorage = {
@@ -28,9 +30,12 @@ export const defaultFetchStorage: FetchStorage = {
     language: 'json',
     response: '',
     headers: '{}',
-    variables: '{}'
+    variables: '{}',
+    type: 'body'
 }
 
+export const typeOptions: FetchType[] = ['body', 'form']
+
 const fetchStorage = writable<FetchStorage>(defaultFetchStorage)
 
 export default fetchStorage
diff --git a/src/store/page.ts b/src/store/page.ts
@@ -1,8 +1,14 @@
 import { writable } from 'svelte/store'
+import type { FetchType } from './fetch'
 
 export type Page = 'body' | 'headers' | 'gql variables'
 
-export const pages: Page[] = ['body', 'headers', 'gql variables']
+export const pages: Page[] = ['headers', 'gql variables']
+
+export const mapOptionWidth: Record<FetchType, number> = {
+    body: 6,
+    form: 6
+}
 
 export const defaultPage: Page = 'body'
 

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -2,6 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: transparent;
+}
+
+input, textarea, .editor-scrollable *, #splitter * {
+    -webkit-user-select: all !important;
+    -moz-user-select: all !important;
+    -ms-user-select: all !important;
+    user-select: all !important; 
+}
+
+#welcome {
+    height: calc(100vh - 44px);
+    /* padding-bottom: 44px; */
+}
+
+.content-app {
+    height: calc(100vh - 124px);
+}
+
 .app-safe-area {
     padding-bottom: 124px;
-}
+}
diff --git a/vite.config.js b/vite.config.js
@@ -4,5 +4,5 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [svelte()],
-    clearScreen: true
+    clearScreen: false
 })