refactor: lint

2021-05-19 10:24:57 +05:30
parent 40ddfa8def
commit 44df9b3be8
20 changed files with 1080 additions and 690 deletions
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -6,17 +6,24 @@
        (
        <span v-for="(field, index) in fieldArgs" :key="index">
          {{ field.name }}:
-          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
          <span v-if="index !== fieldArgs.length - 1"> , </span>
        </span>
        ) </span
      >:
-      <GraphqlTypeLink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
+      <GraphqlTypeLink
+        :gql-type="gqlField.type"
+        :jump-type-callback="jumpTypeCallback"
+      />
    </div>
-    <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
+    <div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
      {{ gqlField.description }}
    </div>
    <div
+      v-if="gqlField.isDeprecated"
      class="
        inline-block
        px-4
@@ -29,7 +36,6 @@
        rounded-lg
        field-deprecated
      "
-      v-if="gqlField.isDeprecated"
    >
      {{ $t("deprecated") }}
    </div>
@@ -38,8 +44,14 @@
      <div class="px-4 border-l-2 border-acColor">
        <div v-for="(field, index) in fieldArgs" :key="index">
          {{ field.name }}:
-          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
-          <div class="mt-2 text-fgLightColor field-desc" v-if="field.description">
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
+          <div
+            v-if="field.description"
+            class="mt-2 text-fgLightColor field-desc"
+          >
            {{ field.description }}
          </div>
        </div>
@@ -48,18 +60,11 @@
  </div>
 </template>

-<style scoped lang="scss">
-.field-highlighted {
-  @apply border-b-2;
-  @apply border-acColor;
-}
-</style>
-
 <script>
 export default {
  props: {
-    gqlField: Object,
-    jumpTypeCallback: Function,
+    gqlField: { type: Object, default: () => {} },
+    jumpTypeCallback: { type: Function, default: () => {} },
    isHighlighted: { type: Boolean, default: false },
  },
  computed: {
@@ -73,3 +78,10 @@ export default {
  },
 }
 </script>
+
+<style scoped lang="scss">
+.field-highlighted {
+  @apply border-b-2;
+  @apply border-acColor;
+}
+</style>
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -4,27 +4,15 @@
  </div>
 </template>

-<style scoped lang="scss">
-.show-if-initialized {
-  &.initialized {
-    @apply opacity-100;
-  }
-
-  & > * {
-    @apply transition-none;
-  }
-}
-</style>
-
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
-import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"

 import * as gql from "graphql"
 import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
 import debounce from "~/helpers/utils/debounce"

 export default {
@@ -44,7 +32,7 @@ export default {
    },
    options: {
      type: Object,
-      default: {},
+      default: () => {},
    },
    styles: {
      type: String,
@@ -84,7 +72,7 @@ export default {
  mounted() {
    defineGQLLanguageMode(ace)

-    let langTools = ace.require("ace/ext/language_tools")
+    const langTools = ace.require("ace/ext/language_tools")

    const editor = ace.edit(this.$refs.editor, {
      mode: `ace/mode/gql-query`,
@@ -108,12 +96,22 @@ export default {
    })

    const completer = {
-      getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
+      getCompletions: (
+        editor,
+        _session,
+        { row, column },
+        _prefix,
+        callback
+      ) => {
        if (this.validationSchema) {
-          const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
-            line: row,
-            character: column,
-          })
+          const completions = getAutocompleteSuggestions(
+            this.validationSchema,
+            editor.getValue(),
+            {
+              line: row,
+              character: column,
+            }
+          )

          callback(
            null,
@@ -165,10 +163,14 @@ export default {
    this.parseContents(this.value)
  },

+  beforeDestroy() {
+    this.editor.destroy()
+  },
+
  methods: {
    prettifyQuery() {
      try {
-        this.value = gql.print(gql.parse(this.editor.getValue()))
+        this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
      } catch (e) {
        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
          icon: "error",
@@ -180,9 +182,12 @@ export default {
      if (this.theme) {
        return this.theme
      }
-      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      const strip = (str) =>
+        str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
      return strip(
-        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--editor-theme")
      )
    },

@@ -198,12 +203,14 @@ export default {

          if (this.validationSchema) {
            this.editor.session.setAnnotations(
-              gql.validate(this.validationSchema, doc).map(({ locations, message }) => ({
-                row: locations[0].line - 1,
-                column: locations[0].column - 1,
-                text: message,
-                type: "error",
-              }))
+              gql
+                .validate(this.validationSchema, doc)
+                .map(({ locations, message }) => ({
+                  row: locations[0].line - 1,
+                  column: locations[0].column - 1,
+                  text: message,
+                  type: "error",
+                }))
            )
          }
        } catch (e) {
@@ -221,9 +228,17 @@ export default {
      }
    }, 2000),
  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
 }
 </script>
+
+<style scoped lang="scss">
+.show-if-initialized {
+  &.initialized {
+    @apply opacity-100;
+  }
+
+  & > * {
+    @apply transition-none;
+  }
+}
+</style>
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -1,65 +1,79 @@
 <template>
  <div :id="`type_${gqlType.name}`" class="p-2 m-2">
-    <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+    <div
+      class="font-bold type-title"
+      :class="{ 'type-highlighted': isHighlighted }"
+    >
      <span v-if="isInput" class="font-normal text-acColor">input </span>
-      <span v-else-if="isInterface" class="font-normal text-acColor">interface </span>
+      <span v-else-if="isInterface" class="font-normal text-acColor"
+        >interface
+      </span>
      <span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
      {{ gqlType.name }}
    </div>
-    <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
+    <div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
      {{ gqlType.description }}
    </div>
    <div v-if="interfaces.length > 0" class="mb-2">
      <h5>{{ $t("interfaces") }}</h5>
-      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+      <div
+        v-for="gqlInterface in interfaces"
+        :key="gqlInterface.name"
+        class="m-2 ml-4"
+      >
+        <GraphqlTypeLink
+          :gql-type="gqlInterface"
+          :jump-type-callback="jumpTypeCallback"
+        />
      </div>
    </div>
    <div v-if="children.length > 0" class="mb-2">
      <h5>{{ $t("children") }}</h5>
      <div v-for="child in children" :key="child.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+        <GraphqlTypeLink
+          :gql-type="child"
+          :jump-type-callback="jumpTypeCallback"
+        />
      </div>
    </div>
    <div v-if="gqlType.getFields">
      <h5>{{ $t("fields") }}</h5>
      <div v-for="field in gqlType.getFields()" :key="field.name">
        <GraphqlField
-          :gqlField="field"
-          :isHighlighted="isFieldHighlighted({ field })"
-          :jumpTypeCallback="jumpTypeCallback"
+          :gql-field="field"
+          :is-highlighted="isFieldHighlighted({ field })"
+          :jump-type-callback="jumpTypeCallback"
        />
      </div>
    </div>
    <div v-if="isEnum">
      <h5>{{ $t("values") }}</h5>
-      <div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+      <div
+        v-for="value in gqlType.getValues()"
+        :key="value.name"
+        class="m-4"
+        v-text="value.name"
+      ></div>
    </div>
  </div>
 </template>

-<style scoped lang="scss">
-.type-highlighted {
-  @apply text-acColor;
-}
-</style>
-
 <script>
-import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+} from "graphql"

 export default {
  props: {
+    // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
    gqlType: {},
-    gqlTypes: Array,
-    jumpTypeCallback: Function,
+    gqlTypes: { type: Array, default: () => [] },
+    jumpTypeCallback: { type: Function, default: () => {} },
    isHighlighted: { type: Boolean, default: false },
    highlightedFields: { type: Array, default: () => [] },
  },
-  methods: {
-    isFieldHighlighted({ field }) {
-      return !!this.highlightedFields.find(({ name }) => name === field.name)
-    },
-  },
  computed: {
    isInput() {
      return this.gqlType instanceof GraphQLInputObjectType
@@ -75,9 +89,21 @@ export default {
    },
    children() {
      return this.gqlTypes.filter(
-        (type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+        (type) =>
+          type.getInterfaces && type.getInterfaces().includes(this.gqlType)
      )
    },
  },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(({ name }) => name === field.name)
+    },
+  },
 }
 </script>
+
+<style scoped lang="scss">
+.type-highlighted {
+  @apply text-acColor;
+}
+</style>