From eca1dc8e662491b0266029883493ea681b335256 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 19 Nov 2019 08:55:57 +0530
Subject: [PATCH] Moved Cocs section to right sidebar (will fix overflow issue
 later today) + Basic lint

---
 components/graphql/field.vue |  17 +++-
 components/graphql/type.vue  |   6 +-
 pages/graphql.vue            | 182 ++++++++++++++++++++++-------------
 3 files changed, 128 insertions(+), 77 deletions(-)

diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index 144b1dcd5..971c9eddb 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -36,12 +36,19 @@ export default {
   computed: {
     fieldString() {
       const args = (this.gqlField.args || []).reduce((acc, arg, index) => {
-        return acc + `${arg.name}: ${arg.type.toString()}${(index !== this.gqlField.args.length - 1) ? ", " : ''}`;
-      }, '');
-      const argsString = (args.length > 0) ? `(${args})` : '';
+        return (
+          acc +
+          `${arg.name}: ${arg.type.toString()}${
+            index !== this.gqlField.args.length - 1 ? ", " : ""
+          }`
+        );
+      }, "");
+      const argsString = args.length > 0 ? `(${args})` : "";
 
-      return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`;
+      return `${
+        this.gqlField.name
+      }${argsString}: ${this.gqlField.type.toString()}`;
     }
   }
-}
+};
 </script>
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 44c0ed74a..383267215 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="type-box">
-    <div class="type-title">{{gqlType.name}}</div>
+    <div class="type-title">{{ gqlType.name }}</div>
     <div class="type-desc" v-if="gqlType.description">
-      {{gqlType.description}}
+      {{ gqlType.description }}
     </div>
 
     <div v-if="gqlType.getFields">
@@ -43,5 +43,5 @@ export default {
   props: {
     gqlType: Object
   }
-}
+};
 </script>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 70a682ce1..9bddaa744 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,72 +1,104 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Endpoint" ref="endpoint">
-      <ul>
-        <li>
-          <label for="url">URL</label>
-          <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">
-            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"
-        :lang="'graphqlschema'"
-        :options="{
-          maxLines: '16',
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false
-        }"
-      />
-    </pw-section>
-    <pw-section class="purple" label="Docs" ref="docs">
-      <section>
+    <div class="content">
+      <div class="page-columns inner-left">
+        <pw-section class="blue" label="Endpoint" ref="endpoint">
+          <ul>
+            <li>
+              <label for="url">URL</label>
+              <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">
+                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"
+            :lang="'graphqlschema'"
+            :options="{
+              maxLines: '16',
+              minLines: '16',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              readOnly: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
+        </pw-section>
+      </div>
+      <aside class="sticky-inner inner-right">
+        <pw-section class="purple" label="Docs" ref="docs">
+          <section>
+            <input
+              v-if="queryFields.length > 0"
+              id="queries-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="queryFields.length > 0" for="queries-tab">Queries</label>
+            <div v-if="queryFields.length > 0" class="tab">
+              <div v-for="field in queryFields" :key="field.name">
+                <gql-field :gqlField="field" />
+              </div>
+            </div>
 
-        <input v-if="queryFields.length > 0" id="queries-tab" type="radio" name="side" checked="checked" />
-        <label v-if="queryFields.length > 0" for="queries-tab">Queries</label>
-        <div v-if="queryFields.length > 0" class="tab">
-          <div v-for="field in queryFields" :key="field.name">
-            <gql-field :gqlField="field" />
-          </div>
-        </div>
+            <input
+              v-if="mutationFields.length > 0"
+              id="mutations-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="mutationFields.length > 0" for="mutations-tab"
+              >Mutations</label
+            >
+            <div v-if="mutationFields.length > 0" class="tab">
+              <div v-for="field in mutationFields" :key="field.name">
+                <gql-field :gqlField="field" />
+              </div>
+            </div>
 
+            <input
+              v-if="subscriptionFields.length > 0"
+              id="subscriptions-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
+              >Subscriptions</label
+            >
+            <div v-if="subscriptionFields.length > 0" class="tab">
+              <div v-for="field in subscriptionFields" :key="field.name">
+                <gql-field :gqlField="field" />
+              </div>
+            </div>
 
-        <input v-if="mutationFields.length > 0" id="mutations-tab" type="radio" name="side" checked="checked" />
-        <label v-if="mutationFields.length > 0" for="mutations-tab">Mutations</label>
-        <div v-if="mutationFields.length > 0" class="tab">
-          <div v-for="field in mutationFields" :key="field.name">
-            <gql-field :gqlField="field" />
-          </div>
-        </div>
-
-        <input v-if="subscriptionFields.length > 0" id="subscriptions-tab" type="radio" name="side" checked="checked" />
-        <label v-if="subscriptionFields.length > 0" for="subscriptions-tab">Subscriptions</label>
-        <div v-if="subscriptionFields.length > 0" class="tab">
-          <div v-for="field in subscriptionFields" :key="field.name">
-            <gql-field :gqlField="field" />
-          </div>
-        </div>
-
-        <input v-if="gqlTypes.length > 0" id="gqltypes-tab" type="radio" name="side" checked="checked" />
-        <label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
-        <div v-if="gqlTypes.length > 0" class="tab">
-          <div v-for="type in gqlTypes" :key="type.name">
-            <gql-type :gqlType="type" />
-          </div>
-        </div>
-      </section>
-    </pw-section>
+            <input
+              v-if="gqlTypes.length > 0"
+              id="gqltypes-tab"
+              type="radio"
+              name="side"
+              checked="checked"
+            />
+            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
+            <div v-if="gqlTypes.length > 0" class="tab">
+              <div v-for="type in gqlTypes" :key="type.name">
+                <gql-type :gqlType="type" />
+              </div>
+            </div>
+          </section>
+        </pw-section>
+      </aside>
+    </div>
   </div>
 </template>
 
@@ -144,12 +176,24 @@ export default {
           const typeMap = schema.getTypeMap();
           const types = [];
 
-          const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : '';
-          const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : '';
-          const subscriptionTypeName = schema.getSubscriptionType() ? schema.getSubscriptionType().name : '';
+          const queryTypeName = schema.getQueryType()
+            ? schema.getQueryType().name
+            : "";
+          const mutationTypeName = schema.getMutationType()
+            ? schema.getMutationType().name
+            : "";
+          const subscriptionTypeName = schema.getSubscriptionType()
+            ? schema.getSubscriptionType().name
+            : "";
 
           for (const type in typeMap) {
-            if (!typeMap[type].name.startsWith("__") && !(([queryTypeName, mutationTypeName, subscriptionTypeName]).includes(typeMap[type].name)) && typeMap[type] instanceof gql.GraphQLObjectType) {
+            if (
+              !typeMap[type].name.startsWith("__") &&
+              ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
+                typeMap[type].name
+              ) &&
+              typeMap[type] instanceof gql.GraphQLObjectType
+            ) {
               types.push(typeMap[type]);
             }
           }
@@ -168,7 +212,7 @@ export default {
           this.$toast.error(error + " (F12 for details)", {
             icon: "error"
           });
-          console.log('Error', error);
+          console.log("Error", error);
         });
     }
   }