Merge pull request #99 from irontec/error-fixing

Error fixing

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",

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);
  }
  };
 

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);
  }
  };
 

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;
  }
 

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;
 };

library/src/entities/DefaultEntityBehavior/Form/useRememberedValues.tsx → library/src/entities/DefaultEntityBehavior/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 };