Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ERM-3041 Dashboard: the "unsaved changes" confirmation modal is missing #663

Merged
merged 13 commits into from
Mar 12, 2024
Merged
Prev Previous commit
Next Next commit
fix: WIP Swap to ref based checks
Currently not reading properly on useEffect cleanup, got to work out why formSpyRef isn't properly read in unblock cleanup function
EthanFreestone committed Mar 6, 2024
commit 6b36b5af7818a96d9a723a6a6f1871ed3ad81817
29 changes: 19 additions & 10 deletions lib/hooks/useErmForm.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import { Form as FinalForm, FormSpy } from 'react-final-form';
import { useHistory } from 'react-router-dom';
@@ -13,28 +13,35 @@
const useErmForm = ({ navigationCheck = true } = {}) => {
const [openModal, setOpenModal] = useState(false);
const [nextLocation, setNextLocation] = useState(null);
const [dirty, setDirty] = useState(false);
console.log('openModal %o', openModal);
console.log('nextLocation %o', nextLocation);
console.log('dirty %o', dirty);

const formSpyRef = useRef();

const history = useHistory();
const intl = useIntl();

useEffect(() => {
if (navigationCheck) {
// Is this whole history.unblock a stale function? Maybe have the whole thing in state or ref?
const unblock = history.block((nextLoc) => {
const shouldPrompt = dirty && !nextLoc;
// Due to stale closure probolems, grab current state from "state updator" pattern
console.log("FORMSPYREF (FIRST): %o", formSpyRef);

Check warning on line 27 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 27 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote

Check warning on line 27 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 27 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote
const shouldPrompt = !!formSpyRef.current && formSpyRef.current.dirty && !formSpyRef.current.submitSucceeded && !formSpyRef.current.submitting;
console.log("FORMSPYREF: %o", formSpyRef);

Check warning on line 29 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 29 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote

Check warning on line 29 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 29 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote
console.log("shouldPrompt: %o", shouldPrompt);

Check warning on line 30 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 30 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote

Check warning on line 30 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Unexpected console statement

Check failure on line 30 in lib/hooks/useErmForm.js

GitHub Actions / github-actions-ci

Strings must use singlequote

if (shouldPrompt) {
setOpenModal(true);
setNextLocation(nextLoc);
}

return !shouldPrompt;
});
return unblock;
}
return () => { };
}, [history, navigationCheck, dirty]);

return () => {
};
}, [history, navigationCheck]);

// const continueNavigation = (ctx) => {
// const { pathname, search } = nextLocation;
@@ -64,15 +71,17 @@
<>
<FinalForm
{...formOptions}
decorators={[focusOnErrors, ...formOptions.decorators || []]}
decorators={[focusOnErrors, ...(formOptions.decorators || [])]}
initialValues={initialValues}
mutators={{ ...formOptions.mutators, ...arrayMutators }}
onSubmit={onSubmit}
render={(formProps) => (
<>
<FormComponent {...formProps} />
<FormSpy
onChange={(state) => setDirty(state.dirty)}
onChange={state => {
formSpyRef.current = state;
}}
subscription={{
dirty: true,
submitSucceeded: true,