[DEV] test 2

front2/src/components/popup/TrackEditPopUp.tsx

@@ -20,7 +20,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Album, Track } from '@/back-api';
 import { FormGroup } from '@/components/form/FormGroup';
-import { useFormidable } from '@/components/form/Formidable';
 import { SelectMultiple } from '@/components/form/SelectMultiple';
 import { SelectSingle } from '@/components/form/SelectSingle';
 import { useOrderedAlbums } from '@/service/Album';
@@ -31,6 +30,25 @@ import { isNullOrUndefined } from '@/utils/validator';
 
 export type TrackEditPopUpProps = {};
 
+const getDifferences = (obj1: any, obj2: any): { [key: string]: boolean } => {
+  const result: { [key: string]: boolean } = {};
+  for (const key in obj1) {
+    if (obj1.hasOwnProperty(key)) {
+      result[key] = obj1[key] !== obj2[key];
+    }
+  }
+  return result;
+};
+
+const hasAnyTrue = (obj: { [key: string]: boolean }): boolean => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] === true) {
+      return true;
+    }
+  }
+  return false;
+};
+
 export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
   const { trackId } = useParams();
   const { dataGenders } = useOrderedGenders(undefined);
@@ -51,15 +69,65 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
   };
   const initialRef = useRef(null);
   const finalRef = useRef(null);
-  const form = useFormidable<Track>({
+  const form = useForm<Track>({
-    //onSubmit,
+    onSubmit,
-    //onValuesChange,
+    onValuesChange,
-    initialValues: dataTrack,
+    initialValues: { ...dataTrack },
-    //onValid: () => console.log('onValid'),
+    onValid: () => console.log('onValid'),
-    //onInvalid: () => console.log('onInvalid'),
+    onInvalid: () => console.log('onInvalid'),
   });
+  const formValues = useFormFields({
+    connect: form,
+    selector: (field) => field.value,
+  });
+  /*
+  const formValues = useFormFields({
+    connect: form,
+    fields: ['genderId'] as const,
+    selector: 'value',
+  });
+  */
+  console.log(`dataTrack : ${JSON.stringify(dataTrack, null, 2)}`);
+  console.log(`Redraw : ${JSON.stringify(formValues, null, 2)}`);
+  const [newData, setNewData] = useState<Track>();
+  const [changeData, setChangeData] = useState<{ [key: string]: boolean }>();
+  const [changeOneData, setChangeOneData] = useState<boolean>(true);
+  // initialize value when ready
+  useEffect(() => {
+    setNewData(dataTrack);
+  }, [dataTrack, setNewData, setChangeData]);
+
+  useEffect(() => {
+    if (!newData) {
+      return;
+    }
+    const ret = getDifferences(dataTrack, newData);
+    setChangeData(ret);
+    ///////////////////////setChangeOneData(hasAnyTrue(ret));
+    console.log(
+      `ChangeData=${JSON.stringify(ret, null, 2)} ChangeOneData=${hasAnyTrue(ret)}`
+    );
+  }, [dataTrack, newData, setChangeData, setChangeOneData]);
+
+  // const onChangeValue = (key: string, data) => {
+  //   console.log(`[${key}] data: ${data}`);
+  //   setNewData((previous) => {
+  //     if (previous === undefined) {
+  //       return previous;
+  //     }
+  //     if (previous[key] === data) {
+  //       return previous;
+  //     }
+  //     const tmp = { ...previous };
+  //     tmp[key] = data;
+  //     console.log(`data = ${JSON.stringify(tmp, null, 2)}`);
+  //     return tmp;
+  //   });
+  // };
 
   return (
+    <Formiz connect={form} autoForm>
+      <form noValidate onSubmit={form.submit}>
         <Modal
           initialFocusRef={initialRef}
           finalFocusRef={finalRef}
@@ -77,7 +145,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
                 <FormLabel>Title</FormLabel>
                 <Input
                   ref={initialRef}
-              value={form.values.name}
+                  value={formValues.name}
                   onChange={(e) => form.setValues({ name: e.target.value })}
                 />
               </FormGroup>
@@ -85,23 +153,31 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
               <FormGroup>
                 <label>Description</label>
                 <Textarea
-              value={form.values.description}
+                  value={formValues.description}
-              onChange={(e) => form.setValues({ description: e.target.value })}
+                  onChange={(e) =>
+                    form.setValues({ description: e.target.value })
+                  }
                 />
               </FormGroup>
               <FormGroup>
                 <label>Gender</label>
                 <SelectSingle
-              value={form.values.genderId}
+                  value={formValues.genderId}
                   options={dataGenders}
-              onChange={(value) => form.setValues({ genderId: value })}
+                  onChange={(value) => {
+                    form.setValues({ genderId: value });
+                    console.log(`event change value: ${value}`);
+                    console.log(
+                      `values: ${JSON.stringify(formValues, null, 2)}`
+                    );
+                  }}
                   keyValue="name"
                 />
               </FormGroup>
               <FormGroup>
                 <label>Artist(s)</label>
                 <SelectMultiple
-              values={form.values.artists}
+                  values={formValues.artists}
                   options={dataArtist}
                   onChange={(value) => form.setValues({ artists: value })}
                   keyValue="name"
@@ -110,7 +186,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
               <FormGroup>
                 <label>Album</label>
                 <SelectSingle
-              value={form.values.albumId}
+                  value={formValues.albumId}
                   options={dataAlbums}
                   onChange={(value) => form.setValues({ albumId: value })}
                   keyValue="name"
@@ -119,13 +195,13 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
               <FormControl>
                 <FormLabel>track n°</FormLabel>
                 <NumberInput
-              value={form.values.track}
+                  value={formValues.track}
                   onChange={(value) => form.setValues({ track: value })}
                 />
               </FormControl>
             </ModalBody>
             <ModalFooter>
-          {form.isFormModified && (
+              {changeOneData && (
                 <Button colorScheme="blue" mr={3} type="submit">
                   Save
                 </Button>
@@ -134,5 +210,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
             </ModalFooter>
           </ModalContent>
         </Modal>
+      </form>
+    </Formiz>
   );
 };