From af5a3b34d07c880857706db9d022ceb2f5a1ec6b Mon Sep 17 00:00:00 2001 From: Micheal Wells Date: Tue, 5 Dec 2023 10:30:21 -0800 Subject: [PATCH] get v2 form state changes merge worthy --- .../Records/Activity/form/FormContainer.tsx | 38 ++++++++----------- appv2/src/main.tsx | 1 + .../rjsf/business-rules/customValidation.ts | 5 +-- appv2/src/state/sagas/activity.ts | 2 +- 4 files changed, 20 insertions(+), 26 deletions(-) diff --git a/appv2/src/UI/Overlay/Records/Activity/form/FormContainer.tsx b/appv2/src/UI/Overlay/Records/Activity/form/FormContainer.tsx index 31319f788..7a1362b4a 100644 --- a/appv2/src/UI/Overlay/Records/Activity/form/FormContainer.tsx +++ b/appv2/src/UI/Overlay/Records/Activity/form/FormContainer.tsx @@ -24,11 +24,7 @@ import MultiSelectAutoComplete from 'rjsf/widgets/MultiSelectAutoComplete'; import SingleSelectAutoComplete from 'rjsf/widgets/SingleSelectAutoComplete'; import rjsfTheme from 'UI/Overlay/Records/Activity/form/rjsfTheme'; import ChemicalTreatmentDetailsForm from './ChemicalTreatmentDetailsForm/ChemicalTreatmentDetailsForm'; -import PasteButtonComponent from './PasteButtonComponent'; import { useSelector } from 'util/use_selector'; -import { selectAuth } from 'state/reducers/auth'; -import { selectConfiguration } from 'state/reducers/configuration'; -import { selectActivity } from 'state/reducers/activity'; import { useDispatch } from 'react-redux'; import { ACTIVITY_CHEM_TREATMENT_DETAILS_FORM_ON_CHANGE_REQUEST, ACTIVITY_ON_FORM_CHANGE_REQUEST } from 'state/actions'; import { selectUserSettings } from 'state/reducers/userSettings'; @@ -74,9 +70,8 @@ export interface IFormContainerProps { const FormContainer: React.FC = (props) => { const activityState = useSelector((state) => state.ActivityPage.activity); const dispatch = useDispatch(); - console.log('rendering') - const debouncedFormChange = + const debouncedFormChange = _.debounce((event, ref, lastField, callbackFun) => { //(event, ref, lastField, callbackFun) => { dispatch({ @@ -91,13 +86,16 @@ const FormContainer: React.FC = (props) => { const [open, setOpen] = React.useState(false); const [alertMsg, setAlertMsg] = React.useState(null); const [field, setField] = React.useState(''); - const { authenticated } = useSelector(selectAuth); - const authState = useSelector(selectAuth); - const { MOBILE } = useSelector(selectConfiguration); + const authenticated = useSelector((state) => state.Auth.authenticated); + const username = useSelector((state) => state.Auth.username); + const accessRoles = useSelector((state) => state.Auth.accessRoles); + + const MOBILE = useSelector((state) => state.Configuration.current.MOBILE); const { darkTheme } = useSelector(selectUserSettings); - const userSettingsState = useSelector(selectUserSettings); + const apiDocsWithViewOptions = useSelector((state) => state.UserSettings.apiDocsWithViewOptions); + const apiDocsWithSelectOptions = useSelector((state) => state.UserSettings.apiDocsWithSelectOptions); const suggestedTreatmentIDS = useSelector((state) => state.ActivityPage.suggestedTreatmentIDs); @@ -139,7 +137,6 @@ const FormContainer: React.FC = (props) => { $this.validate($this.state.formData); //update formData of the activity via onFormChange debouncedFormChange({ formData: formRef.current.state.formData }, formRef, null, (updatedFormData) => { - setformData(updatedFormData); }); }); }, 100); @@ -173,21 +170,20 @@ const FormContainer: React.FC = (props) => { useEffect(() => { const getApiSpec = async () => { - console.log('begin api spec stuff') const subtype = activityState?.activity_subtype || activityState?.activitySubtype; if (!subtype) throw new Error('Activity has no Subtype specified'); let components; - const notMine = authState?.username !== activityState?.created_by; + const notMine = username !== activityState?.created_by; const notAdmin = - authState?.accessRoles?.filter((role) => { + accessRoles?.filter((role) => { return [1,18].includes(role.role_id) }).length === 0; if (notAdmin && notMine) { - components = (userSettingsState.apiDocsWithViewOptions as any).components; + components = (apiDocsWithViewOptions as any).components; } else if (!notAdmin && notMine) { - components = (userSettingsState.apiDocsWithViewOptions as any).components; + components = (apiDocsWithViewOptions as any).components; } else { - components = (userSettingsState.apiDocsWithSelectOptions as any).components; + components = (apiDocsWithSelectOptions as any).components; } let uiSchema = RootUISchemas[subtype]; @@ -253,14 +249,13 @@ const FormContainer: React.FC = (props) => { if (authenticated) { getApiSpec(); } - console.log('end api spec stuff') }, [activityState.activity_subtype, authenticated, MOBILE, suggestedTreatmentIDS]); const [isDisabled, setIsDisabled] = useState(false); useEffect(() => { - const notMine = authState?.username !== activityState.created_by; + const notMine = username !== activityState.created_by; const notAdmin = - authState?.accessRoles?.filter((role) => { + accessRoles?.filter((role) => { return role.role_id === 18; }).length === 0; if (notAdmin && notMine) { @@ -268,7 +263,7 @@ const FormContainer: React.FC = (props) => { } else { setIsDisabled(false); } - }, [JSON.stringify(authState?.accessRoles), JSON.stringify(authState?.username)]); + }, [JSON.stringify(accessRoles), JSON.stringify(username)]); // hack to make fields rerender only on paste event const [keyInt, setKeyInt] = useState(0); @@ -309,7 +304,6 @@ const FormContainer: React.FC = (props) => { transformErrors={getCustomErrorTransformer()} autoComplete="off" onChange={(event) => { - console.log('A CHANGE') debouncedFormChange(event, formRef, focusedFieldArgs, (updatedFormData) => { //setformData(updatedFormData); }); diff --git a/appv2/src/main.tsx b/appv2/src/main.tsx index a6384c533..4313e3329 100644 --- a/appv2/src/main.tsx +++ b/appv2/src/main.tsx @@ -18,6 +18,7 @@ import(/* webpackChunkName: "app_config" */ './state/config').then(({ CONFIG }) console.log('about to render'); const root = createRoot(container); if (root) { + console.log('rendered') root.render( diff --git a/appv2/src/rjsf/business-rules/customValidation.ts b/appv2/src/rjsf/business-rules/customValidation.ts index ed28e39f8..39db3adfe 100644 --- a/appv2/src/rjsf/business-rules/customValidation.ts +++ b/appv2/src/rjsf/business-rules/customValidation.ts @@ -15,9 +15,8 @@ function combineValidators(validators: rjsfValidator[]): rjsfValidator { } export function validatorForActivity(activity, linkedActivity): rjsfValidator { - console.log('recombining validators') return combineValidators([ - /* getAreaValidator(activity.activity_subtype), + getAreaValidator(activity.activity_subtype), getDateAndTimeValidator(activity.activity_subtype), getDateAndTimeValidatorOther(activity.activity_subtype), getWindValidator(activity.activity_subtype), @@ -36,7 +35,7 @@ export function validatorForActivity(activity, linkedActivity): rjsfValidator { getJurisdictionPercentValidator(), getInvasivePlantsValidator(linkedActivity), getPlotIdentificationTreesValidator(activity.activity_subtype), - accessDescriptionMinChars()*/ + accessDescriptionMinChars() ]); } diff --git a/appv2/src/state/sagas/activity.ts b/appv2/src/state/sagas/activity.ts index 0bbfe1864..77b576b9b 100644 --- a/appv2/src/state/sagas/activity.ts +++ b/appv2/src/state/sagas/activity.ts @@ -218,7 +218,7 @@ function* activityPageSaga() { handle_ACTIVITY_GET_SUGGESTED_JURISDICTIONS_REQUEST_ONLINE ), takeLatest(ACTIVITY_GET_SUGGESTED_JURISDICTIONS_SUCCESS, handle_ACTIVITY_SET_CURRENT_HASH_REQUEST), - takeEvery(ACTIVITY_ON_FORM_CHANGE_SUCCESS, handle_ACTIVITY_SET_CURRENT_HASH_REQUEST), + takeLatest(ACTIVITY_ON_FORM_CHANGE_SUCCESS, handle_ACTIVITY_SET_CURRENT_HASH_REQUEST), takeEvery(ACTIVITY_SAVE_SUCCESS, handle_ACTIVITY_SET_SAVED_HASH_REQUEST), takeEvery(ACTIVITY_GET_SUGGESTED_PERSONS_REQUEST, handle_ACTIVITY_GET_SUGGESTED_PERSONS_REQUEST), takeEvery(ACTIVITY_GET_SUGGESTED_PERSONS_REQUEST_ONLINE, handle_ACTIVITY_GET_SUGGESTED_PERSONS_REQUEST_ONLINE),