Merge pull request #46 from REST-API-Client/feature/sidebar-click-feature

[2022/09/02] - Add logic to fill up Main UI with clicked history collection

Author: unwls

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.7
+
+#### Feature Clicking history collection from sidebar now fills up the UI in main request panel
+
 ## 1.0.6
 
 #### Fix README displaying anchor tag in VSCode marketplace due to wrong way of closing anchor tag

README.md

@@ -153,7 +153,7 @@ Simply click Open Menu button or open the Command Palette and type the command b
 
 ## 🗒 Changelog
 
-#### Current version 1.0.6
+#### Current version 1.0.7
 
 Visit [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/CHANGELOG.md) for a detailed release notes
 

package-lock.json

@@ -4,7 +4,7 @@
   "displayName": "REST API Client",
   "icon": "icons/images/icon.png",
   "description": "Simple and intuitive API Client made into a VSCode extension.",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/REST-API-Client/API-Client-VSCode-Extension/issues"

package.json

@@ -70,7 +70,17 @@ class MainWebViewPanel {
 
           return;
         }
-
+        const requestObject = {
+          requestMethod,
+          requestUrl,
+          authOption,
+          authData,
+          bodyOption,
+          bodyRawOption,
+          bodyRawData,
+          keyValueTableData,
+          command,
+        };
         this.#url = getUrl(requestUrl);
         this.#method = requestMethod;
         this.#headers = getHeaders(keyValueTableData, authOption, authData);
@@ -81,12 +91,12 @@ class MainWebViewPanel {
           bodyRawData,
         );
 
-        this.#postWebviewMessage();
+        this.#postWebviewMessage(requestObject);
       },
     );
   }
 
-  async #postWebviewMessage() {
+  async #postWebviewMessage(requestObject) {
     const { userRequestHistory } = this.stateManager.getExtensionContext(
       COLLECTION.HISTORY_COLLECTION,
     );
@@ -114,6 +124,7 @@ class MainWebViewPanel {
                 favoritedTime: null,
                 isUserFavorite: false,
                 id: uuidv4(),
+                requestObject,
               },
             ],
           },
@@ -129,6 +140,7 @@ class MainWebViewPanel {
                 favoritedTime: null,
                 isUserFavorite: false,
                 id: uuidv4(),
+                requestObject,
               },
               ...userRequestHistory,
             ],
@@ -137,6 +149,9 @@ class MainWebViewPanel {
       }
     }
 
+    console.log(
+      this.stateManager.getExtensionContext(COLLECTION.HISTORY_COLLECTION),
+    );
     this.mainPanel.webview.postMessage(responseObject);
     this.sidebarWebViewPanel.postMainWebViewPanelMessage(
       this.stateManager.getExtensionContext(COLLECTION.HISTORY_COLLECTION),

src/MainWebViewPanel.js

@@ -1,6 +1,6 @@
 import vscode from "vscode";
 
-import { CATEGORY, COLLECTION, COMMAND, MESSAGE } from "./constants";
+import { CATEGORY, COLLECTION, COMMAND, MESSAGE, TYPE } from "./constants";
 import { filterObjectKey, generateResponseObject, getNonce } from "./utils";
 
 class SidebarWebViewPanel {
@@ -114,6 +114,10 @@ class SidebarWebViewPanel {
           );
 
           this.mainWebViewPanel.webview.postMessage(responseObject);
+          this.mainWebViewPanel.webview.postMessage({
+            type: TYPE.SIDE_BAR_DATA,
+            ...selectedCollection.requestObject,
+          });
         }, 1000);
       }
     });

src/SidebarWebViewPanel.js

@@ -8,6 +8,7 @@ const TYPE = {
   BEARER_TOKEN: "Bearer Token",
   AUTHORIZATION: "Authorization",
   WEB_VIEW_TYPE: "RestApiClient",
+  SIDE_BAR_DATA: "Selected Collection Data",
   BODY_FORM_URLENCODED: "x-www-form-urlencoded",
 };
 

src/constants/types.js

@@ -8,6 +8,7 @@ const RESPONSE = {
   META_DATA: "Meta Data",
   VIEW_FORMAT: "View Format",
   RESPONSE_BODY: "Response Body",
+  SIDE_BAR_DATA: "Selected Collection Data",
   COLLECTION_REQUEST: "Collection Request",
 };
 

webview/constants/response.js

@@ -1,17 +1,23 @@
 import React from "react";
 import styled from "styled-components";
+import shallow from "zustand/shallow";
 
 import { OPTION, REQUEST } from "../../../constants";
 import useStore from "../../../store/useStore";
 
 const RequestMethod = () => {
-  const handleRequestMethodChange = useStore(
-    (state) => state.handleRequestMethodChange,
+  const { requestMethod, handleRequestMethodChange } = useStore(
+    (state) => ({
+      requestMethod: state.requestMethod,
+      handleRequestMethodChange: state.handleRequestMethodChange,
+    }),
+    shallow,
   );
 
   return (
     <MethodSelectOptionWrapper
       name="httpRequestMethods"
+      value={requestMethod}
       onChange={(event) => handleRequestMethodChange(event.target.value)}
     >
       {OPTION.REQUEST_METHOD_OPTIONS.map((requestMethod, index) => (

webview/features/Request/Method/RequestMethod.js

@@ -15,12 +15,16 @@ const ResponsePanel = () => {
     requestInProcess,
     handleResponseData,
     handleRequestProcessStatus,
+    handleSidebarCollectionHeaders,
+    handleSidebarCollectionClick,
   } = useStore(
     (state) => ({
       responseData: state.responseData,
       requestInProcess: state.requestInProcess,
       handleResponseData: state.handleResponseData,
       handleRequestProcessStatus: state.handleRequestProcessStatus,
+      handleSidebarCollectionClick: state.handleSidebarCollectionClick,
+      handleSidebarCollectionHeaders: state.handleSidebarCollectionHeaders,
     }),
     shallow,
   );
@@ -34,6 +38,26 @@ const ResponsePanel = () => {
       handleRequestProcessStatus(RESPONSE.ERROR);
     } else if (event.data.type === RESPONSE.COLLECTION_REQUEST) {
       handleRequestProcessStatus(COMMON.LOADING);
+    } else if (event.data.type === RESPONSE.SIDE_BAR_DATA) {
+      const {
+        keyValueTableData,
+        authData,
+        authOption,
+        requestUrl,
+        requestMethod,
+        bodyOption,
+        bodyRawOption,
+      } = event.data;
+
+      handleSidebarCollectionClick({
+        authData,
+        authOption,
+        requestUrl,
+        requestMethod,
+        bodyOption,
+        bodyRawOption,
+      });
+      handleSidebarCollectionHeaders(keyValueTableData);
     }
   };
 

webview/features/Response/Panel/ResponsePanel.js

@@ -16,7 +16,7 @@ const IframeWrapper = styled.div`
 
   iframe {
     width: 100%;
-    height: 65vh;
+    height: 55vh;
     background: white;
     overflow: scroll;
   }

webview/features/Response/Preview/ResponsePreview.js

@@ -136,6 +136,14 @@ const keyValueTableDataSlice = (set) => ({
       ),
     }));
   },
+
+  handleSidebarCollectionHeaders: (headers) => {
+    set(() => {
+      return {
+        keyValueTableData: [...headers],
+      };
+    });
+  },
 });
 
 export default keyValueTableDataSlice;

webview/store/slices/keyValueTableDataSlice.js

@@ -88,6 +88,14 @@ const requestDataSlice = (set) => ({
     })),
 
   setCodeSnippetValue: (value) => set(() => ({ codeSnippetValue: value })),
+
+  handleSidebarCollectionClick: (value) =>
+    set((state) => {
+      return {
+        ...state,
+        ...value,
+      };
+    }),
 });
 
 export default requestDataSlice;