From 7911d17b2f2d118b42d8c236a0b82b6034a98240 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 21 Jun 2020 17:14:20 -0400
Subject: [PATCH] Initial lens implementation

---
 components/lenses/ResponseBodyRenderer.vue    | 42 ++++++++++++++
 .../lenses/renderers/HTMLLensRenderer.vue     | 36 ++++++++++++
 .../lenses/renderers/ImageLensRenderer.vue    | 56 +++++++++++++++++++
 .../lenses/renderers/JSONLensRenderer.vue     | 45 +++++++++++++++
 .../lenses/renderers/RawLensRenderer.vue      | 36 ++++++++++++
 components/ui/ace-editor.vue                  |  1 +
 helpers/lenses/htmlLens.js                    |  7 +++
 helpers/lenses/imageLens.js                   | 12 ++++
 helpers/lenses/jsonLens.js                    |  7 +++
 helpers/lenses/lenses.js                      | 37 ++++++++++++
 helpers/lenses/rawLens.js                     |  7 +++
 helpers/strategies/AxiosStrategy.js           | 24 +-------
 pages/index.vue                               | 18 ++++--
 13 files changed, 301 insertions(+), 27 deletions(-)
 create mode 100644 components/lenses/ResponseBodyRenderer.vue
 create mode 100644 components/lenses/renderers/HTMLLensRenderer.vue
 create mode 100644 components/lenses/renderers/ImageLensRenderer.vue
 create mode 100644 components/lenses/renderers/JSONLensRenderer.vue
 create mode 100644 components/lenses/renderers/RawLensRenderer.vue
 create mode 100644 helpers/lenses/htmlLens.js
 create mode 100644 helpers/lenses/imageLens.js
 create mode 100644 helpers/lenses/jsonLens.js
 create mode 100644 helpers/lenses/lenses.js
 create mode 100644 helpers/lenses/rawLens.js

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
new file mode 100644
index 000000000..0b0fd05fa
--- /dev/null
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <tabs>
+      <tab
+        v-for="(lens, index) in validLenses"
+        :id="lens.lensName"
+        :key="lens.lensName"
+        :label="lens.lensName"
+        :selected="index === 0"
+      >
+        <component :is="lens.renderer" :response="response" />
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import getSuitableLenses from "../../helpers/lenses/lenses"
+
+export default {
+  components: {
+    // Lens Renderers
+    raw: () => import("../lenses/renderers/RawLensRenderer"),
+    json: () => import("../lenses/renderers/JSONLensRenderer"),
+    imageres: () => import("../lenses/renderers/ImageLensRenderer"),
+    htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
+
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
+  },
+
+  props: {
+    response: {},
+  },
+
+  computed: {
+    validLenses() {
+      return getSuitableLenses(this.response)
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
new file mode 100644
index 000000000..c311b0450
--- /dev/null
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
new file mode 100644
index 000000000..24f29bc1c
--- /dev/null
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -0,0 +1,56 @@
+<template>
+  <ul>
+    <li>
+      <img :src="imageSource" />
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      imageSource: "",
+    }
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler(newValue) {
+        console.log("wetch")
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          console.log(e.target.result)
+          this.imageSource = e.target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+
+  mounted() {
+    console.log("mount")
+    this.imageSource = ""
+
+    console.log(this.response)
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      console.log(e.target.result)
+      this.imageSource = e.target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+}
+</script>
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
new file mode 100644
index 000000000..96d6b61e5
--- /dev/null
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -0,0 +1,45 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'json'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      try {
+        return JSON.stringify(
+          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+          null,
+          2
+        )
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+      }
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
new file mode 100644
index 000000000..2e1c64c1e
--- /dev/null
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+    },
+  },
+}
+</script>
diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index ca77e09bc..10f147c84 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -76,6 +76,7 @@ export default {
       })
     },
     lang(value) {
+      console.log("ace/mode/" + value)
       this.editor.getSession().setMode("ace/mode/" + value)
     },
     options(value) {
diff --git a/helpers/lenses/htmlLens.js b/helpers/lenses/htmlLens.js
new file mode 100644
index 000000000..369efb614
--- /dev/null
+++ b/helpers/lenses/htmlLens.js
@@ -0,0 +1,7 @@
+const htmlLens = {
+  lensName: "HTML",
+  supportedContentTypes: ["text/html"],
+  renderer: "htmlres",
+}
+
+export default htmlLens
diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
new file mode 100644
index 000000000..93157b004
--- /dev/null
+++ b/helpers/lenses/imageLens.js
@@ -0,0 +1,12 @@
+const imageLens = {
+  lensName: "Image",
+  supportedContentTypes: [
+    "image/gif",
+    "image/jpeg",
+    "image/png",
+    // TODO : Add more image types!
+  ],
+  renderer: "imageres",
+}
+
+export default imageLens
diff --git a/helpers/lenses/jsonLens.js b/helpers/lenses/jsonLens.js
new file mode 100644
index 000000000..9ecb154fa
--- /dev/null
+++ b/helpers/lenses/jsonLens.js
@@ -0,0 +1,7 @@
+const jsonLens = {
+  lensName: "JSON",
+  supportedContentTypes: ["application/json", "application/hal+json", "application/vnd.api+json"],
+  renderer: "json",
+}
+
+export default jsonLens
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
new file mode 100644
index 000000000..0f07a0d6f
--- /dev/null
+++ b/helpers/lenses/lenses.js
@@ -0,0 +1,37 @@
+import jsonLens from "./jsonLens"
+import rawLens from "./rawLens"
+import imageLens from "./imageLens"
+import htmlLens from "./htmlLens"
+
+const lenses = [
+  jsonLens,
+  imageLens,
+  htmlLens,
+
+  // Keep Raw Lens as the last option
+  rawLens,
+]
+
+function getSuitableLenses(response) {
+  const result = []
+
+  if (response && response.headers && response.headers["content-type"]) {
+    const properContentType = response.headers["content-type"].split(";")[0]
+
+    for (const lens of lenses) {
+      if (
+        lens.supportedContentTypes === null ||
+        lens.supportedContentTypes.includes(properContentType)
+      ) {
+        result.push(lens)
+      }
+    }
+  } else {
+    // We don't know the content type, so lets just add rawLens
+    result.push(rawLens)
+  }
+
+  return result
+}
+
+export default getSuitableLenses
diff --git a/helpers/lenses/rawLens.js b/helpers/lenses/rawLens.js
new file mode 100644
index 000000000..8ccb35ba3
--- /dev/null
+++ b/helpers/lenses/rawLens.js
@@ -0,0 +1,7 @@
+const rawLens = {
+  lensName: "Raw",
+  supportedContentTypes: null,
+  renderer: "raw",
+}
+
+export default rawLens
diff --git a/helpers/strategies/AxiosStrategy.js b/helpers/strategies/AxiosStrategy.js
index 81361009f..738094f74 100644
--- a/helpers/strategies/AxiosStrategy.js
+++ b/helpers/strategies/AxiosStrategy.js
@@ -1,4 +1,5 @@
 import axios from "axios"
+import { isJSONContentType } from "../utils/contenttypes"
 
 let cancelSource = axios.CancelToken.source()
 
@@ -34,28 +35,9 @@ const axiosWithoutProxy = async (req, _store) => {
     const res = await axios({
       ...req,
       cancelToken: cancelSource.token,
-      transformResponse: [
-        (data, headers) => {
-          // If the response has a JSON content type, try parsing it
-          if (
-            headers["content-type"] &&
-            (headers["content-type"].startsWith("application/json") ||
-              headers["content-type"].startsWith("application/vnd.api+json") ||
-              headers["content-type"].startsWith("application/hal+json"))
-          ) {
-            try {
-              const jsonData = JSON.parse(data)
-              return jsonData
-            } catch (e) {
-              return data
-            }
-          }
-
-          // Else return the string itself without any transformations
-          return data
-        },
-      ],
+      responseType: "arraybuffer",
     })
+
     return res
   } catch (e) {
     if (axios.isCancel(e)) {
diff --git a/pages/index.vue b/pages/index.vue
index b2bc2fb6d..ff40d95c5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -952,6 +952,10 @@
               />
             </li>
           </ul>
+          <div v-if="response.body">
+            <response-renderer :response="response" />
+          </div>
+          <!--
           <ul v-if="response.body">
             <li>
               <div class="flex-wrap">
@@ -1023,6 +1027,7 @@
               </div>
             </li>
           </ul>
+          -->
           <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
             <li>
               <label :for="key">{{ key }}</label>
@@ -1420,12 +1425,13 @@ export default {
     collections: () => import("~/components/collections"),
     saveRequestAs: () => import("~/components/collections/saveRequestAs"),
     Editor: AceEditor,
-    environments: () => import("~/components/environments"),
-    inputform: () => import("~/components/firebase/inputform"),
-    notes: () => import("~/components/firebase/feeds"),
-    login: () => import("~/components/firebase/login"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
+    environments: () => import("../components/environments"),
+    inputform: () => import("../components/firebase/inputform"),
+    notes: () => import("../components/firebase/feeds"),
+    login: () => import("../components/firebase/login"),
+    tabs: () => import("../components/ui/tabs"),
+    tab: () => import("../components/ui/tab"),
+    "response-renderer": () => import("../components/lenses/ResponseBodyRenderer"),
   },
   data() {
     return {