From 308b595889f3b61c7e0df7b7792e8c72fb861273 Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Wed, 27 Sep 2023 15:13:43 +0200 Subject: [PATCH 1/3] handle formik.isSubmitting state properly --- library/src/components/Create.tsx | 8 +++++++- library/src/components/Edit.tsx | 8 +++++++- .../DefaultEntityBehavior/Form/Form.tsx | 17 +++++++++++++++-- .../Form/useFormHandler.tsx | 4 ++-- 4 files changed, 31 insertions(+), 6 deletions(-) diff --git a/library/src/components/Create.tsx b/library/src/components/Create.tsx index 19b8650..eecd0f5 100644 --- 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 + ) => { 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 index eb0c2a2..b1dfdad 100644 --- 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 + ) => { 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 index 88ace8c..532a0f9 100644 --- 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; + onSubmit: ( + values: EntityValues, + imperativeMethods: FormikHelpers + ) => Promise; } export type EntityFormProps = FormProps & - Pick; + 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) => {
{ 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 index 7d6997e..164b699 100644 --- a/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx +++ b/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx @@ -103,7 +103,7 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => { return validationErrors; }, - onSubmit: (values: EntityValues) => { + onSubmit: (values, imperativeMethods) => { const visibleFields = instanceRef.current?.visibleFields || []; const filteredValues: EntityValues = {}; @@ -114,7 +114,7 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => { filteredValues[idx] = values[idx]; } - onSubmitCallback(filteredValues); + onSubmitCallback(filteredValues, imperativeMethods); }, }); From 7906c525dd14f2cc86b238b81198b3773419f8fc Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Wed, 27 Sep 2023 16:05:45 +0200 Subject: [PATCH 2/3] remember form values on f5 --- .../Form/useFormHandler.tsx | 15 ++++++++++++++- ...emberedValues.tsx => useRememberValues.tsx} | 18 +++++++++++------- 2 files changed, 25 insertions(+), 8 deletions(-) rename library/src/entities/DefaultEntityBehavior/Form/{useRememberedValues.tsx => useRememberValues.tsx} (83%) diff --git a/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx b/library/src/entities/DefaultEntityBehavior/Form/useFormHandler.tsx index 164b699..cbfe2d1 100644 --- 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(); + const [firstRun, setFirstRun] = useState(true); + const storedValues = useStoredValues(); const formik: useFormikType = useFormik({ initialValues, @@ -118,6 +121,16 @@ const useFormHandler = (props: UseFormHandlerProps): useFormikType => { }, }); + if (firstRun && Object.keys(storedValues).length) { + setFirstRun(false); + formik.setValues({ + ...formik.values, + ...storedValues, + }); + } + + useRememberValues(formik); + instanceRef.current = formik; return formik; }; diff --git a/library/src/entities/DefaultEntityBehavior/Form/useRememberedValues.tsx b/library/src/entities/DefaultEntityBehavior/Form/useRememberValues.tsx similarity index 83% rename from library/src/entities/DefaultEntityBehavior/Form/useRememberedValues.tsx rename to library/src/entities/DefaultEntityBehavior/Form/useRememberValues.tsx index a8cb500..77066cf 100644 --- a/library/src/entities/DefaultEntityBehavior/Form/useRememberedValues.tsx +++ b/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 = {}; @@ -61,8 +67,6 @@ const useRememberedValues = function (formik: useFormikType): Values { sessionStorage.removeItem(SESSION_STORAGE_KEY); }; }, [formik]); - - return response; }; -export default useRememberedValues; +export { useRememberValues, useStoredValues }; From 4278a117ed5e620eef6a9bbf44b05e015385d132 Mon Sep 17 00:00:00 2001 From: Mikel Madariaga Date: Wed, 27 Sep 2023 16:18:02 +0200 Subject: [PATCH 3/3] version bump --- library/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/package.json b/library/package.json index 0294723..efc8916 100644 --- 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",