update tab zustand store based on tab id

Author: jsajal

src/components/molecules/environment/index.js

@@ -33,7 +33,7 @@ const Env = ({ tab }) => {
   });
 
   return (
-    <div className='p-4'>
+    <div className='p-4' key={tab.id}>
       <table className='w-full leading-normal'>
         <thead>
           <tr className='bg-ghost-50 text-ghost-600 text-left text-xs font-bold uppercase tracking-wider'>

src/stores/EnvStore.js

@@ -8,12 +8,12 @@ const useEnvStore = create((set, get) => ({
   },
   handleAddVariable: (key, value) => {
     set((state) => ({ variables: { ...state.variables, [key]: value } }));
-    useTabStore.getState().updateEnvTab(get().variables);
+    useTabStore.getState().updateEnvTab(useTabStore.getState().focusTabId, get().variables);
   },
   handleDeleteVariable: (key) => {
     const { [key]: _, ...newVariables } = get().variables;
     set({ variables: newVariables });
-    useTabStore.getState().updateEnvTab(get().variables);
+    useTabStore.getState().updateEnvTab(useTabStore.getState().focusTabId, get().variables);
   },
 }));
 

src/stores/TabStore.js

@@ -142,18 +142,20 @@ export const useTabStore = create((set, get) => ({
     set((state) => ({ tabs: [...state.tabs, newTab] }));
     set(() => ({ focusTabId: newTab.id }));
   },
-  // these state changes are meant to be triggered by env tab in focus
-  updateEnvTab: (variables) => {
-    if (get().focusTabId) {
-      const existingTab = get().tabs.find((t) => t.id === get().focusTabId);
-      if (existingTab) {
-        if (!existingTab.variablesDraft) {
-          existingTab.variablesDraft = cloneDeep(existingTab.variables);
+  updateEnvTab: (tabId, variables) => {
+    set(
+      produce((state) => {
+        if (tabId) {
+          const existingTab = state.tabs.find((t) => t.id === tabId);
+          if (existingTab) {
+            if (!existingTab.variablesDraft) {
+              existingTab.variablesDraft = cloneDeep(existingTab.variables);
+            }
+            existingTab.variablesDraft = variables;
+          }
         }
-        existingTab.variablesDraft = variables;
-      }
-      console.log(existingTab);
-    }
+      }),
+    );
   },
   closeTab: (id, collectionId) => {
     set((state) => ({ tabs: state.tabs.filter((t) => t.id !== id) }));