first approach

src/Components/Modal/EditPlaza.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useCallback } from 'react';
 import { Modal } from 'react-bootstrap'
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -74,8 +74,9 @@ function Edit(props) {
   const { setValue, getValues, reset, control, register, handleSubmit, formState: { errors } } = useForm({
     resolver: yupResolver(plazeSchema),
     defaultValues: {
+      id: 0,
       nombrepuesto: 'mingtest',
-      puestosuperior: null,
+      puestosuperior: 0,
       fecha: '01/01/2019',
       notas: 'esto es un ejemplod e una nota',
       aredepto: 1,
@@ -109,7 +110,6 @@ function Edit(props) {
   const auth = useSelector((state) => state.token)
   const queryClient = useQueryClient()
   let { visible, toggle } = props
-  // const [puestoSup, setPuestoSup] = React.useState('');
 
   const [open, setOpen] = React.useState(false);
   const [tab, setTab] = React.useState(0);
@@ -142,13 +142,18 @@ function Edit(props) {
     handleCloseDialog();
   };
 
-  let setDialogValue = (value) => {
-    if (value?.id !== undefined && isNaN(value?.id) === false) {
+  let setDialogValue = useCallback((value) => {
+    console.log('value receivied', value)
+    let id = value.id || 0;
+    if (id !== 0) {
       // setValues({ ...values, puestosuperior: value?.id })
-      setValue('puestosuperior', value?.id)
+      console.log('setting: ', value)
+      setValue('puestosuperior',)
+      console.log('inside', getValues())
+      // return
     }
     setDialogValueHook(value)
-  }
+  },[setValue,getValues])
 
   const loading = openSugg && options.length === 0;
 
@@ -211,32 +216,36 @@ function Edit(props) {
 
   useEffect(() => {
 
+    let current_id = getValues('id')
+    console.log({ current_id, visible })
+
     if (visible == null) return;
-    let rest = new Service(`/plaza/getthis/${visible}`)
-    rest
-      .getQuery(auth.token)
-      .then(response => {
-        let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
-        let temp_test = tests.map(t => ({ id: t.id }))
-        setChecklist(temp_test.map(t => t.id))
-        console.log('puesto sup', puestosuperior)
-
-        let temp_puesto = {
-          title: puestosuperior.nombre,
-          id: puestosuperior.id
-        }
-        // setDialogValue(temp_puesto)
-        reset({
-          ...response.data,
-          aredepto: areadeptoplz_id,
-          fecha: new Date(fecha),
-          tests: temp_test,
-          puestosuperior: puestosuperior.id
+
+    if (current_id !== visible) {
+
+      let rest = new Service(`/plaza/getthis/${visible}`)
+      rest
+        .getQuery(auth.token)
+        .then(response => {
+          let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
+          let temp_test = tests.map(t => ({ id: t.id }))
+          setChecklist(temp_test.map(t => t.id))
+          console.log('puesto sup', puestosuperior)
+          setDialogValue({
+            title: puestosuperior.nombre,
+            id: puestosuperior.id
+          })
+          reset({
+            ...response.data,
+            aredepto: areadeptoplz_id,
+            fecha: new Date(fecha),
+            tests: temp_test,
+            puestosuperior: puestosuperior.id
+          })
         })
-        // setDialogValue({ title: puestosuperior.nombre, id: puestosuperior.id })
-      })
-      .catch(e => console.log(e))
+        .catch(e => console.log(e))
 
+    }
 
     let active = true;
     if (!loading) {
@@ -252,11 +261,46 @@ function Edit(props) {
 
     return () => {
       active = false;
+      reset()
     };
 
 
 
-  }, [visible, auth, reset, loading, dialogValue])
+  }, [visible, auth, reset, loading, dialogValue, getValues,setDialogValue])
+  // console.log('PROPS', props)
+
+
+  // if (props.visible !== getValues('id') ) {
+  //
+  //   let rest = new Service(`/plaza/getthis/${visible}`)
+  //   rest
+  //     .getQuery(auth.token)
+  //     .then(response => {
+  //
+  //       console.log('initial  value', dialogValue)
+  //       let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
+  //       let temp_test = tests.map(t => ({ id: t.id }))
+  //       setChecklist(temp_test.map(t => t.id))
+  //       console.log('puesto sup', puestosuperior)
+  //       reset({
+  //         ...response.data,
+  //         aredepto: areadeptoplz_id,
+  //         fecha: new Date(fecha),
+  //         tests: temp_test,
+  //         puestosuperior: puestosuperior.id
+  //       })
+  //       let temp = { title: puestosuperior.nombre, id: puestosuperior.id }
+  //       console.log(temp)
+  //       if (dialogValue?.id !== temp.id) {
+  //         setDialogValueHook(temp)
+  //       }
+  //
+  //     })
+  //     .catch(e => console.log(e))
+  // }else {
+  //   console.log("no es visible y el puesto superior no es 0",{ visible,"p": getValues('puestosuperior')})
+  // }
+
 
   const changeTab = (_event, newValue) => setTab(newValue);