hoppscotch/pages/index.vue

<template>
  <!-- eslint-disable -->
  <div>
    <Splitpanes :dbl-click-splitter="false" vertical>
      <Pane class="hide-scrollbar !overflow-auto">
        <Splitpanes :dbl-click-splitter="false" horizontal>
          <Pane class="hide-scrollbar !overflow-auto">
            <HttpRequest />
            <SmartTabs styles="sticky top-16 z-10">
              <SmartTab
                :id="'params'"
                :label="$t('parameters')"
                :selected="true"
                :info="newActiveParamsCount$"
              >
                <HttpParameters />
              </SmartTab>

              <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
                <HttpBody />
              </SmartTab>

              <SmartTab
                :id="'headers'"
                :label="$t('headers')"
                :info="newActiveHeadersCount$"
              >
                <HttpHeaders />
              </SmartTab>

              <SmartTab :id="'authentication'" :label="$t('authentication')">
                <!-- TODO: Implement -->
              </SmartTab>

              <SmartTab
                :id="'pre_request_script'"
                :label="$t('pre_request_script')"
              >
                <HttpPreRequestScript />
              </SmartTab>

              <SmartTab :id="'tests'" :label="$t('tests')">
                <HttpTests />
              </SmartTab>
            </SmartTabs>
          </Pane>
          <Pane class="hide-scrollbar !overflow-auto">
            <HttpResponse ref="response" />
          </Pane>
        </Splitpanes>
      </Pane>
      <Pane
        v-if="RIGHT_SIDEBAR"
        max-size="35"
        size="25"
        min-size="20"
        class="hide-scrollbar !overflow-auto"
      >
        <aside>
          <SmartTabs styles="sticky z-10 top-0">
            <SmartTab :id="'history'" :label="$t('history')" :selected="true">
              <History :page="'rest'" ref="historyComponent" />
            </SmartTab>

            <SmartTab :id="'collections'" :label="$t('collections')">
              <Collections />
            </SmartTab>

            <SmartTab :id="'env'" :label="$t('environments')">
              <Environments />
            </SmartTab>
          </SmartTabs>
        </aside>
      </Pane>
    </Splitpanes>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  useContext,
  watch,
} from "@nuxtjs/composition-api"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"

import { map } from "rxjs/operators"
import { useSetting } from "~/newstore/settings"
import {
  restRequest$,
  restActiveParamsCount$,
  restActiveHeadersCount$,
  getRESTRequest,
  setRESTRequest,
  setRESTHeaders,
  setRESTParams,
  updateRESTMethod,
  setRESTEndpoint,
} from "~/newstore/RESTSession"
import {
  useReadonlyStream,
  useStream,
  useStreamSubscriber,
} from "~/helpers/utils/composables"

function bindRequestToURLParams() {
  const {
    route,
    app: { router },
  } = useContext()

  const request = useStream(restRequest$, getRESTRequest(), setRESTRequest)

  // Process headers and params to proper values
  const headers = computed(() => {
    const filtered = request.value.headers.filter((x) => x.key !== "")

    return filtered.length > 0 ? JSON.stringify(filtered) : null
  })

  const params = computed(() => {
    const filtered = request.value.params.filter((x) => x.key !== "")
    return filtered.length > 0 ? JSON.stringify(filtered) : null
  })

  // Combine them together to a cleaner value
  const urlParams = computed(() => ({
    v: request.value.v,
    method: request.value.method,
    endpoint: request.value.endpoint,
    headers: headers.value,
    params: params.value,
  }))

  // Watch and update accordingly
  watch(urlParams, () => {
    history.replaceState(
      window.location.href,
      "",
      `${router!.options.base}?${encodeURI(
        Object.entries(urlParams.value)
          .filter((x) => x[1] !== null)
          .map((x) => `${x[0]}=${x[1]!}`)
          .join("&")
      )}`
    )
  })

  // Now, we have to see the initial URL param and set that as the request
  onMounted(() => {
    const query = route.value.query
    if (query.headers && typeof query.headers === "string")
      setRESTHeaders(JSON.parse(query.headers))
    if (query.params && typeof query.params === "string")
      setRESTParams(JSON.parse(query.params))
    if (query.method && typeof query.method === "string")
      updateRESTMethod(query.method)
    if (query.endpoint && typeof query.endpoint === "string")
      setRESTEndpoint(query.endpoint)
  })
}

export default defineComponent({
  components: { Splitpanes, Pane },
  setup() {
    const { subscribeToStream } = useStreamSubscriber()

    bindRequestToURLParams()

    subscribeToStream(restRequest$, (x) => {
      console.log(x)
    })

    return {
      newActiveParamsCount$: useReadonlyStream(
        restActiveParamsCount$.pipe(
          map((e) => {
            if (e === 0) return null
            return e.toString()
          })
        ),
        null
      ),
      newActiveHeadersCount$: useReadonlyStream(
        restActiveHeadersCount$.pipe(
          map((e) => {
            if (e === 0) return null
            return e.toString()
          })
        ),
        null
      ),
      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
      SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
      PROXY_ENABLED: useSetting("PROXY_ENABLED"),
      URL_EXCLUDES: useSetting("URL_EXCLUDES"),
      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
    }
  },
})
</script>