Fix use of useFormData after update

- also minor refactor to use useCallback in policy flyout now that getFormData changes when the form data changes.
elastic · Oct 21, 2020 · 2ed016f · 2ed016f
1 parent 4f2a615
commit 2ed016f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/...y/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx b/...y/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx
@@ -5,6 +5,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
+import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EuiText, EuiSpacer, EuiSuperSelectOption } from '@elastic/eui';
 
@@ -93,10 +94,12 @@ export const DataTierAllocation: FunctionComponent<SharedProps> = (props) => {
 
   const dataTierAllocationTypePath = `_meta.${phase}.dataTierAllocationType`;
 
-  const [{ [dataTierAllocationTypePath]: dataTierAllocationType }] = useFormData({
-    watch: [dataTierAllocationTypePath],
+  const [formData] = useFormData({
+    watch: dataTierAllocationTypePath,
   });
 
+  const dataTierAllocationType = get(formData, dataTierAllocationTypePath);
+
   return (
     <div data-test-subj={`${phase}-dataTierAllocationControls`}>
       <UseField path={dataTierAllocationTypePath}>

diff --git a/...policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx b/...policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx
@@ -5,6 +5,7 @@
  */
 
 import React, { useState, FunctionComponent } from 'react';
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonEmpty, EuiText, EuiSpacer } from '@elastic/eui';
@@ -43,10 +44,12 @@ const i18nTexts = {
 export const NodeAllocation: FunctionComponent<SharedProps> = ({ phase, nodes }) => {
   const allocationNodeAttributePath = `_meta.${phase}.allocationNodeAttribute`;
 
-  const [{ [allocationNodeAttributePath]: selectedAllocationNodeAttribute }] = useFormData({
+  const [formData] = useFormData({
     watch: [allocationNodeAttributePath],
   });
 
+  const selectedAllocationNodeAttribute = get(formData, allocationNodeAttributePath);
+
   const [selectedNodeAttrsForDetails, setSelectedNodeAttrsForDetails] = useState<string | null>(
     null
   );

diff --git a/...policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx b/...policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { get } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 
@@ -44,8 +45,9 @@ export const DataTierAllocationField: FunctionComponent<Props> = ({ phase, descr
     services: { cloud },
   } = useKibana();
 
-  const allocationTypePath = `_meta.${phase}.dataTierAllocationType`;
-  const [{ [allocationTypePath]: allocationType }] = useFormData({ watch: [allocationTypePath] });
+  const dataTierAllocationTypePath = `_meta.${phase}.dataTierAllocationType`;
+  const [formData] = useFormData({ watch: dataTierAllocationTypePath });
+  const allocationType = get(formData, dataTierAllocationTypePath);
 
   return (
     <NodesDataProvider>

diff --git a/...sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx b/...sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx
@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import React, { FunctionComponent } from 'react';
+import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
@@ -29,7 +29,8 @@ interface Props {
 }
 
 export const MinAgeInputField: FunctionComponent<Props> = ({ phase }): React.ReactElement => {
-  const [{ [useRolloverPath]: rolloverEnabled }] = useFormData({ watch: useRolloverPath });
+  const [formData] = useFormData({ watch: useRolloverPath });
+  const rolloverEnabled = get(formData, useRolloverPath);
 
   let daysOptionLabel;
   let hoursOptionLabel;

diff --git a/...ycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx b/...ycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -46,27 +46,28 @@ export const PolicyJsonFlyout: React.FunctionComponent<Props> = ({
   const [policy, setPolicy] = useState<undefined | null | SerializedPolicy>(undefined);
 
   const form = useFormContext();
-  const [formData, getFormData] = useFormData<FormInternal>();
+  const [, getFormData] = useFormData<FormInternal>();
+
+  const getPolicy = useCallback(async () => {
+    setPolicy(undefined);
+    if (await form.validate()) {
+      const p = getFormData() as SerializedPolicy;
+      setPolicy({
+        ...legacyPolicy,
+        phases: {
+          ...legacyPolicy.phases,
+          hot: p.phases.hot,
+          warm: p.phases.warm,
+        },
+      });
+    } else {
+      setPolicy(null);
+    }
+  }, [setPolicy, getFormData, legacyPolicy, form]);
 
   useEffect(() => {
-    (async function checkPolicy() {
-      setPolicy(undefined);
-      if (await form.validate()) {
-        const p = getFormData() as SerializedPolicy;
-        setPolicy({
-          ...legacyPolicy,
-          phases: {
-            ...legacyPolicy.phases,
-            hot: p.phases.hot,
-            warm: p.phases.warm,
-          },
-        });
-      } else {
-        setPolicy(null);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form, legacyPolicy, formData]);
+    getPolicy();
+  }, [getPolicy]);
 
   let content: React.ReactNode;
   switch (policy) {