Merge pull request #99 from irontec/error-fixing

Error fixing
irontec · Sep 27, 2023 · 05d6c0c · 05d6c0c
2 parents a12e88c + 4278a11
commit 05d6c0c
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 15 deletions.
diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

diff --git a/library/src/components/Create.tsx b/library/src/components/Create.tsx
@@ -13,6 +13,7 @@ import _ from '../services/translations/translate';
 import { useStoreActions } from '../store';
 import ErrorBoundary from './ErrorBoundary';
 import { getMarshallerWhiteList } from './form.helper';
+import { FormikHelpers } from 'formik';
 
 type CreateProps = EntityInterface & {
   entityService: EntityService;
@@ -83,7 +84,10 @@ const Create = (props: CreateProps) => {
 
   initialValues = unmarshaller(initialValues, properties);
 
-  const onSubmit = async (values: EntityValues) => {
+  const onSubmit = async (
+    values: EntityValues,
+    actions: FormikHelpers<EntityValues>
+  ) => {
     const whitelist = getMarshallerWhiteList({
       filterBy,
       fixedValues,
@@ -128,6 +132,8 @@ const Create = (props: CreateProps) => {
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      actions.setSubmitting(false);
     }
   };
 

diff --git a/library/src/components/Edit.tsx b/library/src/components/Edit.tsx
@@ -13,6 +13,7 @@ import { getMarshallerWhiteList } from './form.helper';
 import withRowData from './withRowData';
 import { Box } from '@mui/material';
 import _ from '../services/translations/translate';
+import { FormikHelpers } from 'formik';
 
 type EditProps = EntityInterface & {
   entityService: EntityService;
@@ -80,7 +81,10 @@ const Edit: any = (props: EditProps) => {
     ...unmarshaller(row, properties),
   };
 
-  const onSubmit = async (values: EntityValues) => {
+  const onSubmit = async (
+    values: EntityValues,
+    actions: FormikHelpers<EntityValues>
+  ) => {
     const putPath = entityService.getPutPath();
     if (!putPath) {
       throw new Error('Unknown item path');
@@ -129,6 +133,8 @@ const Edit: any = (props: EditProps) => {
       }
     } catch (error) {
       console.error(error);
+    } finally {
+      actions.setSubmitting(false);
     }
   };
 

diff --git a/library/src/entities/DefaultEntityBehavior/Form/Form.tsx b/library/src/entities/DefaultEntityBehavior/Form/Form.tsx
@@ -30,6 +30,7 @@ import filterFieldsetGroups, {
 import FormFieldMemo from './FormField';
 import { useFormHandler } from './useFormHandler';
 import { validationErrosToJsxErrorList } from './validationErrosToJsxErrorList';
+import { FormikHelpers } from 'formik';
 
 export type FormOnChangeEvent = React.ChangeEvent<{ name: string; value: any }>;
 export type PropertyFkChoices = DropdownChoices;
@@ -55,11 +56,21 @@ export interface FormProps {
   filterValues?: FilterValuesType;
   filterBy?: string | undefined;
   initialValues: EntityValues;
-  onSubmit: (values: EntityValues) => Promise<void>;
+  onSubmit: (
+    values: EntityValues,
+    imperativeMethods: FormikHelpers<EntityValues>
+  ) => Promise<void>;
 }
 
 export type EntityFormProps = FormProps &
-  Pick<EntityInterface, 'validator' | 'foreignKeyGetter' | 'properties' | 'marshaller' | 'unmarshaller'>;
+  Pick<
+    EntityInterface,
+    | 'validator'
+    | 'foreignKeyGetter'
+    | 'properties'
+    | 'marshaller'
+    | 'unmarshaller'
+  >;
 export type EntityFormType = (props: EntityFormProps) => JSX.Element | null;
 const Form: EntityFormType = (props) => {
   const {
@@ -151,6 +162,8 @@ const Form: EntityFormType = (props) => {
       <form
         onSubmit={(e) => {
           if (formik.isSubmitting) {
+            e.preventDefault();
+            e.stopPropagation();
             return false;
           }
 

diff --git a/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx b/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx
@@ -1,5 +1,5 @@
 import { useFormik } from 'formik';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   EntityValues,
@@ -8,6 +8,7 @@ import {
   useFormikType,
 } from '../../../services';
 import { EntityFormProps } from './Form';
+import { useRememberValues, useStoredValues } from './useRememberValues';
 
 type UseFormHandlerProps = Pick<
   EntityFormProps,
@@ -34,6 +35,8 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => {
 
   const params = useParams();
   const instanceRef = useRef<useFormikType | undefined>();
+  const [firstRun, setFirstRun] = useState(true);
+  const storedValues = useStoredValues();
 
   const formik: useFormikType = useFormik({
     initialValues,
@@ -103,7 +106,7 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => {
 
       return validationErrors;
     },
-    onSubmit: (values: EntityValues) => {
+    onSubmit: (values, imperativeMethods) => {
       const visibleFields = instanceRef.current?.visibleFields || [];
 
       const filteredValues: EntityValues = {};
@@ -114,10 +117,20 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => {
         filteredValues[idx] = values[idx];
       }
 
-      onSubmitCallback(filteredValues);
+      onSubmitCallback(filteredValues, imperativeMethods);
     },
   });
 
+  if (firstRun && Object.keys(storedValues).length) {
+    setFirstRun(false);
+    formik.setValues({
+      ...formik.values,
+      ...storedValues,
+    });
+  }
+
+  useRememberValues(formik);
+
   instanceRef.current = formik;
   return formik;
 };

diff --git a/...tityBehavior/Form/useRememberedValues.tsx → ...EntityBehavior/Form/useRememberValues.tsx b/...tityBehavior/Form/useRememberedValues.tsx → ...EntityBehavior/Form/useRememberValues.tsx
@@ -9,9 +9,9 @@ interface StoredValuesInterface {
   values: Values;
 }
 
-const useRememberedValues = function (formik: useFormikType): Values {
-  const SESSION_STORAGE_KEY = 'form-values';
+const SESSION_STORAGE_KEY = 'ivoz-ui-stored-form-values';
 
+const useStoredValues = function (): Values {
   const match = useCurrentPathMatch();
   const [response, setResponse] = useState({});
 
@@ -25,16 +25,22 @@ const useRememberedValues = function (formik: useFormikType): Values {
     .map((nav) => (nav as PerformanceNavigationTiming).type)
     .includes('reload');
 
-  const applyStoresValues =
+  const applyStoredValues =
     reloadedPage &&
     storedValues &&
     storedValues.url === match.pathname &&
     JSON.stringify(storedValues.values) !== JSON.stringify(response);
 
-  if (applyStoresValues) {
+  if (applyStoredValues) {
     setResponse(storedValues.values);
   }
 
+  return response;
+};
+
+const useRememberValues = function (formik: useFormikType): void {
+  const match = useCurrentPathMatch();
+
   useEffect(() => {
     const onUnload = () => {
       const changedValues: Record<string, string | number> = {};
@@ -61,8 +67,6 @@ const useRememberedValues = function (formik: useFormikType): Values {
       sessionStorage.removeItem(SESSION_STORAGE_KEY);
     };
   }, [formik]);
-
-  return response;
 };
 
-export default useRememberedValues;
+export { useRememberValues, useStoredValues };