chore: lint

components/graphql/Request.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
+    <div class="flex-1 inline-flex">
+      <input
+        id="url"
+        v-model="url"
+        v-focus
+        type="url"
+        spellcheck="false"
+        class="
+          bg-primaryLight
+          border border-divider
+          rounded-l
+          font-semibold font-mono
+          text-secondaryDark
+          w-full
+          py-2
+          px-4
+          transition
+          truncate
+          focus:(border-accent
+          outline-none)
+        "
+        :placeholder="$t('url')"
+        @keyup.enter="onConnectClick"
+      />
+      <ButtonPrimary
+        id="get"
+        name="get"
+        :label="!connected ? $t('connect') : $t('disconnect')"
+        class="rounded-l-none w-28"
+        @click.native="onConnectClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { getCurrentStrategyID } from "~/helpers/network"
+import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
+
+export default defineComponent({
+  props: {
+    conn: {
+      type: Object as PropType<GQLConnection>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const connected = useReadonlyStream(props.conn.connected$, false)
+    const headers = useReadonlyStream(gqlHeaders$, [])
+
+    const url = useStream(gqlURL$, "", setGQLURL)
+
+    const onConnectClick = () => {
+      if (!connected.value) {
+        props.conn.connect(url.value, headers.value as any)
+
+        logHoppRequestRunToAnalytics({
+          platform: "graphql-schema",
+          strategy: getCurrentStrategyID(),
+        })
+      } else {
+        props.conn.disconnect()
+      }
+    }
+
+    return {
+      url,
+      connected,
+      onConnectClick,
+    }
+  },
+})
+</script>