Merge pull request #33 from REST-API-Client/refactor/createStoreSlice

[2022/07/18] - Modularize different store to multiple slices

Author: unwls

src/MainWebViewPanel.js

@@ -54,7 +54,7 @@ class MainWebViewPanel {
         bodyOption,
         bodyRawOption,
         bodyRawData,
-        keyValueData,
+        keyValueTableData,
         command,
       }) => {
         if (command === COMMAND.ALERT_COPY) {
@@ -71,9 +71,9 @@ class MainWebViewPanel {
 
         this.#url = getUrl(requestUrl);
         this.#method = requestMethod;
-        this.#headers = getHeaders(keyValueData, authOption, authData);
+        this.#headers = getHeaders(keyValueTableData, authOption, authData);
         this.#body = getBody(
-          keyValueData,
+          keyValueTableData,
           bodyOption,
           bodyRawOption,
           bodyRawData,

webview/features/Request/Authorization/RequestAuthBearerToken.js

@@ -4,10 +4,10 @@ import shallow from "zustand/shallow";
 import InputWrapper from "../../../components/InputWrapper";
 import Wrapper from "../../../components/Wrapper";
 import { REQUEST } from "../../../constants";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 
 const RequestAuthBearerToken = () => {
-  const { authDataToken, handleRequestAuthData } = useRequestStore(
+  const { authDataToken, handleRequestAuthData } = useStore(
     (state) => ({
       authDataToken: state.authData.token,
       handleRequestAuthData: state.handleRequestAuthData,

webview/features/Request/Authorization/RequestAuthSelectMenu.js

@@ -4,14 +4,13 @@ import shallow from "zustand/shallow";
 
 import SelectWrapper from "../../../components/SelectWrapper";
 import { OPTION, REQUEST } from "../../../constants";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestAuthMenuOption from "./RequestAuthSelectMenuOption";
 
 const RequestAuthSelectMenu = () => {
-  const { authOption, handleRequestAuthType } = useRequestStore(
+  const { authOption, handleRequestAuthType } = useStore(
     (state) => ({
       authOption: state.authOption,
-      authData: state.authData,
       handleRequestAuthType: state.handleRequestAuthType,
     }),
     shallow,

webview/features/Request/Authorization/RequestAuthSelectMenuOption.js

@@ -1,13 +1,13 @@
 import React from "react";
 
 import { REQUEST } from "../../../constants";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestBearerToken from "./RequestAuthBearerToken";
 import RequestBasicAuth from "./RequestBasicAuth";
 import RequestNoAuth from "./RequestNoAuth";
 
 const RequestAuthSelectMenuOption = () => {
-  const authOption = useRequestStore((state) => state.authOption);
+  const authOption = useStore((state) => state.authOption);
 
   switch (authOption) {
     case REQUEST.BASIC_AUTH:

webview/features/Request/Authorization/RequestBasicAuth.js

@@ -4,19 +4,19 @@ import shallow from "zustand/shallow";
 import InputWrapper from "../../../components/InputWrapper";
 import Wrapper from "../../../components/Wrapper";
 import { REQUEST } from "../../../constants";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 
 const RequestBasicAuth = () => {
   const {
     authData,
-    handleRequestAuthData,
     shouldShowPassword,
+    handleRequestAuthData,
     handleShouldShowPassword,
-  } = useRequestStore(
+  } = useStore(
     (state) => ({
       authData: state.authData,
-      handleRequestAuthData: state.handleRequestAuthData,
       shouldShowPassword: state.shouldShowPassword,
+      handleRequestAuthData: state.handleRequestAuthData,
       handleShouldShowPassword: state.handleShouldShowPassword,
     }),
     shallow,

webview/features/Request/Body/RequestBodyRawOptions.js

@@ -4,26 +4,23 @@ import shallow from "zustand/shallow";
 
 import SelectWrapper from "../../../components/SelectWrapper";
 import { OPTION, REQUEST } from "../../../constants";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 
 const RequestBodyRawOptions = () => {
-  const { bodyRawOption, handleBodyRawOption } = useRequestStore(
+  const {
+    bodyRawOption,
+    handleBodyRawOption,
+    addRequestBodyHeaders,
+    removeRequestBodyHeaders,
+  } = useStore(
     (state) => ({
       bodyRawOption: state.bodyRawOption,
-      bodyRawData: state.bodyRawData,
       handleBodyRawOption: state.handleBodyRawOption,
+      addRequestBodyHeaders: state.addRequestBodyHeaders,
+      removeRequestBodyHeaders: state.removeRequestBodyHeaders,
     }),
     shallow,
   );
-  const { addRequestBodyHeaders, removeRequestBodyHeaders } =
-    useKeyValueTableStore(
-      (state) => ({
-        addRequestBodyHeaders: state.addRequestBodyHeaders,
-        removeRequestBodyHeaders: state.removeRequestBodyHeaders,
-      }),
-      shallow,
-    );
 
   const handleBodyRawSelectOption = (event) => {
     const selectedOptionIndex = event.target.selectedIndex;

webview/features/Request/Body/RequestBodySelectMenu.js

@@ -4,31 +4,28 @@ import shallow from "zustand/shallow";
 
 import SelectWrapper from "../../../components/SelectWrapper";
 import { COMMON, OPTION, REQUEST } from "../../../constants";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestBodyFormatButton from "../Button/RequestBodyFormatButton";
 import RequestBodyRawOptions from "./RequestBodyRawOptions";
 import RequestBodyMenuOption from "./RequestBodySelectMenuOption";
 
 const RequestBodySelectMenu = () => {
-  const { bodyOption, bodyRawOption, handleRequestBodyOption } =
-    useRequestStore(
-      (state) => ({
-        bodyOption: state.bodyOption,
-        bodyRawOption: state.bodyRawOption,
-        handleRequestBodyOption: state.handleRequestBodyOption,
-      }),
-      shallow,
-    );
-
-  const { addRequestBodyHeaders, removeRequestBodyHeaders } =
-    useKeyValueTableStore(
-      (state) => ({
-        addRequestBodyHeaders: state.addRequestBodyHeaders,
-        removeRequestBodyHeaders: state.removeRequestBodyHeaders,
-      }),
-      shallow,
-    );
+  const {
+    bodyOption,
+    bodyRawOption,
+    handleRequestBodyOption,
+    addRequestBodyHeaders,
+    removeRequestBodyHeaders,
+  } = useStore(
+    (state) => ({
+      bodyOption: state.bodyOption,
+      bodyRawOption: state.bodyRawOption,
+      handleRequestBodyOption: state.handleRequestBodyOption,
+      addRequestBodyHeaders: state.addRequestBodyHeaders,
+      removeRequestBodyHeaders: state.removeRequestBodyHeaders,
+    }),
+    shallow,
+  );
 
   const rawOptionHeaderField = OPTION.REQUEST_BODY_RAW_OPTIONS.filter(
     (rawOption) => rawOption.option === bodyRawOption,

webview/features/Request/Body/RequestBodySelectMenuOption.js

@@ -4,28 +4,38 @@ import shallow from "zustand/shallow";
 import { HEIGHT, OPTION, REQUEST } from "../../../constants";
 import CodeEditor from "../../../shared/CodeEditor";
 import KeyValueTable from "../../../shared/KeyValueTable";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestNoBody from "./RequestNoBody";
 
 const RequestBodySelectMenuOption = () => {
-  const keyValueProps = useKeyValueTableStore();
   const {
     bodyOption,
+    bodyRawData,
     bodyRawOption,
+    keyValueProps,
     codeEditorProps,
-    bodyRawData,
     handleBodyRawOptionData,
-  } = useRequestStore(
+  } = useStore(
     (state) => ({
       bodyOption: state.bodyOption,
       bodyRawData: state.bodyRawData,
       bodyRawOption: state.bodyRawOption.toLowerCase(),
-      handleBodyRawOptionData: state.handleBodyRawOptionData,
+      keyValueProps: {
+        addNewTableRow: state.addNewTableRow,
+        deleteTableRow: state.deleteTableRow,
+        handleRequestKey: state.handleRequestKey,
+        keyValueTableData: state.keyValueTableData,
+        handleRequestValue: state.handleRequestValue,
+        addRequestBodyHeaders: state.addRequestBodyHeaders,
+        handleRequestCheckbox: state.handleRequestCheckbox,
+        handleRequestDescription: state.handleRequestDescription,
+        removeRequestBodyHeaders: state.removeRequestBodyHeaders,
+      },
       codeEditorProps: {
         shouldBeautifyEditor: state.shouldBeautifyEditor,
         handleBeautifyButton: state.handleBeautifyButton,
       },
+      handleBodyRawOptionData: state.handleBodyRawOptionData,
     }),
     shallow,
   );

webview/features/Request/Button/RequestBodyFormatButton.js

@@ -1,12 +1,10 @@
 import React from "react";
 
 import Button from "../../../components/Button";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 
 const RequestBodyFormatButton = () => {
-  const handleBeautifyButton = useRequestStore(
-    (state) => state.handleBeautifyButton,
-  );
+  const handleBeautifyButton = useStore((state) => state.handleBeautifyButton);
 
   return (
     <Button buttonPurpose="format" handleButtonClick={handleBeautifyButton}>

webview/features/Request/Button/RequestButton.js

@@ -1,12 +1,10 @@
 import React from "react";
 
 import Button from "../../../components/Button";
-import useResponseDataStore from "../../../store/responseDataStore";
+import useStore from "../../../store/useStore";
 
 const RequestButton = () => {
-  const requestInProcess = useResponseDataStore(
-    (state) => state.requestInProcess,
-  );
+  const requestInProcess = useStore((state) => state.requestInProcess);
 
   return (
     <Button primary buttonType="submit" buttonStatus={requestInProcess}>

webview/features/Request/CodeSnippet/RequestCodeSnippet.js

@@ -2,34 +2,48 @@ import codegen from "postman-code-generators";
 import { Request } from "postman-collection";
 import React, { useEffect } from "react";
 import styled from "styled-components";
+import shallow from "zustand/shallow";
 
 import CopyIcon from "../../../components/CopyIcon";
 import SelectWrapper from "../../../components/SelectWrapper";
 import { COMMON, HEIGHT, OPTION } from "../../../constants";
 import CodeEditor from "../../../shared/CodeEditor";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import { generateSdkRequestObject } from "../../../utils";
 import vscode from "../../../vscode";
 
 const RequestCodeSnippet = () => {
   const {
+    authData,
     requestUrl,
-    requestMethod,
     authOption,
-    authData,
     bodyOption,
-    bodyRawOption,
     bodyRawData,
+    requestMethod,
+    bodyRawOption,
+    codeSnippetValue,
+    keyValueTableData,
     codeSnippetOption,
+    setCodeSnippetValue,
     handleCodeSnippetOptionChange,
     handleCodeSnippetVariantChange,
-    codeSnippetValue,
-    setCodeSnippetValue,
-  } = useRequestStore();
-
-  const keyValueTableData = useKeyValueTableStore(
-    (state) => state.keyValueTableData,
+  } = useStore(
+    (state) => ({
+      authData: state.authData,
+      requestUrl: state.requestUrl,
+      authOption: state.authOption,
+      bodyOption: state.bodyOption,
+      bodyRawData: state.bodyRawData,
+      requestMethod: state.requestMethod,
+      bodyRawOption: state.bodyRawOption,
+      codeSnippetValue: state.codeSnippetValue,
+      keyValueTableData: state.keyValueTableData,
+      codeSnippetOption: state.codeSnippetOption,
+      setCodeSnippetValue: state.setCodeSnippetValue,
+      handleCodeSnippetOptionChange: state.handleCodeSnippetOptionChange,
+      handleCodeSnippetVariantChange: state.handleCodeSnippetVariantChange,
+    }),
+    shallow,
   );
 
   const handleCopyIconClick = (value) => {

webview/features/Request/Menu/RequestMenu.js

@@ -4,17 +4,14 @@ import shallow from "zustand/shallow";
 import DetailOption from "../../../components/DetailOption";
 import MenuOption from "../../../components/MenuOption";
 import { COMMON, OPTION, REQUEST } from "../../../constants/";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestMenuOption from "./RequestMenuOption";
 
 const RequestMenu = () => {
-  const keyValueTableData = useKeyValueTableStore(
-    (state) => state.keyValueTableData,
-  );
-  const { requestOption, changeRequestOption } = useRequestStore(
+  const { requestOption, keyValueTableData, changeRequestOption } = useStore(
     (state) => ({
       requestOption: state.requestOption,
+      keyValueTableData: state.keyValueTableData,
       changeRequestOption: state.handleRequestOptionChange,
     }),
     shallow,

webview/features/Request/Menu/RequestMenuOption.js

@@ -1,16 +1,31 @@
 import React from "react";
+import shallow from "zustand/shallow";
 
 import { COMMON, REQUEST } from "../../../constants";
 import KeyValueTable from "../../../shared/KeyValueTable";
-import useKeyValueTableStore from "../../../store/keyValueTableStore";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 import RequestAuthSelectMenu from "../Authorization/RequestAuthSelectMenu";
 import RequestBodySelectMenu from "../Body/RequestBodySelectMenu";
 import RequestCodeSnippet from "../CodeSnippet/RequestCodeSnippet";
 
 const RequestMenuOption = () => {
-  const keyValueProps = useKeyValueTableStore();
-  const requestOption = useRequestStore((state) => state.requestOption);
+  const { requestOption, keyValueProps } = useStore(
+    (state) => ({
+      requestOption: state.requestOption,
+      keyValueProps: {
+        addNewTableRow: state.addNewTableRow,
+        deleteTableRow: state.deleteTableRow,
+        handleRequestKey: state.handleRequestKey,
+        keyValueTableData: state.keyValueTableData,
+        handleRequestValue: state.handleRequestValue,
+        addRequestBodyHeaders: state.addRequestBodyHeaders,
+        handleRequestCheckbox: state.handleRequestCheckbox,
+        handleRequestDescription: state.handleRequestDescription,
+        removeRequestBodyHeaders: state.removeRequestBodyHeaders,
+      },
+    }),
+    shallow,
+  );
 
   switch (requestOption) {
     case REQUEST.PARAMS:

webview/features/Request/Method/RequestMethod.js

@@ -2,10 +2,10 @@ import React from "react";
 import styled from "styled-components";
 
 import { OPTION, REQUEST } from "../../../constants";
-import useRequestStore from "../../../store/requestStore";
+import useStore from "../../../store/useStore";
 
 const RequestMethod = () => {
-  const handleRequestMethodChange = useRequestStore(
+  const handleRequestMethodChange = useStore(
     (state) => state.handleRequestMethodChange,
   );