From 1c2381d9a0b487818fb0367a3dc45ca396728885 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 16 Jul 2021 11:21:53 +0200
Subject: [PATCH] fix: run use effect when value changes, not object (#315)

* fix: run use effect when value changes, not object

* fix: add user to archived toggle view

* fix: remove console log
---
 .../component/addons/form-addon-component.jsx | 26 ++++++++++++++++---
 .../src/component/archive/view-container.js   |  1 +
 .../feature/view/metric-component.jsx         |  2 +-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/addons/form-addon-component.jsx b/frontend/src/component/addons/form-addon-component.jsx
index e97292c483..47a8dcc434 100644
--- a/frontend/src/component/addons/form-addon-component.jsx
+++ b/frontend/src/component/addons/form-addon-component.jsx
@@ -11,7 +11,14 @@ import cloneDeep from 'lodash.clonedeep';
 import styles from './form-addon-component.module.scss';
 import PageContent from '../common/PageContent/PageContent';
 
-const AddonFormComponent = ({ editMode, provider, addon, fetch, cancel, submit }) => {
+const AddonFormComponent = ({
+    editMode,
+    provider,
+    addon,
+    fetch,
+    cancel,
+    submit,
+}) => {
     const [config, setConfig] = useState(addon);
     const [errors, setErrors] = useState({
         parameters: {},
@@ -25,8 +32,10 @@ const AddonFormComponent = ({ editMode, provider, addon, fetch, cancel, submit }
     }, [fetch, provider]); // empty array => fetch only first time
 
     useEffect(() => {
+        console.log(addon);
         setConfig({ ...addon });
-    }, [addon]);
+        /* eslint-disable-next-line */
+    }, [addon.description, addon.provider]);
 
     useEffect(() => {
         if (provider && !config.provider) {
@@ -98,7 +107,11 @@ const AddonFormComponent = ({ editMode, provider, addon, fetch, cancel, submit }
         }
     };
 
-    const { name, description, documentationUrl = 'https://unleash.github.io/docs/addons' } = provider ? provider : {};
+    const {
+        name,
+        description,
+        documentationUrl = 'https://unleash.github.io/docs/addons',
+    } = provider ? provider : {};
 
     return (
         <PageContent headerContent={`Configure ${name} addon`}>
@@ -121,7 +134,12 @@ const AddonFormComponent = ({ editMode, provider, addon, fetch, cancel, submit }
                         className={styles.nameInput}
                     />
                     <FormControlLabel
-                        control={<Switch checked={config.enabled} onChange={onEnabled} />}
+                        control={
+                            <Switch
+                                checked={config.enabled}
+                                onChange={onEnabled}
+                            />
+                        }
                         label={config.enabled ? 'Enabled' : 'Disabled'}
                     />
                 </section>
diff --git a/frontend/src/component/archive/view-container.js b/frontend/src/component/archive/view-container.js
index d572f7e919..c08a94cb1b 100644
--- a/frontend/src/component/archive/view-container.js
+++ b/frontend/src/component/archive/view-container.js
@@ -11,6 +11,7 @@ export default connect(
             .toArray()
             .find(toggle => toggle.name === props.featureToggleName),
         tagTypes: state.tagTypes.toJS(),
+        user: state.user.toJS(),
         featureTags: state.featureTags.toJS(),
         activeTab: props.activeTab,
     }),
diff --git a/frontend/src/component/feature/view/metric-component.jsx b/frontend/src/component/feature/view/metric-component.jsx
index 0616394d63..9518ff1360 100644
--- a/frontend/src/component/feature/view/metric-component.jsx
+++ b/frontend/src/component/feature/view/metric-component.jsx
@@ -166,7 +166,7 @@ export default class MetricComponent extends React.Component {
                     </Grid>
                 </Grid>
                 <hr />
-                <StrategiesList strategies={featureToggle.strategies} />
+                <StrategiesList strategies={featureToggle.strategies || []} />
             </div>
         );
     }