From 71779d560a1a60f954988d4908d5b6d203611a8f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 18 Nov 2019 19:55:54 +0530
Subject: [PATCH] :zap: Added loader, changed webSocket icon

---
 layouts/default.vue |  20 ++++++-
 pages/graphql.vue   |  62 +++++++++++---------
 pages/index.vue     | 139 +++++++++++++++++++++++++-------------------
 3 files changed, 132 insertions(+), 89 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 251587e37..b1bd0ff12 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -108,7 +108,7 @@
               :class="linkActive('/websocket')"
               v-tooltip.right="'WebSocket'"
             >
-              <i class="material-icons">cloud</i>
+              <i class="material-icons">settings_input_hdmi</i>
             </nuxt-link>
             <nuxt-link
               to="/graphql"
@@ -156,7 +156,23 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#response" v-tooltip.right="'Response'">
+                  <a href="#response" v-tooltip.right="'Communication'">
+                    <i class="material-icons">cloud_download</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div v-else-if="['/graphql'].includes($route.path)">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#endpoint" v-tooltip.right="'Endpoint'">
+                    <i class="material-icons">cloud_upload</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#schema" v-tooltip.right="'Schema'">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index c32f8b234..533b56c20 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -4,28 +4,20 @@
       <ul>
         <li>
           <label for="url">URL</label>
-          <input 
-            id="url"
-            type="url"
-            v-model="url"
-            @keyup.enter="getSchema()"
-          />
+          <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
         </li>
         <li>
           <label for="get" class="hide-on-small-screen">&nbsp;</label>
-          <button
-            id="get"
-            name="get"
-            @click="getSchema"
-          >
+          <button id="get" name="get" @click="getSchema">
             Get Schema
+            <span><i class="material-icons">send</i></span>
           </button>
         </li>
       </ul>
     </pw-section>
     <pw-section class="green" label="Schema" ref="schema">
-      <Editor 
-        :value="schemaString" 
+      <Editor
+        :value="schemaString"
         :lang="'graphqlschema'"
         :options="{
           maxLines: '16',
@@ -41,34 +33,48 @@
   </div>
 </template>
 
-<style>
-</style>
+<style></style>
 
 <script>
-import axios from 'axios';
-import * as gql from 'graphql';
-import AceEditor from '../components/ace-editor';
+import axios from "axios";
+import * as gql from "graphql";
+import AceEditor from "../components/ace-editor";
 
 export default {
   components: {
-    'pw-section': () => import('../components/section'),
+    "pw-section": () => import("../components/section"),
     Editor: AceEditor
   },
   data() {
     return {
       url: "https://rickandmortyapi.com/graphql",
-      schemaString: ''
-    }
+      schemaString: ""
+    };
   },
   methods: {
     getSchema() {
-      axios.post(this.url, {
-        query: gql.getIntrospectionQuery()
-      }).then((res) => {
-        const schema = gql.buildClientSchema(res.data.data);
-        this.schemaString = gql.printSchema(schema, { commentDescriptions: true });
-      });
+      const startTime = Date.now();
+
+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
+      this.$nuxt.$loading.start();
+
+      axios
+        .post(this.url, {
+          query: gql.getIntrospectionQuery()
+        })
+        .then(res => {
+          const schema = gql.buildClientSchema(res.data.data);
+          this.schemaString = gql.printSchema(schema, {
+            commentDescriptions: true
+          });
+          this.$nuxt.$loading.finish();
+          const duration = Date.now() - startTime;
+          this.$toast.info(`Finished in ${duration}ms`, {
+            icon: "done"
+          });
+        });
     }
   }
-}
+};
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 5e4367bf9..49861bb5a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -125,7 +125,8 @@
                 <div class="flex-wrap">
                   <span>
                     <pw-toggle :on="rawInput" @change="rawInput = $event"
-                      >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                      >Raw Input
+                      {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
                     >
                   </span>
                   <div>
@@ -247,7 +248,9 @@
                 id="code"
                 v-on:click="isHidden = !isHidden"
                 :disabled="!isValidURL"
-                v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
+                v-tooltip.bottom="{
+                  content: isHidden ? 'Show Code' : 'Hide Code'
+                }"
               >
                 <i class="material-icons">flash_on</i>
               </button>
@@ -314,7 +317,11 @@
           <div class="tab">
             <br />
 
-            <pw-section class="cyan" label="Authentication" ref="authentication">
+            <pw-section
+              class="cyan"
+              label="Authentication"
+              ref="authentication"
+            >
               <ul>
                 <li>
                   <div class="flex-wrap">
@@ -360,10 +367,14 @@
                       ref="switchVisibility"
                       @click="switchVisibility"
                     >
-                      <i class="material-icons" v-if="passwordFieldType === 'text'"
+                      <i
+                        class="material-icons"
+                        v-if="passwordFieldType === 'text'"
                         >visibility</i
                       >
-                      <i class="material-icons" v-if="passwordFieldType !== 'text'"
+                      <i
+                        class="material-icons"
+                        v-if="passwordFieldType !== 'text'"
                         >visibility_off</i
                       >
                     </button>
@@ -554,7 +565,12 @@
 
         <br />
 
-        <pw-section class="purple" id="response" label="Response" ref="response">
+        <pw-section
+          class="purple"
+          id="response"
+          label="Response"
+          ref="response"
+        >
           <ul>
             <li>
               <label for="status">status</label>
@@ -626,7 +642,9 @@
                 v-if="response.body && responseType === 'text/html'"
               >
                 <button class="icon" @click.prevent="togglePreview">
-                  <i class="material-icons" v-if="!previewEnabled">visibility</i>
+                  <i class="material-icons" v-if="!previewEnabled"
+                    >visibility</i
+                  >
                   <i class="material-icons" v-else>visibility_off</i>
                   <span>{{
                     previewEnabled ? "Hide Preview" : "Preview HTML"
@@ -643,7 +661,10 @@
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">History</label>
           <div class="tab">
-            <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+            <history
+              @useHistory="handleUseHistory"
+              ref="historyComponent"
+            ></history>
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">Collections</label>
@@ -701,59 +722,59 @@
       </pw-modal>
 
       <pw-modal v-if="!isHidden" @close="isHidden = true">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <h3 class="title">Generate code</h3>
-              <div>
-                <button class="icon" @click="isHidden = true">
-                  <i class="material-icons">close</i>
-                </button>
+        <div slot="header">
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <h3 class="title">Generate code</h3>
+                <div>
+                  <button class="icon" @click="isHidden = true">
+                    <i class="material-icons">close</i>
+                  </button>
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div slot="body">
-        <ul>
-          <li>
-            <label for="requestType">Request Type</label>
-            <select id="requestType" v-model="requestType">
-              <option>JavaScript XHR</option>
-              <option>Fetch</option>
-              <option>cURL</option>
-            </select>
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <label for="generatedCode">Generated Code</label>
-              <div>
-                <button
-                  class="icon"
-                  @click="copyRequestCode"
-                  id="copyRequestCode"
-                  ref="copyRequestCode"
-                  v-tooltip="'Copy code'"
-                >
-                  <i class="material-icons">file_copy</i>
-                </button>
+            </li>
+          </ul>
+        </div>
+        <div slot="body">
+          <ul>
+            <li>
+              <label for="requestType">Request Type</label>
+              <select id="requestType" v-model="requestType">
+                <option>JavaScript XHR</option>
+                <option>Fetch</option>
+                <option>cURL</option>
+              </select>
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="generatedCode">Generated Code</label>
+                <div>
+                  <button
+                    class="icon"
+                    @click="copyRequestCode"
+                    id="copyRequestCode"
+                    ref="copyRequestCode"
+                    v-tooltip="'Copy code'"
+                  >
+                    <i class="material-icons">file_copy</i>
+                  </button>
+                </div>
               </div>
-            </div>
-            <textarea
-              id="generatedCode"
-              ref="generatedCode"
-              name="generatedCode"
-              rows="8"
-              v-model="requestCode"
-            ></textarea>
-          </li>
-        </ul>
-      </div>
-      <div slot="footer"></div>
-    </pw-modal>
+              <textarea
+                id="generatedCode"
+                ref="generatedCode"
+                name="generatedCode"
+                rows="8"
+                v-model="requestCode"
+              ></textarea>
+            </li>
+          </ul>
+        </div>
+        <div slot="footer"></div>
+      </pw-modal>
     </div>
   </div>
 </template>