(fix) make send button work

rohinivsenthil · Jun 4, 2021 · 2a62b54 · 2a62b54
1 parent 55af825
commit 2a62b54
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 64 deletions.
diff --git a/src/extension.ts b/src/extension.ts
@@ -53,74 +53,88 @@ export function activate(context: vscode.ExtensionContext) {
 </html>`;
 
       panel.webview.onDidReceiveMessage(
-        ({
-          reqType,
-          requestUrl,
-          headers,
-          body,
-          auth,
-          selectedBodyType,
-          rawLanguage,
-        }) => {
-          if (requestUrl) {
-            const headersObj = {};
+        ({ method, url, headers, body, auth }) => {
+          if (!url) {
+            panel.webview.postMessage({
+              type: "response",
+              error: { message: "Request URL is empty" },
+            });
+            vscode.window.showInformationMessage("Request URL is empty");
+            return;
+          }
+
+          const headersObj = {};
 
-            if (selectedBodyType === "form-data") {
-              headersObj["Content-Type"] = "multipart/form-data";
-            } else if (selectedBodyType === "urlcoded") {
-              headersObj["Content-Type"] = "application/x-www-form-urlencoded";
-            } else if (selectedBodyType === "raw" && rawLanguage === "json") {
-              headersObj["Content-Type"] = "application/json";
-            } else if (selectedBodyType === "raw" && rawLanguage === "html") {
-              headersObj["Content-Type"] = "text/html";
-            } else if (selectedBodyType === "raw" && rawLanguage === "xml") {
-              headersObj["Content-Type"] = "text/xml";
-            } else if (selectedBodyType === "raw" && rawLanguage === "text") {
-              headersObj["Content-Type"] = "text/plain";
-            } else if (selectedBodyType === "binary") {
-              headersObj["Content-Type"] = "application/octet-stream";
+          if (auth.type === "bearer") {
+            headersObj["Authorization"] = `Bearer ${auth.bearer.token}`;
+          }
+
+          headers.forEach(({ key, value, disabled }) => {
+            if (!disabled) {
+              headersObj[key] = value;
             }
+          });
 
-            headers.forEach(({ key, value, checked }) => {
-              if (checked) {
-                headersObj[key || ""] = value || "";
+          let data = "";
+          if (body.mode === "form-data") {
+            const dataObj = new URLSearchParams();
+            body.formdata.forEach(({ key, value, disabled }) => {
+              if (!disabled) {
+                dataObj.append(key, value);
               }
             });
+            data = dataObj.toString();
+            headersObj["Content-Type"] = "multipart/form-data";
+          } else if (body.mode === "x-www-form-urlencoded") {
+            const dataObj = new URLSearchParams();
+            body.urlencoded.forEach(({ key, value, disabled }) => {
+              if (!disabled) {
+                dataObj.append(key, value);
+              }
+            });
+            data = dataObj.toString();
+            headersObj["Content-Type"] = "application/x-www-form-urlencoded";
+          } else if (body.mode === "raw") {
+            data = body.raw;
+            headersObj["Content-Type"] = {
+              json: "application/json",
+              html: "text/html",
+              xml: "text/xml",
+              text: "text/plain",
+            }[body.options.raw.language];
+          } else if (body.mode === "binary") {
+            data = body.fileData;
+            headersObj["Content-Type"] = "application/octet-stream";
+          }
 
-            if (auth.type === "bearer") {
-              headersObj["Authorization"] = `Bearer ${auth.bearer.token}`;
-            }
-
-            axios({
-              method: reqType,
-              url: requestUrl,
-              data: body,
-              headers: headersObj,
-              auth: auth.type === "basic" ? auth.basic : undefined,
-              transformResponse: [(data) => data],
-              responseType: "text",
-              validateStatus: () => true,
-            })
-              .then((resp) =>
-                panel.webview.postMessage({
-                  type: "response",
-                  data: resp.data,
-                  status: resp.status,
-                  statusText: resp.statusText,
-                })
-              )
-              .catch((err) => {
-                panel.webview.postMessage({
-                  type: "response",
-                  error: err,
-                });
-                vscode.window.showInformationMessage(
-                  "Error: Could not send request"
-                );
+          axios({
+            method,
+            url,
+            baseURL: "",
+            data: data,
+            headers: headersObj,
+            auth: auth.type === "basic-auth" ? auth.basic : undefined,
+            transformResponse: [(data) => data],
+            responseType: "text",
+            validateStatus: () => true,
+          })
+            .then((resp) =>
+              panel.webview.postMessage({
+                type: "response",
+                data: resp.data,
+                status: resp.status,
+                statusText: resp.statusText,
+              })
+            )
+            .catch((err) => {
+              panel.webview.postMessage({
+                type: "response",
+                error: err,
               });
-          } else {
-            vscode.window.showInformationMessage("Request URL is empty");
-          }
+              vscode.window.showInformationMessage(
+                "Error: Could not send request"
+              );
+            });
         }
       );
     }

diff --git a/webview/components/RequestBar/index.tsx b/webview/components/RequestBar/index.tsx
@@ -1,18 +1,37 @@
 import * as React from "react";
+import vscode from "../../vscode";
 import { RequestMethodSelector } from "../../features/requestMethod/RequestMethodSelector";
-import { useAppDispatch } from "../../redux/hooks";
-import { responseLoadingStarted } from "../../features/response/responseSlice";
 import { RequestUrl } from "../../features/requestUrl/RequestUrl";
+import { responseLoadingStarted } from "../../features/response/responseSlice";
+import { selectRequestAuth } from "../../features/requestAuth/requestAuthSlice";
+import { selectRequestBody } from "../../features/requestBody/requestBodySlice";
+import { selectRequestHeaders } from "../../features/requestHeader/requestHeaderSlice";
+import { selectRequestUrl } from "../../features/requestUrl/requestUrlSlice";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import "./styles.css";
+import { selectRequestMethod } from "../../features/requestMethod/requestMethodSlice";
 
 export const RequestBar = () => {
   const dispatch = useAppDispatch();
 
+  const requestMethod = useAppSelector(selectRequestMethod);
+  const requestHeaders = useAppSelector(selectRequestHeaders);
+  const requestBody = useAppSelector(selectRequestBody);
+  const requestUrl = useAppSelector(selectRequestUrl);
+  const requestAuth = useAppSelector(selectRequestAuth);
+
   return (
     <form
       className="request-bar"
       onSubmit={(e) => {
         dispatch(responseLoadingStarted());
+        vscode.postMessage({
+          method: requestMethod,
+          auth: requestAuth,
+          body: requestBody,
+          headers: requestHeaders,
+          url: requestUrl,
+        });
         e.preventDefault();
       }}
     >

diff --git a/webview/features/requestBody/requestBodySlice.ts b/webview/features/requestBody/requestBodySlice.ts
@@ -93,6 +93,7 @@ export const {
   requestBodyUrlEncodedItemUpdated,
 } = requestBodySlice.actions;
 
+export const selectRequestBody = (state: RootState) => state.requestBody;
 export const selectRequestBodyMode = (state: RootState) =>
   state.requestBody.mode || "none";
 export const selectRequestBodyRaw = (state: RootState) => state.requestBody.raw;

diff --git a/webview/features/requestHeader/requestHeaderSlice.ts b/webview/features/requestHeader/requestHeaderSlice.ts
@@ -8,7 +8,32 @@ interface Header {
   disabled: boolean;
 }
 
-const initialState: Header[] = [];
+const initialState: Header[] = [
+  {
+    key: "Cache-Control",
+    value: "no-cache",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Accept",
+    value: "*/*",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Accept-Encoding",
+    value: "gzip, deflate",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Connection",
+    value: "keep-alive",
+    description: "",
+    disabled: false,
+  },
+];
 
 const requestHeaderSlice = createSlice({
   name: "requestHeader",