From 164624786da20498e9ae361185f4e54c5bfe1680 Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Tue, 17 Sep 2019 03:24:11 +0430
Subject: [PATCH 1/2] Sync path and parameters.

---
 pages/index.vue | 71 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index a8c64ab83..c2896f30c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -59,7 +59,7 @@
         </li>
         <li>
           <label for="path">Path</label>
-          <input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path">
+          <input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler">
         </li>
         <div class="show-on-small-screen">
           <li>
@@ -444,6 +444,7 @@
           body: ''
         },
         previewEnabled: false,
+        paramsWatchEnabled: true,
 
         /**
          * These are content types that can be automatically
@@ -493,6 +494,32 @@
             responseText.innerText = this.response.body
           }
         }
+      },
+      params: {
+        handler: function(newValue) {
+          if(!this.paramsWatchEnabled) {
+            this.paramsWatchEnabled = true;
+            return;
+          }
+          let path = this.path;
+          let queryString = newValue
+            .filter(({
+              key
+            }) => !!key)
+            .map(({
+              key,
+              value
+            }) => `${key}=${value}`).join('&')
+          queryString = queryString === '' ? '' : `?${queryString}`
+          if(path.indexOf('?') !== -1) {
+            path = path.slice(0, path.indexOf('?')) + queryString;
+          } else {
+            path = path + queryString
+          }
+
+          this.path = path;
+        },
+        deep: true
       }
     },
     computed: {
@@ -511,6 +538,15 @@
       hasRequestBody() {
         return ['POST', 'PUT', 'PATCH'].includes(this.method);
       },
+      pathName() {
+        let result;
+        if(this.path.indexOf('?') !== -1) {
+          result = this.path.slice(0, this.path.indexOf('?'))
+        } else {
+          result = this.path;
+        }
+        return result;
+      },
       rawRequestBody() {
         const {
           bodyParams
@@ -715,7 +751,7 @@
         try {
           const payload = await this.$axios({
             method: this.method,
-            url: this.url + this.path + this.queryString,
+            url: this.url + this.pathName + this.queryString,
             auth,
             headers,
             data: requestBody ? requestBody.toString() : null
@@ -765,7 +801,38 @@
           this.response.body = "See JavaScript console (F12) for details.";
         }
       },
+      pathInputHandler(event) {
+        let newValue = event.target.value;
+        let path, start, end, queryString;
+        path = newValue;
+        start = path.indexOf('?');
+        end = path.indexOf('#') !== -1 ? path.indexOf('#') : path.length;
+        if(start !== -1) {
+          queryString = path.slice(start, end).length > 1 ? path.slice(start, end) : '';
+        } else {
+          queryString = ''
+        }
 
+        let params = [];
+
+        if(queryString) {
+          let paramsInString = newValue.split('?')[1];
+          params = paramsInString.split('&').filter(pair => !!pair).map(pair => {
+            pair = pair.replace(/#/g, '');
+            let key, value;
+            if(pair.indexOf('=') === -1) {
+              key = pair;
+              value = '';
+            } else {
+              let splited = pair.split('=');
+              [key, value] = [splited.shift(), splited.join('=')];
+            }
+            return {key, value}
+          })
+        }
+        this.paramsWatchEnabled = false;
+        this.params = params;
+      },
       addRequestHeader() {
         this.headers.push({
           key: '',

From 3781445e5d2c056cb178921562e67439bc6e5c3f Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Wed, 18 Sep 2019 02:10:12 +0430
Subject: [PATCH 2/2] Clean code.

---
 pages/index.vue | 56 +++++++++++++++++++++----------------------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index c2896f30c..81849a0a7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -539,13 +539,7 @@
         return ['POST', 'PUT', 'PATCH'].includes(this.method);
       },
       pathName() {
-        let result;
-        if(this.path.indexOf('?') !== -1) {
-          result = this.path.slice(0, this.path.indexOf('?'))
-        } else {
-          result = this.path;
-        }
-        return result;
+        return this.path.match(/^([^?]*)\??/)[1]
       },
       rawRequestBody() {
         const {
@@ -801,35 +795,33 @@
           this.response.body = "See JavaScript console (F12) for details.";
         }
       },
-      pathInputHandler(event) {
-        let newValue = event.target.value;
-        let path, start, end, queryString;
-        path = newValue;
-        start = path.indexOf('?');
-        end = path.indexOf('#') !== -1 ? path.indexOf('#') : path.length;
+      getQueryStringFromPath() {
+        let path = this.path,
+            hashIndex = path.indexOf('#'),
+            start = path.indexOf('?'),
+            end = hashIndex !== -1 ? hashIndex : path.length,
+            queryString = '';
+
         if(start !== -1) {
-          queryString = path.slice(start, end).length > 1 ? path.slice(start, end) : '';
-        } else {
-          queryString = ''
+          let sliced = path.slice(start, end);
+          queryString = sliced.length > 1 ? sliced : '';
         }
 
-        let params = [];
-
-        if(queryString) {
-          let paramsInString = newValue.split('?')[1];
-          params = paramsInString.split('&').filter(pair => !!pair).map(pair => {
-            pair = pair.replace(/#/g, '');
-            let key, value;
-            if(pair.indexOf('=') === -1) {
-              key = pair;
-              value = '';
-            } else {
-              let splited = pair.split('=');
-              [key, value] = [splited.shift(), splited.join('=')];
+        return queryString;
+      },
+      queryStringToArray(queryString) {
+        return queryString.replace(/^\?/, '').split('&').filter(pair => !!pair).map(pair => {
+          let splited = pair.replace(/#/g, '').split('=');
+          return {
+            key: splited.shift(),
+            value: splited.join('=')
             }
-            return {key, value}
-          })
-        }
+        })
+      },
+      pathInputHandler() {
+        let queryString = this.getQueryStringFromPath(),
+            params = this.queryStringToArray(queryString);
+
         this.paramsWatchEnabled = false;
         this.params = params;
       },