From 1e6773deb5be3dd625d6efefed914736f6bdd5ae Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 11 Dec 2020 05:59:29 +0530
Subject: [PATCH] Refactor: Modularize home page (#1372)

* Move HTTP headers section to component

* Move import cURL modal to component

* Move Notes, OAuth token modal to seperate components

* Fix deepcode analysis

* Move parameters section to seperate component

* Move codegen modal to component

* ES6
---
 assets/js/regex.worker.js                     |  10 +-
 .../collections/import-export-collections.vue |   8 +-
 components/collections/save-request-as.vue    |   1 -
 .../import-export-environment.vue             |   8 +-
 components/http/codegen-modal.vue             | 118 ++++
 components/http/http-headers.vue              | 101 +++
 components/http/http-parameters.vue           | 108 ++++
 components/http/import-curl.vue               |  54 ++
 components/http/notes.vue                     |  30 +
 components/http/token-list.vue                |  95 +++
 components/realtime/mqtt.vue                  |   8 +-
 components/realtime/socketio.vue              |   4 +-
 components/realtime/sse.vue                   |   4 +-
 components/realtime/websocket.vue             |   4 +-
 helpers/postwomanTesting.js                   |   4 +-
 lang/en-US.json                               |   1 -
 nuxt.config.js                                |   6 +-
 pages/doc.vue                                 |   4 +-
 pages/index.vue                               | 592 ++++--------------
 19 files changed, 660 insertions(+), 500 deletions(-)
 create mode 100644 components/http/codegen-modal.vue
 create mode 100644 components/http/http-headers.vue
 create mode 100644 components/http/http-parameters.vue
 create mode 100644 components/http/import-curl.vue
 create mode 100644 components/http/notes.vue
 create mode 100644 components/http/token-list.vue

diff --git a/assets/js/regex.worker.js b/assets/js/regex.worker.js
index c6f69036a..ab1024653 100644
--- a/assets/js/regex.worker.js
+++ b/assets/js/regex.worker.js
@@ -16,16 +16,14 @@ const regex = { ws, sse, socketio }
 
 // type = ws/sse/socketio
 async function validator(type, url) {
-  console.time("validator " + url)
+  console.time(`validator ${url}`)
   const [res1, res2] = await Promise.all([regex[type][0].test(url), regex[type][1].test(url)])
-  console.timeEnd("validator " + url)
+  console.timeEnd(`validator ${url}`)
   return res1 || res2
 }
 
-onmessage = async function (event) {
-  var { type, url } = event.data
-
+onmessage = async ({ data }) => {
+  const { type, url } = data
   const result = await validator(type, url)
-
   postMessage({ type, url, result })
 }
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index 10e924f34..4eee1af0d 100644
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -149,11 +149,11 @@ export default {
             },
           }
         )
-        .then((response) => {
+        .then(({ html_url }) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(response.html_url)
+          window.open(html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
             Accept: "application/vnd.github.v3+json",
           },
         })
-        .then((response) => {
-          let collections = JSON.parse(Object.values(response.files)[0].content)
+        .then(({ files }) => {
+          let collections = JSON.parse(Object.values(files)[0].content)
           this.$store.commit("postwoman/replaceCollections", collections)
           this.fileImported()
           this.syncToFBCollections()
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index 300800879..3b48abc84 100644
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -188,7 +188,6 @@ export default {
     },
     hideModal() {
       this.$emit("hide-modal")
-      this.$emit("hide-model") // for backward compatibility  // TODO: use fixed event
     },
   },
 }
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index a88ac0de7..fcf9262c0 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -149,11 +149,11 @@ export default {
             },
           }
         )
-        .then((response) => {
+        .then(({ html_url }) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(response.html_url)
+          window.open(html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
             Accept: "application/vnd.github.v3+json",
           },
         })
-        .then((response) => {
-          let environments = JSON.parse(Object.values(response.files)[0].content)
+        .then(({ files }) => {
+          let environments = JSON.parse(Object.values(files)[0].content)
           this.$store.commit("postwoman/replaceEnvironments", environments)
           this.fileImported()
           this.syncToFBEnvironments()
diff --git a/components/http/codegen-modal.vue b/components/http/codegen-modal.vue
new file mode 100644
index 000000000..af5301275
--- /dev/null
+++ b/components/http/codegen-modal.vue
@@ -0,0 +1,118 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("generate_code") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <label for="requestType">{{ $t("request_type") }}</label>
+          <span class="select-wrapper">
+            <v-popover>
+              <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
+              <input
+                v-else
+                id="requestType"
+                v-model="requestType"
+                :placeholder="$t('choose_language')"
+                class="cursor-pointer"
+                readonly
+                autofocus
+              />
+              <template slot="popover">
+                <div v-for="gen in codegens" :key="gen.id">
+                  <button class="icon" @click="requestType = gen.id" v-close-popover>
+                    {{ gen.name }}
+                  </button>
+                </div>
+              </template>
+            </v-popover>
+          </span>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <label for="generatedCode">{{ $t("generated_code") }}</label>
+            <div>
+              <button
+                class="icon"
+                @click="copyRequestCode"
+                id="copyRequestCode"
+                ref="copyRequestCode"
+                v-tooltip="$t('copy_code')"
+              >
+                <i class="material-icons">content_copy</i>
+              </button>
+            </div>
+          </div>
+          <textarea
+            id="generatedCode"
+            ref="generatedCode"
+            name="generatedCode"
+            rows="8"
+            v-model="requestCode"
+            readonly
+          ></textarea>
+        </li>
+      </ul>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { codegens } from "~/helpers/codegen/codegen"
+
+export default {
+  props: {
+    show: Boolean,
+    requestCode: String,
+    requestTypeProp: { type: String, default: "" },
+  },
+  data() {
+    return {
+      codegens,
+      copyButton: '<i class="material-icons">content_copy</i>',
+      doneButton: '<i class="material-icons">done</i>',
+    }
+  },
+  computed: {
+    requestType: {
+      get() {
+        return this.requestTypeProp
+      },
+      set(val) {
+        this.$emit("set-request-type", val)
+      },
+    },
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    handleImport() {
+      this.$emit("handle-import")
+    },
+    copyRequestCode() {
+      this.$refs.copyRequestCode.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      this.$refs.generatedCode.select()
+      document.execCommand("copy")
+      setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>
diff --git a/components/http/http-headers.vue b/components/http/http-headers.vue
new file mode 100644
index 000000000..060332a25
--- /dev/null
+++ b/components/http/http-headers.vue
@@ -0,0 +1,101 @@
+<template>
+  <pw-section class="orange" label="Headers" ref="headers">
+    <ul v-if="headers.length !== 0">
+      <li>
+        <div class="row-wrapper">
+          <label for="headerList">{{ $t("header_list") }}</label>
+          <div>
+            <button
+              class="icon"
+              @click="clearContent('headers', $event)"
+              v-tooltip.bottom="$t('clear')"
+            >
+              <i class="material-icons">clear_all</i>
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
+      <li>
+        <autocomplete
+          :placeholder="$t('header_count', { count: index + 1 })"
+          :source="commonHeaders"
+          :spellcheck="false"
+          :value="header.key"
+          @input="
+            $store.commit('setKeyHeader', {
+              index,
+              value: $event,
+            })
+          "
+          @keyup.prevent="setRouteQueryState"
+          autofocus
+        />
+      </li>
+      <li>
+        <input
+          :placeholder="$t('value_count', { count: index + 1 })"
+          :name="'value' + index"
+          :value="header.value"
+          @change="
+            $store.commit('setValueHeader', {
+              index,
+              value: $event.target.value,
+            })
+          "
+          @keyup.prevent="setRouteQueryState"
+        />
+      </li>
+      <div>
+        <li>
+          <button
+            class="icon"
+            @click="removeRequestHeader(index)"
+            v-tooltip.bottom="$t('delete')"
+            id="header"
+          >
+            <i class="material-icons">delete</i>
+          </button>
+        </li>
+      </div>
+    </ul>
+    <ul>
+      <li>
+        <button class="icon" @click="addRequestHeader">
+          <i class="material-icons">add</i>
+          <span>{{ $t("add_new") }}</span>
+        </button>
+      </li>
+    </ul>
+  </pw-section>
+</template>
+
+<script>
+import { commonHeaders } from "~/helpers/headers"
+
+export default {
+  props: {
+    headers: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      commonHeaders,
+    }
+  },
+  methods: {
+    clearContent(headers, $event) {
+      this.$emit("clear-content", headers, $event)
+    },
+    setRouteQueryState() {
+      this.$emit("set-route-query-state")
+    },
+    removeRequestHeader(index) {
+      this.$emit("remove-request-header", index)
+    },
+    addRequestHeader() {
+      this.$emit("add-request-header")
+    },
+  },
+}
+</script>
diff --git a/components/http/http-parameters.vue b/components/http/http-parameters.vue
new file mode 100644
index 000000000..be50f4a70
--- /dev/null
+++ b/components/http/http-parameters.vue
@@ -0,0 +1,108 @@
+<template>
+  <pw-section class="pink" label="Parameters" ref="parameters">
+    <ul v-if="params.length !== 0">
+      <li>
+        <div class="row-wrapper">
+          <label for="paramList">{{ $t("parameter_list") }}</label>
+          <div>
+            <button
+              class="icon"
+              @click="clearContent('parameters', $event)"
+              v-tooltip.bottom="$t('clear')"
+            >
+              <i class="material-icons">clear_all</i>
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <ul v-for="(param, index) in params" :key="index">
+      <li>
+        <input
+          :placeholder="$t('parameter_count', { count: index + 1 })"
+          :name="'param' + index"
+          :value="param.key"
+          @change="
+            $store.commit('setKeyParams', {
+              index,
+              value: $event.target.value,
+            })
+          "
+          autofocus
+        />
+      </li>
+      <li>
+        <input
+          :placeholder="$t('value_count', { count: index + 1 })"
+          :name="'value' + index"
+          :value="decodeURI(param.value)"
+          @change="
+            $store.commit('setValueParams', {
+              index,
+              value: $event.target.value,
+            })
+          "
+        />
+      </li>
+      <li>
+        <span class="select-wrapper">
+          <select
+            :name="'type' + index"
+            @change="
+              $store.commit('setTypeParams', {
+                index,
+                value: $event.target.value,
+              })
+            "
+          >
+            <option value="query" :selected="param.type === 'query'">
+              {{ $t("query") }}
+            </option>
+            <option value="path" :selected="param.type === 'path'">
+              {{ $t("path") }}
+            </option>
+          </select>
+        </span>
+      </li>
+      <div>
+        <li>
+          <button
+            class="icon"
+            @click="removeRequestParam(index)"
+            v-tooltip.bottom="$t('delete')"
+            id="param"
+          >
+            <i class="material-icons">delete</i>
+          </button>
+        </li>
+      </div>
+    </ul>
+    <ul>
+      <li>
+        <button class="icon" @click="addRequestParam">
+          <i class="material-icons">add</i>
+          <span>{{ $t("add_new") }}</span>
+        </button>
+      </li>
+    </ul>
+  </pw-section>
+</template>
+
+<script>
+export default {
+  props: {
+    params: { type: Array, default: () => [] },
+  },
+  methods: {
+    clearContent(parameters, $event) {
+      this.$emit("clear-content", parameters, $event)
+    },
+    removeRequestParam(index) {
+      this.$emit("remove-request-param", index)
+    },
+    addRequestParam() {
+      this.$emit("add-request-param")
+    },
+  },
+}
+</script>
diff --git a/components/http/import-curl.vue b/components/http/import-curl.vue
new file mode 100644
index 000000000..6a7227fb3
--- /dev/null
+++ b/components/http/import-curl.vue
@@ -0,0 +1,54 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("import_curl") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="handleImport">
+            {{ $t("import") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    handleImport() {
+      this.$emit("handle-import")
+    },
+  },
+}
+</script>
diff --git a/components/http/notes.vue b/components/http/notes.vue
new file mode 100644
index 000000000..d83c43114
--- /dev/null
+++ b/components/http/notes.vue
@@ -0,0 +1,30 @@
+<template>
+  <pw-section class="pink" :label="$t('notes')" ref="sync">
+    <div v-if="fb.currentUser">
+      <inputform />
+      <feeds />
+    </div>
+    <div v-else>
+      <ul>
+        <li>
+          <label>{{ $t("login_first") }}</label>
+          <p>
+            <login />
+          </p>
+        </li>
+      </ul>
+    </div>
+  </pw-section>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  data() {
+    return {
+      fb,
+    }
+  },
+}
+</script>
diff --git a/components/http/token-list.vue b/components/http/token-list.vue
new file mode 100644
index 000000000..b8bdea37b
--- /dev/null
+++ b/components/http/token-list.vue
@@ -0,0 +1,95 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <h3 class="title">{{ $t("manage_token") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <label for="token-list">{{ $t("token_list") }}</label>
+            <div v-if="tokens.length != 0">
+              <button
+                class="icon"
+                @click="clearContent('tokens', $event)"
+                v-tooltip.bottom="$t('clear')"
+              >
+                <i class="material-icons">clear_all</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+      <ul id="token-list" v-for="(token, index) in tokens" :key="index">
+        <li>
+          <input
+            :placeholder="'name ' + (index + 1)"
+            :value="token.name"
+            @change="
+              $store.commit('setOAuthTokenName', {
+                index,
+                value: $event.target.value,
+              })
+            "
+          />
+        </li>
+        <li>
+          <input :value="token.value" readonly />
+        </li>
+        <div class="row-wrapper">
+          <li>
+            <button
+              class="icon"
+              @click="useOAuthToken(token.value)"
+              v-tooltip.bottom="$t('use_token')"
+            >
+              <i class="material-icons">input</i>
+            </button>
+          </li>
+          <li>
+            <button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <p v-if="tokens.length === 0" class="info">
+        {{ $t("empty") }}
+      </p>
+    </div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+    tokens: { type: Array, default: () => [] },
+  },
+  methods: {
+    clearContent(tokens, $event) {
+      this.$emit("clear-content", tokens, $event)
+    },
+    useOAuthToken(token) {
+      this.$emit("use-oauth-token", token)
+    },
+    removeOAuthToken(index) {
+      this.$emit("remove-oauth-token", index)
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
index dfd14ae64..fbf3e9ea3 100644
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -116,8 +116,8 @@ export default {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "ws", url: this.url })
     }, 1000),
-    workerResponseHandler(message) {
-      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    workerResponseHandler({ data }) {
+      if (data.url === this.url) this.isUrlValid = data.result
     },
     connect() {
       this.log = [
@@ -163,9 +163,9 @@ export default {
         icon: "sync",
       })
     },
-    onMessageArrived(message) {
+    onMessageArrived({ payloadString, destinationName }) {
       this.log.push({
-        payload: `Message: ${message.payloadString} arrived on topic: ${message.destinationName}`,
+        payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
         source: "info",
         color: "var(--ac-color)",
         ts: new Date().toLocaleTimeString(),
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index eafd3b558..5dd8891fb 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -147,8 +147,8 @@ export default {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "socketio", url: this.url })
     }, 1000),
-    workerResponseHandler(message) {
-      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    workerResponseHandler({ data }) {
+      if (data.url === this.url) this.isUrlValid = data.result
     },
     removeCommunicationInput({ index }) {
       this.$delete(this.communication.inputs, index)
diff --git a/components/realtime/sse.vue b/components/realtime/sse.vue
index e2a3e661d..788618d06 100644
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -78,8 +78,8 @@ export default {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "sse", url: this.server })
     }, 1000),
-    workerResponseHandler(message) {
-      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    workerResponseHandler({ data }) {
+      if (data.url === this.url) this.isUrlValid = data.result
     },
     toggleSSEConnection() {
       // If it is connecting:
diff --git a/components/realtime/websocket.vue b/components/realtime/websocket.vue
index 570233b3b..ba00dd0e8 100644
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -105,8 +105,8 @@ export default {
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "ws", url: this.url })
     }, 1000),
-    workerResponseHandler(message) {
-      if (message.data.url === this.url) this.isUrlValid = message.data.result
+    workerResponseHandler({ data }) {
+      if (data.url === this.url) this.isUrlValid = data.result
     },
     toggleConnection() {
       // If it is connecting:
diff --git a/helpers/postwomanTesting.js b/helpers/postwomanTesting.js
index d21247a78..b53b19276 100644
--- a/helpers/postwomanTesting.js
+++ b/helpers/postwomanTesting.js
@@ -157,7 +157,7 @@ class Expectation {
   toBeType(expectedType) {
     const actualType = typeof this.expectValue
     if (
-      [
+      ![
         "string",
         "boolean",
         "number",
@@ -166,7 +166,7 @@ class Expectation {
         "bigint",
         "symbol",
         "function",
-      ].indexOf(expectedType) < 0
+      ].includes(expectedType)
     ) {
       return this._fail(
         this._fmtNot(
diff --git a/lang/en-US.json b/lang/en-US.json
index aa64102c6..8088decfc 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -31,7 +31,6 @@
   "parameter_list": "Parameter List",
   "raw_request_body": "Raw Request Body",
   "show_code": "Show Code",
-  "hide_code": "Hide Code",
   "show_prerequest_script": "Show Pre-Request Script",
   "hide_prerequest_script": "Hide Pre-Request Script",
   "authentication": "Authentication",
diff --git a/nuxt.config.js b/nuxt.config.js
index 446c960ef..1e389f6e9 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -306,16 +306,16 @@ export default {
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     // You can extend webpack config here
-    extend(config, ctx) {
+    extend(config, { isDev, isClient }) {
       // Sets webpack's mode to development if `isDev` is true.
-      if (ctx.isDev) {
+      if (isDev) {
         config.mode = "development"
       }
       config.node = {
         fs: "empty",
       }
 
-      if (ctx.isClient) {
+      if (isClient) {
         config.module.rules.unshift({
           test: /\.worker\.(c|m)?js$/i,
           use: { loader: "worker-loader" },
diff --git a/pages/doc.vue b/pages/doc.vue
index b93af4b52..942078af3 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -384,11 +384,11 @@ export default {
             },
           }
         )
-        .then((response) => {
+        .then(({ html_url }) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(response.html_url)
+          window.open(html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
diff --git a/pages/index.vue b/pages/index.vue
index 84793bbbc..7cc91d042 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -252,7 +252,7 @@
               <button
                 class="icon"
                 id="show-modal"
-                @click="showModal = true"
+                @click="showCurlImportModal = !showCurlImportModal"
                 v-tooltip.bottom="$t('import_curl')"
               >
                 <i class="material-icons">import_export</i>
@@ -260,11 +260,9 @@
               <button
                 class="icon"
                 id="code"
-                @click="isHidden = !isHidden"
+                @click="showCodegenModal = !showCodegenModal"
                 :disabled="!isValidURL"
-                v-tooltip.bottom="{
-                  content: isHidden ? $t('show_code') : $t('hide_code'),
-                }"
+                v-tooltip.bottom="$t('show_code')"
               >
                 <i class="material-icons">code</i>
               </button>
@@ -312,93 +310,12 @@
               "
               :selected="true"
             >
-              <pw-section class="pink" label="Parameters" ref="parameters">
-                <ul v-if="params.length !== 0">
-                  <li>
-                    <div class="row-wrapper">
-                      <label for="paramList">{{ $t("parameter_list") }}</label>
-                      <div>
-                        <button
-                          class="icon"
-                          @click="clearContent('parameters', $event)"
-                          v-tooltip.bottom="$t('clear')"
-                        >
-                          <i class="material-icons">clear_all</i>
-                        </button>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-                <ul v-for="(param, index) in params" :key="index">
-                  <li>
-                    <input
-                      :placeholder="$t('parameter_count', { count: index + 1 })"
-                      :name="'param' + index"
-                      :value="param.key"
-                      @change="
-                        $store.commit('setKeyParams', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                      autofocus
-                    />
-                  </li>
-                  <li>
-                    <input
-                      :placeholder="$t('value_count', { count: index + 1 })"
-                      :name="'value' + index"
-                      :value="decodeURI(param.value)"
-                      @change="
-                        $store.commit('setValueParams', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                    />
-                  </li>
-                  <li>
-                    <span class="select-wrapper">
-                      <select
-                        :name="'type' + index"
-                        @change="
-                          $store.commit('setTypeParams', {
-                            index,
-                            value: $event.target.value,
-                          })
-                        "
-                      >
-                        <option value="query" :selected="param.type === 'query'">
-                          {{ $t("query") }}
-                        </option>
-                        <option value="path" :selected="param.type === 'path'">
-                          {{ $t("path") }}
-                        </option>
-                      </select>
-                    </span>
-                  </li>
-                  <div>
-                    <li>
-                      <button
-                        class="icon"
-                        @click="removeRequestParam(index)"
-                        v-tooltip.bottom="$t('delete')"
-                        id="param"
-                      >
-                        <i class="material-icons">delete</i>
-                      </button>
-                    </li>
-                  </div>
-                </ul>
-                <ul>
-                  <li>
-                    <button class="icon" @click="addRequestParam">
-                      <i class="material-icons">add</i>
-                      <span>{{ $t("add_new") }}</span>
-                    </button>
-                  </li>
-                </ul>
-              </pw-section>
+              <http-parameters
+                :params="params"
+                @clear-content="clearContent"
+                @remove-request-param="removeRequestParam"
+                @add-request-param="addRequestParam"
+              />
             </tab>
 
             <tab :id="'authentication'" :label="$t('authentication')">
@@ -462,7 +379,7 @@
                       <button
                         v-if="auth === 'OAuth 2.0'"
                         class="icon"
-                        @click="showTokenList = !showTokenList"
+                        @click="showTokenListModal = !showTokenListModal"
                         v-tooltip.bottom="$t('use_token')"
                       >
                         <i class="material-icons">open_in_new</i>
@@ -611,76 +528,13 @@
                 $t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
               "
             >
-              <pw-section class="orange" label="Headers" ref="headers">
-                <ul v-if="headers.length !== 0">
-                  <li>
-                    <div class="row-wrapper">
-                      <label for="headerList">{{ $t("header_list") }}</label>
-                      <div>
-                        <button
-                          class="icon"
-                          @click="clearContent('headers', $event)"
-                          v-tooltip.bottom="$t('clear')"
-                        >
-                          <i class="material-icons">clear_all</i>
-                        </button>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-                <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
-                  <li>
-                    <autocomplete
-                      :placeholder="$t('header_count', { count: index + 1 })"
-                      :source="commonHeaders"
-                      :spellcheck="false"
-                      :value="header.key"
-                      @input="
-                        $store.commit('setKeyHeader', {
-                          index,
-                          value: $event,
-                        })
-                      "
-                      @keyup.prevent="setRouteQueryState"
-                      autofocus
-                    />
-                  </li>
-                  <li>
-                    <input
-                      :placeholder="$t('value_count', { count: index + 1 })"
-                      :name="'value' + index"
-                      :value="header.value"
-                      @change="
-                        $store.commit('setValueHeader', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                      @keyup.prevent="setRouteQueryState"
-                    />
-                  </li>
-                  <div>
-                    <li>
-                      <button
-                        class="icon"
-                        @click="removeRequestHeader(index)"
-                        v-tooltip.bottom="$t('delete')"
-                        id="header"
-                      >
-                        <i class="material-icons">delete</i>
-                      </button>
-                    </li>
-                  </div>
-                </ul>
-                <ul>
-                  <li>
-                    <button class="icon" @click="addRequestHeader">
-                      <i class="material-icons">add</i>
-                      <span>{{ $t("add_new") }}</span>
-                    </button>
-                  </li>
-                </ul>
-              </pw-section>
+              <http-headers
+                :headers="headers"
+                @clear-content="clearContent"
+                @set-route-query-state="setRouteQueryState"
+                @remove-request-header="removeRequestHeader"
+                @add-request-header="addRequestHeader"
+              />
             </tab>
 
             <tab :id="'pre_request_script'" :label="$t('pre_request_script')">
@@ -832,314 +686,127 @@
             </tab>
 
             <tab :id="'notes'" :label="$t('notes')">
-              <pw-section class="pink" :label="$t('notes')" ref="sync">
-                <div v-if="fb.currentUser">
-                  <inputform />
-                  <feeds />
-                </div>
-                <div v-else>
-                  <ul>
-                    <li>
-                      <label>{{ $t("login_first") }}</label>
-                      <p>
-                        <login />
-                      </p>
-                    </li>
-                  </ul>
-                </div>
-              </pw-section>
+              <notes />
             </tab>
           </tabs>
         </section>
       </aside>
+    </div>
 
-      <save-request-as
-        :show="showRequestModal"
-        @hide-model="hideRequestModal"
-        :editing-request="editRequest"
-      />
+    <save-request-as
+      :show="showSaveRequestModal"
+      @hide-modal="hideRequestModal"
+      :editing-request="editRequest"
+    />
 
-      <modal v-if="showModal" @close="showModal = false">
-        <div slot="header">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <h3 class="title">{{ $t("import_curl") }}</h3>
-                <div>
-                  <button class="icon" @click="showModal = false">
-                    <i class="material-icons">close</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div slot="body">
-          <ul>
-            <li>
-              <textarea
-                id="import-text"
-                autofocus
-                rows="8"
-                :placeholder="$t('enter_curl')"
-              ></textarea>
-            </li>
-          </ul>
-        </div>
-        <div slot="footer">
-          <div class="row-wrapper">
-            <span></span>
-            <span>
-              <button class="icon" @click="showModal = false">
-                {{ $t("cancel") }}
-              </button>
-              <button class="icon primary" @click="handleImport">
-                {{ $t("import") }}
-              </button>
-            </span>
-          </div>
-        </div>
-      </modal>
+    <import-curl
+      :show="showCurlImportModal"
+      @hide-modal="showCurlImportModal = false"
+      @handle-import="handleImport"
+    />
 
-      <modal v-if="!isHidden" @close="isHidden = true">
-        <div slot="header">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <h3 class="title">{{ $t("generate_code") }}</h3>
-                <div>
-                  <button class="icon" @click="isHidden = true">
-                    <i class="material-icons">close</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div slot="body">
-          <ul>
-            <li>
-              <label for="requestType">{{ $t("request_type") }}</label>
-              <span class="select-wrapper">
-                <v-popover>
-                  <pre v-if="requestType">{{
-                    codegens.find((x) => x.id === requestType).name
-                  }}</pre>
-                  <input
-                    v-else
-                    id="requestType"
-                    v-model="requestType"
-                    :placeholder="$t('choose_language')"
-                    class="cursor-pointer"
-                    readonly
-                    autofocus
-                  />
-                  <template slot="popover">
-                    <div v-for="gen in codegens" :key="gen.id">
-                      <button class="icon" @click="requestType = gen.id" v-close-popover>
-                        {{ gen.name }}
-                      </button>
-                    </div>
-                  </template>
-                </v-popover>
-              </span>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <label for="generatedCode">{{ $t("generated_code") }}</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="copyRequestCode"
-                    id="copyRequestCode"
-                    ref="copyRequestCode"
-                    v-tooltip="$t('copy_code')"
-                  >
-                    <i class="material-icons">content_copy</i>
-                  </button>
-                </div>
-              </div>
-              <textarea
-                id="generatedCode"
-                ref="generatedCode"
-                name="generatedCode"
-                rows="8"
-                v-model="requestCode"
-              ></textarea>
-            </li>
-          </ul>
-        </div>
-      </modal>
+    <codegen-modal
+      :show="showCodegenModal"
+      :requestTypeProp="requestType"
+      :requestCode="requestCode"
+      @hide-modal="showCodegenModal = false"
+      @set-request-type="setRequestType"
+    />
 
-      <modal v-if="showTokenList" @close="showTokenList = false">
-        <div slot="header">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <h3 class="title">{{ $t("manage_token") }}</h3>
-                <div>
-                  <button class="icon" @click="showTokenList = false">
-                    <i class="material-icons">close</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div slot="body">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <label for="token-list">{{ $t("token_list") }}</label>
-                <div v-if="tokens.length != 0">
-                  <button
-                    class="icon"
-                    @click="clearContent('tokens', $event)"
-                    v-tooltip.bottom="$t('clear')"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-          <ul id="token-list" v-for="(token, index) in tokens" :key="index">
-            <li>
-              <input
-                :placeholder="'name ' + (index + 1)"
-                :value="token.name"
-                @change="
-                  $store.commit('setOAuthTokenName', {
-                    index,
-                    value: $event.target.value,
-                  })
-                "
-              />
-            </li>
-            <li>
-              <input :value="token.value" readonly />
-            </li>
+    <token-list
+      :show="showTokenListModal"
+      :tokens="tokens"
+      @clear-content="clearContent"
+      @use-oauth-token="useOAuthToken"
+      @remove-oauth-token="removeOAuthToken"
+      @hide-modal="showTokenListModal = false"
+    />
+
+    <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
+      <div slot="header">
+        <ul>
+          <li>
             <div class="row-wrapper">
-              <li>
+              <h3 class="title">{{ $t("manage_token_req") }}</h3>
+              <div>
+                <button class="icon" @click="showTokenRequestList = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <ul>
+          <li>
+            <div class="row-wrapper">
+              <label for="token-req-list">{{ $t("token_req_list") }}</label>
+              <div>
                 <button
+                  :disabled="this.tokenReqs.length === 0"
                   class="icon"
-                  @click="useOAuthToken(token.value)"
-                  v-tooltip.bottom="$t('use_token')"
+                  @click="showTokenRequestList = false"
+                  v-tooltip.bottom="$t('use_token_req')"
                 >
                   <i class="material-icons">input</i>
                 </button>
-              </li>
-              <li>
                 <button
+                  :disabled="this.tokenReqs.length === 0"
                   class="icon"
-                  @click="removeOAuthToken(index)"
+                  @click="removeOAuthTokenReq"
                   v-tooltip.bottom="$t('delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
-              </li>
+              </div>
             </div>
-          </ul>
-          <p v-if="tokens.length === 0" class="info">
-            {{ $t("empty") }}
-          </p>
-        </div>
-      </modal>
-
-      <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
-        <div slot="header">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <h3 class="title">{{ $t("manage_token_req") }}</h3>
-                <div>
-                  <button class="icon" @click="showTokenRequestList = false">
-                    <i class="material-icons">close</i>
-                  </button>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div slot="body">
-          <ul>
-            <li>
-              <div class="row-wrapper">
-                <label for="token-req-list">{{ $t("token_req_list") }}</label>
-                <div>
-                  <button
-                    :disabled="this.tokenReqs.length === 0"
-                    class="icon"
-                    @click="showTokenRequestList = false"
-                    v-tooltip.bottom="$t('use_token_req')"
-                  >
-                    <i class="material-icons">input</i>
-                  </button>
-                  <button
-                    :disabled="this.tokenReqs.length === 0"
-                    class="icon"
-                    @click="removeOAuthTokenReq"
-                    v-tooltip.bottom="$t('delete')"
-                  >
-                    <i class="material-icons">delete</i>
-                  </button>
-                </div>
-              </div>
-              <span class="select-wrapper">
-                <select
-                  id="token-req-list"
-                  v-model="tokenReqSelect"
-                  :disabled="this.tokenReqs.length === 0"
-                  @change="tokenReqChange($event)"
-                >
-                  <option v-for="(req, index) in tokenReqs" :key="index" :value="req.name">
-                    {{ req.name }}
-                  </option>
-                </select>
-              </span>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <label for="token-req-name">{{ $t("token_req_name") }}</label>
-              <input v-model="tokenReqName" />
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <label for="token-req-details">
-                {{ $t("token_req_details") }}
-              </label>
-              <textarea
-                id="token-req-details"
-                readonly
-                rows="7"
-                v-model="tokenReqDetails"
-              ></textarea>
-            </li>
-          </ul>
-        </div>
-        <div slot="footer">
-          <div class="row-wrapper">
-            <span></span>
-            <span>
-              <button class="icon primary" @click="addOAuthTokenReq">
-                {{ $t("save_token_req") }}
-              </button>
+            <span class="select-wrapper">
+              <select
+                id="token-req-list"
+                v-model="tokenReqSelect"
+                :disabled="this.tokenReqs.length === 0"
+                @change="tokenReqChange($event)"
+              >
+                <option v-for="(req, index) in tokenReqs" :key="index" :value="req.name">
+                  {{ req.name }}
+                </option>
+              </select>
             </span>
-          </div>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <label for="token-req-name">{{ $t("token_req_name") }}</label>
+            <input v-model="tokenReqName" />
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <label for="token-req-details">
+              {{ $t("token_req_details") }}
+            </label>
+            <textarea id="token-req-details" readonly rows="7" v-model="tokenReqDetails"></textarea>
+          </li>
+        </ul>
+      </div>
+      <div slot="footer">
+        <div class="row-wrapper">
+          <span></span>
+          <span>
+            <button class="icon primary" @click="addOAuthTokenReq">
+              {{ $t("save_token_req") }}
+            </button>
+          </span>
         </div>
-      </modal>
-    </div>
+      </div>
+    </modal>
   </div>
 </template>
 
 <script>
 import url from "url"
 import querystring from "querystring"
-import { commonHeaders } from "~/helpers/headers"
 import parseCurlCommand from "~/helpers/curlparser"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
@@ -1152,13 +819,13 @@ import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpe
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
-import { codegens, generateCodeWithGenerator } from "~/helpers/codegen/codegen"
+import { generateCodeWithGenerator } from "~/helpers/codegen/codegen"
 import findStatusGroup from "~/helpers/findStatusGroup"
 
 export default {
   data() {
     return {
-      showModal: false,
+      showCurlImportModal: false,
       showPreRequestScript: true,
       testsEnabled: true,
       testScript: "// pw.expect('variable').toBe('value');",
@@ -1167,7 +834,7 @@ export default {
       copyButton: '<i class="material-icons">content_copy</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       doneButton: '<i class="material-icons">done</i>',
-      isHidden: true,
+      showCodegenModal: false,
       response: {
         status: "",
         headers: "",
@@ -1175,11 +842,10 @@ export default {
       },
       validContentTypes: knownContentTypes,
       paramsWatchEnabled: true,
-      showTokenList: false,
+      showTokenListModal: false,
       showTokenRequest: false,
       showTokenRequestList: false,
-      commonHeaders,
-      showRequestModal: false,
+      showSaveRequestModal: false,
       editRequest: {},
       urlExcludes: {},
       activeSidebar: true,
@@ -1196,7 +862,6 @@ export default {
             : true,
       },
       currentMethodIndex: 0,
-      codegens,
       methodMenuItems: [
         "GET",
         "HEAD",
@@ -1301,7 +966,7 @@ export default {
     },
     editingRequest(newValue) {
       this.editRequest = newValue
-      this.showRequestModal = true
+      this.showSaveRequestModal = true
     },
     method() {
       this.contentType = ["POST", "PUT", "PATCH", "DELETE"].includes(this.method)
@@ -2117,15 +1782,6 @@ export default {
         setTimeout(() => (this.$refs.copyRequest.innerHTML = this.copyButton), 1000)
       }
     },
-    copyRequestCode() {
-      this.$refs.copyRequestCode.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      this.$refs.generatedCode.select()
-      document.execCommand("copy")
-      setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
-    },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {
@@ -2188,7 +1844,7 @@ export default {
       observer.observe(requestElement)
     },
     handleImport() {
-      const { value: text } = document.getElementById("import-text")
+      const { value: text } = document.getElementById("import-curl")
       try {
         const parsedCurl = parseCurlCommand(text)
         const { origin, pathname } = new URL(parsedCurl.url.replace(/"/g, "").replace(/'/g, ""))
@@ -2209,9 +1865,9 @@ export default {
           this.rawInput = true
           this.rawParams = parsedCurl["data"]
         }
-        this.showModal = false
+        this.showCurlImportModal = false
       } catch (error) {
-        this.showModal = false
+        this.showCurlImportModal = false
         this.$toast.error(this.$t("curl_invalid_format"), {
           icon: "error",
         })
@@ -2321,10 +1977,10 @@ export default {
       if (this.selectedRequest.url) {
         this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest)
       }
-      this.showRequestModal = true
+      this.showSaveRequestModal = true
     },
     hideRequestModal() {
-      this.showRequestModal = false
+      this.showSaveRequestModal = false
       this.editRequest = {}
     },
     setExclude(excludedField, excluded) {
@@ -2429,7 +2085,7 @@ export default {
     },
     useOAuthToken(value) {
       this.bearerToken = value
-      this.showTokenList = false
+      this.showTokenListModal = false
     },
     addOAuthTokenReq() {
       try {
@@ -2473,6 +2129,9 @@ export default {
       this.clientId = clientId
       this.scope = scope
     },
+    setRequestType(val) {
+      this.requestType = val
+    },
   },
   async mounted() {
     this.observeRequestButton()
@@ -2499,8 +2158,7 @@ export default {
       }
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showModal = this.showTokenList = this.showTokenRequestList = this.showRequestModal = false
-        this.isHidden = true
+        this.showCurlImportModal = this.showTokenListModal = this.showTokenRequestList = this.showSaveRequestModal = this.showCodegenModal = false
       }
       if ((e.key === "g" || e.key === "G") && e.altKey) {
         this.method = "GET"