(feat) add header tab for response (#20)

* (feat) add tabs for response window

* (fix) fix editor height

* (improv) add teable to headers

* (improv) map response headers

* (improv) remove response cookies

* (improv) use height % instead of flex

* (improv) minor css change

* (improv) change size of icon

* (improv) minor editor css change

src/extension.ts

@@ -133,6 +133,7 @@ export function activate(context: vscode.ExtensionContext) {
                 data: resp.data,
                 status: resp.status,
                 statusText: resp.statusText,
+                headers: resp.headers,
               })
             )
             .catch((err) => {

webview/components/RequestOptionsWindow/styles.css

@@ -1,4 +1,5 @@
 .request-options-window-wrapper {
   flex: 1;
   padding: 5px 20px 10px 20px;
+  overflow: scroll;
 }

webview/components/Response/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { ResponseTab } from "../../features/response/ResponseTab";
+import { ResponseWindow } from "../../features/response/ResponseWindow";
+import { ReactComponent as PackageIcon } from "../../icons/package.svg";
+import "./styles.css";
+import { useAppSelector } from "../../redux/hooks";
+import { selectResponse } from "../../features/response/responseSlice";
+import { supportedLangs } from "../../constants/supported-langs";
+
+export const Response = () => {
+  const response = useAppSelector(selectResponse);
+  const [selected, setSelected] = React.useState("body");
+  const [language, setLanguage] = React.useState(supportedLangs[0].value);
+
+  if (response.loading) {
+    return (
+      <div className="loader-wrapper">
+        <div>Sending request ...</div>
+        <div className="loader" />
+      </div>
+    );
+  } else if (response.initial) {
+    return (
+      <div className="initial-response-wrapper">
+        <div className="initial-text">Hit Send to get a response</div>
+        <PackageIcon className="img-initial-response" />
+      </div>
+    );
+  } else if (response.error) {
+    return (
+      <div className="error-response-wrapper">
+        <div>Could not send request</div>
+        <div className="error-message">{`Error: ${response.error.message}`}</div>
+        <PackageIcon className="img-error-response" />
+      </div>
+    );
+  } else {
+    return (
+      <div className="response-body-wrapper">
+        <ResponseTab
+          selected={selected}
+          setSelected={setSelected}
+          language={language}
+          setLanguage={setLanguage}
+        />
+        <ResponseWindow selected={selected} language={language} />
+      </div>
+    );
+  }
+};

webview/features/response/Response/styles.css → webview/components/Response/styles.css

@@ -1,76 +1,51 @@
-.response-window {
-  border-top: var(--default-border-size) solid var(--border);
-  flex: 1;
-  padding: 5px 20px 10px 20px;
-}
-
-.response-header {
-  margin: 10px 0;
-  margin-bottom: 15px;
+.response-body-wrapper {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
+  flex: 1;
+  font-size: var(--default-font-size);
+  border-top: var(--default-border-size) solid var(--border);
 }
 
-.response-view-options {
+.error-response-wrapper {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-}
-
-.response-status {
   font-size: var(--default-font-size);
-  display: flex;
-  align-items: center;
+  border-top: var(--default-border-size) solid var(--border);
 }
 
-.response-editor {
-  height: 85%;
+.img-error-response {
+  margin: 15px;
+  fill: var(--logo-color);
+  width: 20%;
+  height: 20%;
 }
 
-.text-response-status {
-  color: var(--tab-info);
-  margin-left: 5px;
+.error-message {
+  margin: 10px;
+  color: var(--error-message);
 }
 
-.button-response-view {
+.initial-response-wrapper {
+  border-top: var(--default-border-size) solid var(--border);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   color: var(--default-text-light);
   font-size: var(--default-font-size);
-  padding: 5px;
-  cursor: pointer;
-  background-color: var(--input-field);
-  border: 0;
-  outline: none;
-}
-.button-response-view:hover {
-  color: var(--default-text);
-  outline: none;
-}
-.button-response-view:focus {
-  outline: none;
+  flex: 1;
 }
 
-.button-response-view-selected {
-  color: var(--default-text);
+.img-initial-response {
+  fill: var(--logo-color);
+  width: 20%;
+  height: 20%;
 }
 
-.select-res-lang {
-  margin-left: 10px;
-  padding: 4px;
-  display: inline-block;
-  font-weight: 600;
-  outline: none;
-  border: var(--default-border-size) solid var(--border);
-  border-radius: 2px;
-  background-color: var(--background);
-  color: var(--default-text-light);
-  cursor: pointer;
-  font-size: var(--small-font-size);
-}
-.select-res-lang:hover {
-  color: var(--default-text);
-}
-.select-res-lang:focus {
-  outline: none;
+.initial-text {
+  padding: 10px;
 }
 
 .loader-wrapper {

webview/constants/response-options.ts

@@ -0,0 +1,10 @@
+export const responseOptions = [
+  {
+    name: "Body",
+    value: "body",
+  },
+  {
+    name: "Headers",
+    value: "headers",
+  },
+];

webview/features/requestBody/Raw/styles.css

@@ -4,5 +4,5 @@
 }
 
 .raw-editor {
-  height: 100%;
+  height: 95%;
 }

webview/features/response/ResponseBody/index.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import "./styles.css";
+import { useAppSelector } from "../../../redux/hooks";
+import { selectResponse } from "../responseSlice";
+import * as propTypes from "prop-types";
+
+const Editor = React.lazy(() => import("../../../shared/Editor"));
+
+export const ResponseBody = (props) => {
+  const { language } = props;
+  const response = useAppSelector(selectResponse);
+
+  return (
+    <div className="response-window">
+      <React.Suspense fallback={<div>loading</div>}>
+        <Editor
+          className="response-editor"
+          value={response.data || ""}
+          language={language}
+          readOnly
+          copyButton
+          format
+        />
+      </React.Suspense>
+    </div>
+  );
+};
+
+ResponseBody.propTypes = {
+  language: propTypes.string.isRequired,
+};

webview/features/response/ResponseBody/styles.css

@@ -0,0 +1,7 @@
+.response-window {
+  height: 100%;
+}
+
+.response-editor {
+  height: 95%;
+}

webview/features/response/ResponseHeaders/index.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { useAppSelector } from "../../../redux/hooks";
+import { KeyValueTable } from "../../../shared/KeyValueTable";
+import { selectResponseHeaders } from "../responseSlice";
+import "./styles.css";
+
+export const ResponseHeaders = () => {
+  const headers = useAppSelector(selectResponseHeaders);
+
+  return (
+    <div className="response-headers">
+      <KeyValueTable data={headers} fixed />
+    </div>
+  );
+};