From fe81a7dba929669bc1e28bac1fe226f331ad83eb Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 18 Jan 2020 04:14:10 -0500
Subject: [PATCH 1/5] Added debounce util function

---
 functions/utils/debounce.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 functions/utils/debounce.js

diff --git a/functions/utils/debounce.js b/functions/utils/debounce.js
new file mode 100644
index 000000000..09acda07d
--- /dev/null
+++ b/functions/utils/debounce.js
@@ -0,0 +1,15 @@
+// Debounce is a higher order function which makes its enclosed function be executed
+// only if the function wasn't called again till 'delay' time has passed, this helps reduce impact of heavy working
+// functions which might be called frequently
+// NOTE : Don't use lambda functions as this doesn't get bound properly in them, use the 'function (args) {}' format
+const debounce = (func, delay) => {
+  let inDebounce
+  return function() {
+    const context = this
+    const args = arguments
+    clearTimeout(inDebounce)
+    inDebounce = setTimeout(() => func.apply(context, args), delay)
+  }
+}
+
+export default debounce;

From 82756a9c55184ee3cdb697063e8cda2c13a7de2b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 18 Jan 2020 04:14:30 -0500
Subject: [PATCH 2/5] Added GQL Query Editor component

---
 components/graphql/queryeditor.vue | 118 +++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 components/graphql/queryeditor.vue

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
new file mode 100644
index 000000000..f44044e0f
--- /dev/null
+++ b/components/graphql/queryeditor.vue
@@ -0,0 +1,118 @@
+<template>
+  <pre ref="editor"></pre>
+</template>
+
+<script>
+const DEFAULT_THEME = "twilight";
+
+import ace from "ace-builds";
+import * as gql from "graphql";
+
+import "ace-builds/webpack-resolver";
+import debounce from '../../functions/utils/debounce';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: String,
+      required: false
+    },
+    lang: {
+      type: String,
+      default: "json"
+    },
+    options: {
+      type: Object,
+      default: {}
+    }
+  },
+
+  data() {
+    return {
+      editor: null,
+      cacheValue: ""
+    };
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1);
+        this.cacheValue = value;
+      }
+    },
+    theme() {
+      this.editor.setTheme("ace/theme/" + this.defineTheme());
+    },
+    lang(value) {
+      this.editor.getSession().setMode("ace/mode/" + value);
+    },
+    options(value) {
+      this.editor.setOptions(value);
+    }
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      theme: "ace/theme/" + this.defineTheme(),
+      mode: "ace/mode/" + this.lang,
+      ...this.options
+    });
+
+    if (this.value) editor.setValue(this.value, 1);
+
+    this.editor = editor;
+    this.cacheValue = this.value;
+
+    editor.on("change", () => {
+      const content = editor.getValue();
+      this.$emit("input", content);
+      
+      this.parseContents(content)
+
+      this.cacheValue = content;
+    });
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme;
+      } else {
+        return (
+          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+        );
+      }
+    },
+
+    parseContents: debounce(function (content) {
+      try {
+        console.log(this.editor.session);
+        console.log(gql.parse(content));
+        console.log("Parse Success");
+      } catch (e) {
+        console.log(e);
+        console.log("Parse Failed");
+
+        this.editor.session.setAnnotations([{
+          row: e.locations[0].line - 1,
+          column: e.locations[0].column - 1,
+          text: e.message,
+          type: "error"
+        }]);
+        console.log("Annotated");
+        console.log(this.editor.session.getAnnotations());
+      }
+    }, 2000)
+  },
+
+  beforeDestroy() {
+    this.editor.destroy();
+    this.editor.container.remove();
+  }
+};
+</script>

From d8af767dc4a3eb10f512967837508c97bc1b74fe Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 18 Jan 2020 04:15:28 -0500
Subject: [PATCH 3/5] Updated graphql page to use QueryEditor for query field

---
 pages/graphql.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 05e14e940..0aee8d984 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -175,7 +175,8 @@
               </button>
             </div>
           </div>
-          <Editor
+          <QueryEditor
+            ref="queryEditor"
             v-model="gqlQueryString"
             :options="{
               maxLines: responseBodyMaxLines,
@@ -391,6 +392,7 @@ import axios from "axios";
 import * as gql from "graphql";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
 import AceEditor from "../components/ace-editor";
+import QueryEditor from "../components/graphql/queryeditor";
 import { sendNetworkRequest } from "../functions/network";
 
 export default {
@@ -402,7 +404,8 @@ export default {
     "gql-field": () => import("../components/graphql/field"),
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
-    Editor: AceEditor
+    Editor: AceEditor,
+    QueryEditor: QueryEditor
   },
   data() {
     return {
@@ -543,6 +546,7 @@ export default {
       responseBodyMaxLines: 16
     };
   },
+
   computed: {
     url: {
       get() {

From 0cec1b977a70e5c9dce0b3f11be9c16e8d4ee20a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 18 Jan 2020 04:42:50 -0500
Subject: [PATCH 4/5] QueryEditor parses query on mount

---
 components/graphql/queryeditor.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index f44044e0f..46c21048b 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -76,6 +76,8 @@ export default {
 
       this.cacheValue = content;
     });
+
+    this.parseContents(this.value);
   },
 
   methods: {

From b3dd2ebf3104a7e451ac34c8cca983f9ba3a31aa Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 18 Jan 2020 04:43:58 -0500
Subject: [PATCH 5/5] Removed GQL parse log

---
 components/graphql/queryeditor.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 46c21048b..23eb15a04 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -93,21 +93,14 @@ export default {
 
     parseContents: debounce(function (content) {
       try {
-        console.log(this.editor.session);
-        console.log(gql.parse(content));
-        console.log("Parse Success");
+        gql.parse(content);
       } catch (e) {
-        console.log(e);
-        console.log("Parse Failed");
-
         this.editor.session.setAnnotations([{
           row: e.locations[0].line - 1,
           column: e.locations[0].column - 1,
           text: e.message,
           type: "error"
         }]);
-        console.log("Annotated");
-        console.log(this.editor.session.getAnnotations());
       }
     }, 2000)
   },