Merge pull request #9 from rohinivsenthil/feat/code-generation

(improv) manage state with redux

package.json

@@ -77,6 +77,7 @@
     "@types/node": "^12.11.7",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.4",
+    "@types/react-redux": "^7.1.16",
     "@types/vscode": "^1.56.0",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
@@ -99,10 +100,16 @@
     "webpack-cli": "^4.4.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.1",
     "axios": "^0.21.1",
+    "buffer": "^6.0.3",
     "monaco-editor": "^0.24.0",
+    "path-browserify": "^1.0.1",
+    "postman-collection": "^3.6.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.4",
+    "url": "^0.11.0"
   }
 }

src/extension.ts

@@ -53,77 +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.selected === "bearer-token") {
-              headersObj["Authorization"] = `Bearer ${auth.token}`;
-            }
-
-            axios({
-              method: reqType,
-              url: requestUrl,
-              data: body,
-              headers: headersObj,
-              auth:
-                auth.selected === "basic-auth"
-                  ? { username: auth.username, password: auth.password }
-                  : 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"
+              );
+            });
         }
       );
     }

webpack.config.js

@@ -3,6 +3,7 @@
 "use strict";
 
 const path = require("path");
+const webpack = require("webpack");
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 
 const imageInlineSizeLimit = parseInt(
@@ -19,7 +20,14 @@ const baseConfig = (webpackEnv) => {
     devtool: isEnvProduction
       ? "source-map"
       : isEnvDevelopment && "eval-cheap-module-source-map",
-    resolve: { extensions: [".ts", ".tsx", ".js"] },
+    resolve: {
+      fallback: {
+        buffer: require.resolve("buffer"),
+        path: require.resolve("path-browserify"),
+        url: require.resolve("url"),
+      },
+      extensions: [".ts", ".tsx", ".js"],
+    },
     module: {
       rules: [
         {
@@ -98,6 +106,9 @@ const webviewConfig = (webpackEnv) => {
       new MonacoWebpackPlugin({
         languages: ["html", "xml", "json"],
       }),
+      new webpack.ProvidePlugin({
+        Buffer: ["buffer", "Buffer"],
+      }),
     ],
   };
 };

webview/App.tsx

@@ -1,28 +1,23 @@
 import * as React from "react";
 import "./App.css";
+import { responseUpdated } from "./features/response/responseSlice";
 import { Postcode } from "./pages/Postcode";
+import { useAppDispatch } from "./redux/hooks";
 
 const App = () => {
-  const [response, setResponse] = React.useState({ initial: "true" });
-  const [loadingResponse, setLoadingResponse] = React.useState(false);
+  const dispatch = useAppDispatch();
 
   React.useEffect(() => {
     window.addEventListener("message", (event) => {
       if (event.data.type === "response") {
-        setLoadingResponse(false);
-        setResponse(event.data);
+        dispatch(responseUpdated(event.data));
       }
     });
   }, []);
 
   return (
     <div className="App">
-      <Postcode
-        response={response}
-        setResponse={setResponse}
-        loadingResponse={loadingResponse}
-        setLoadingResponse={setLoadingResponse}
-      />
+      <Postcode />
     </div>
   );
 };