fix: fixed debounce to work correctly

kubeshop · Oct 29, 2021 · 7f9dead · 7f9dead
1 parent 608c5a3
commit 7f9dead
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/src/components/organisms/ClustersPane/ClustersPane.tsx b/src/components/organisms/ClustersPane/ClustersPane.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, useCallback, useEffect} from 'react';
+import React, {useRef, useCallback, useEffect, useState} from 'react';
 import {Button, Col, Input, Row, Tooltip, Select} from 'antd';
 import styled from 'styled-components';
 import {useSelector} from 'react-redux';
@@ -12,8 +12,8 @@ import {setCurrentContext, updateKubeconfig} from '@redux/reducers/appConfig';
 import {BrowseKubeconfigTooltip, ClusterModeTooltip} from '@constants/tooltips';
 import {TOOLTIP_DELAY} from '@constants/constants';
 import {closeFolderExplorer} from '@redux/reducers/ui';
-import {loadContexts} from '@redux/thunks/loadKubeConfig';
 import {useDebounce} from 'react-use';
+import {loadContexts} from '@redux/thunks/loadKubeConfig';
 
 const StyledDiv = styled.div`
   margin-bottom: 10px;
@@ -53,9 +53,24 @@ const ClustersPane = () => {
   const kubeconfig = useAppSelector(state => state.config.kubeconfigPath);
   const kubeConfig = useAppSelector(state => state.config.kubeConfig);
   const uiState = useAppSelector(state => state.ui);
+  const [currentKubeConfig, setCurrentKubeConfig] = useState<string>('');
 
   const fileInput = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    setCurrentKubeConfig(kubeconfig);
+  }, [kubeconfig]);
+
+  useDebounce(
+    () => {
+      if (currentKubeConfig !== kubeconfig) {
+        dispatch(updateKubeconfig(currentKubeConfig));
+      }
+    },
+    1000,
+    [currentKubeConfig]
+  );
+
   const openFileSelect = () => {
     fileInput && fileInput.current?.click();
   };
@@ -73,7 +88,7 @@ const ClustersPane = () => {
 
   const onUpdateKubeconfig = (e: any) => {
     let value = e.target.value;
-    dispatch(updateKubeconfig(value));
+    setCurrentKubeConfig(value);
   };
 
   const connectToCluster = () => {
@@ -112,15 +127,11 @@ const ClustersPane = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uiState]);
 
-  useDebounce(
-    () => {
-      if (kubeconfig) {
-        dispatch(loadContexts(kubeconfig));
-      }
-    },
-    2000,
-    [kubeconfig]
-  );
+  useEffect(() => {
+    if (kubeconfig) {
+      dispatch(loadContexts(kubeconfig));
+    }
+  }, [kubeconfig]);
 
   return (
     <>
@@ -136,7 +147,7 @@ const ClustersPane = () => {
       <PaneContainer>
         <ClustersContainer>
           <StyledDiv>KUBECONFIG</StyledDiv>
-          <Input value={kubeconfig} onChange={onUpdateKubeconfig} />
+          <Input value={currentKubeConfig} onChange={onUpdateKubeconfig} />
           <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={BrowseKubeconfigTooltip} placement="right">
             <StyledButton ghost type="primary" onClick={openFileSelect}>
               Browse

diff --git a/src/components/organisms/SettingsDrawer/SettingsDrawer.tsx b/src/components/organisms/SettingsDrawer/SettingsDrawer.tsx
@@ -60,9 +60,10 @@ const SettingsDrawer = () => {
 
   const resourceRefsProcessingOptions = useAppSelector(state => state.main.resourceRefsProcessingOptions);
   const appConfig = useAppSelector(state => state.config);
+  const kubeconfig = useAppSelector(state => state.config.kubeconfigPath);
   const folderReadsMaxDepth = useAppSelector(state => state.config.folderReadsMaxDepth);
   const [currentFolderReadsMaxDepth, setCurrentFolderReadsMaxDepth] = useState<number>(5);
-
+  const [currentKubeConfig, setCurrentKubeConfig] = useState<string>('');
   const fileInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -121,9 +122,23 @@ const SettingsDrawer = () => {
     fileInput && fileInput.current?.click();
   };
 
+  useEffect(() => {
+    setCurrentKubeConfig(kubeconfig);
+  }, [kubeconfig]);
+
+  useDebounce(
+    () => {
+      if (currentKubeConfig !== kubeconfig) {
+        dispatch(updateKubeconfig(currentKubeConfig));
+      }
+    },
+    1000,
+    [currentKubeConfig]
+  );
+
   const onUpdateKubeconfig = (e: any) => {
     let value = e.target.value;
-    dispatch(updateKubeconfig(value));
+    setCurrentKubeConfig(value);
   };
 
   const onSelectFile = (e: React.SyntheticEvent) => {
@@ -158,7 +173,7 @@ const SettingsDrawer = () => {
       <StyledDiv>
         <StyledSpan>KUBECONFIG</StyledSpan>
         <Tooltip title={KubeconfigPathTooltip}>
-          <Input value={appConfig.kubeconfigPath} onChange={onUpdateKubeconfig} />
+          <Input value={currentKubeConfig} onChange={onUpdateKubeconfig} />
         </Tooltip>
         <StyledButton onClick={openFileSelect}>Browse</StyledButton>
         <HiddenInput type="file" onChange={onSelectFile} ref={fileInput} />

diff --git a/src/redux/reducers/appConfig.ts b/src/redux/reducers/appConfig.ts
@@ -2,7 +2,6 @@ import {createSlice, Draft, PayloadAction, createAsyncThunk} from '@reduxjs/tool
 import {AppConfig, Themes, TextSizes, Languages, NewVersionCode} from '@models/appconfig';
 import electronStore from '@utils/electronStore';
 import {loadContexts} from '@redux/thunks/loadKubeConfig';
-import {monitorKubeConfig} from '@redux/services/kubeConfigMonitor';
 import {KubeConfig} from '@models/kubeConfig';
 import {KustomizeCommandType} from '@redux/services/kustomize';
 import initialState from '../initialState';
@@ -16,7 +15,7 @@ export const updateStartupModalVisible = createAsyncThunk(
 );
 
 export const updateKubeconfig = createAsyncThunk('config/updateKubeconfig', async (kubeconfig: string, thunkAPI) => {
-  monitorKubeConfig(kubeconfig, thunkAPI.dispatch);
+  // monitorKubeConfig(kubeconfig, thunkAPI.dispatch);
   electronStore.set('appConfig.kubeconfig', kubeconfig);
   thunkAPI.dispatch(configSlice.actions.setKubeconfig(kubeconfig));
 });