fix: store freezing on changing data

getezy · Aug 14, 2022 · ee8b35c · ee8b35c
1 parent c3a8f43
commit ee8b35c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 44 deletions.
diff --git a/src/app/pages/tabs-container/collection-types/grpc/request/request.tsx b/src/app/pages/tabs-container/collection-types/grpc/request/request.tsx
@@ -1,6 +1,5 @@
 import { styled } from '@nextui-org/react';
 import React from 'react';
-import { useDebounce } from 'react-use';
 
 import { GrpcMethodType } from '../../../../../../core/protobuf/interfaces';
 import { CodeEditor, Tab, Tabs } from '../../../../../components';
@@ -22,43 +21,6 @@ export interface RequestProps {
 export const Request: React.FC<RequestProps> = ({ tab }) => {
   const { updateGrpcTabData } = useTabsStore((store) => store);
 
-  const [request, setRequest] = React.useState(tab.data.requestTabs.request.value);
-  const [metadata, setMetadata] = React.useState(tab.data.requestTabs.metadata.value);
-
-  // TODO: with fast changes and clicking invoke button request payload stays old
-  // Related to https://github.com/getezy/ezy/issues/13
-  useDebounce(
-    () => {
-      updateGrpcTabData(tab.id, {
-        requestTabs: {
-          ...tab.data.requestTabs,
-          request: {
-            ...tab.data.requestTabs.request,
-            value: request,
-          },
-        },
-      });
-    },
-    1000,
-    [request]
-  );
-
-  useDebounce(
-    () => {
-      updateGrpcTabData(tab.id, {
-        requestTabs: {
-          ...tab.data.requestTabs,
-          metadata: {
-            ...tab.data.requestTabs.metadata,
-            value: metadata,
-          },
-        },
-      });
-    },
-    1000,
-    [metadata]
-  );
-
   const activeTabId = tab.data.requestTabs.activeTabId || tab.data.requestTabs.request.id;
 
   const handleTabActivate = (key: string) => {
@@ -71,11 +33,27 @@ export const Request: React.FC<RequestProps> = ({ tab }) => {
   };
 
   const handleRequestChange = (requestValue: string) => {
-    setRequest(requestValue);
+    updateGrpcTabData(tab.id, {
+      requestTabs: {
+        ...tab.data.requestTabs,
+        request: {
+          ...tab.data.requestTabs.request,
+          value: requestValue,
+        },
+      },
+    });
   };
 
   const handleMetadataChange = (metadataValue: string) => {
-    setMetadata(metadataValue);
+    updateGrpcTabData(tab.id, {
+      requestTabs: {
+        ...tab.data.requestTabs,
+        metadata: {
+          ...tab.data.requestTabs.metadata,
+          value: metadataValue,
+        },
+      },
+    });
   };
 
   return (
@@ -94,7 +72,7 @@ export const Request: React.FC<RequestProps> = ({ tab }) => {
             height="100%"
             maxWidth="100%"
             width="100%"
-            value={request}
+            value={tab.data.requestTabs.request.value}
             onChange={handleRequestChange}
           />
         </Tab>
@@ -107,7 +85,7 @@ export const Request: React.FC<RequestProps> = ({ tab }) => {
             height="100%"
             maxWidth="100%"
             width="100%"
-            value={metadata}
+            value={tab.data.requestTabs.metadata.value}
             onChange={handleMetadataChange}
           />
         </Tab>

diff --git a/src/main/ipc/electron-store/preload.ts b/src/main/ipc/electron-store/preload.ts
@@ -7,9 +7,17 @@ export const ElectronStore = {
     return ipcRenderer.invoke(ElectronStoreChannel.GET, key);
   },
   setItem<T = any>(key: string, value: T): Promise<void> {
-    return ipcRenderer.invoke(ElectronStoreChannel.SET, key, value);
+    setTimeout(() => {
+      ipcRenderer.invoke(ElectronStoreChannel.SET, key, value);
+    }, 0);
+
+    return Promise.resolve();
   },
   removeItem(key: string): Promise<void> {
-    return ipcRenderer.invoke(ElectronStoreChannel.REMOVE, key);
+    setTimeout(() => {
+      ipcRenderer.invoke(ElectronStoreChannel.REMOVE, key);
+    }, 0);
+
+    return Promise.resolve();
   },
 };