[FEAT]: Add logic to update UI when sidebar history collection is clicked

Author: unjinjang

src/MainWebViewPanel.js

@@ -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),

webview/features/Request/Method/RequestMethod.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/Response/Panel/ResponsePanel.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);
     }
   };