From c4b3c330195c3b0f6f1b16ee2b53f81783abfee3 Mon Sep 17 00:00:00 2001
From: josh <jpollock412@gmail.com>
Date: Fri, 21 Apr 2023 12:08:20 -0400
Subject: [PATCH] Set field-specific validation messsage in store #6898

---
 .../src/components/connected-field-wrapper.js |  1 +
 .../dfv/src/components/field-wrapper/index.js |  5 ++++-
 .../field-wrapper/subfield-wrapper.js         |  3 ++-
 ui/js/dfv/src/hooks/useValidation.js          | 22 ++++++++++++++-----
 ui/js/dfv/src/store/actions.js                |  3 ++-
 ui/js/dfv/src/store/reducer.js                |  5 ++++-
 ui/js/dfv/src/store/selectors.js              |  3 +++
 7 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/ui/js/dfv/src/components/connected-field-wrapper.js b/ui/js/dfv/src/components/connected-field-wrapper.js
index 111e16ee7d..87c4bb210d 100644
--- a/ui/js/dfv/src/components/connected-field-wrapper.js
+++ b/ui/js/dfv/src/components/connected-field-wrapper.js
@@ -43,6 +43,7 @@ const ConnectedFieldWrapper = compose( [
 		return {
 			...valueData,
 			allPodValues,
+			storeKey,
 		};
 	} ),
 	withDispatch( ( storeDispatch, ownProps ) => {
diff --git a/ui/js/dfv/src/components/field-wrapper/index.js b/ui/js/dfv/src/components/field-wrapper/index.js
index daea0685c2..21d55be843 100644
--- a/ui/js/dfv/src/components/field-wrapper/index.js
+++ b/ui/js/dfv/src/components/field-wrapper/index.js
@@ -47,6 +47,7 @@ export const FieldWrapper = ( props ) => {
 		values,
 		setOptionValue,
 		allPodValues,
+		storeKey,
 	} = props;
 
 	const {
@@ -138,7 +139,9 @@ export const FieldWrapper = ( props ) => {
 				condition: () => true === toBool( required ),
 			},
 		],
-		value
+		value,
+		name,
+		storeKey
 	);
 
 	// Don't render a field that hasn't had its dependencies met.
diff --git a/ui/js/dfv/src/components/field-wrapper/subfield-wrapper.js b/ui/js/dfv/src/components/field-wrapper/subfield-wrapper.js
index d598e42801..4090232924 100644
--- a/ui/js/dfv/src/components/field-wrapper/subfield-wrapper.js
+++ b/ui/js/dfv/src/components/field-wrapper/subfield-wrapper.js
@@ -69,7 +69,8 @@ const SubfieldWrapper = ( {
 	// Subfields get their own set of validation rules
 	const [ validationMessages, addValidationRules ] = useValidation(
 		[],
-		value
+		value,
+		subfieldConfig.name
 	);
 
 	// Set up useSortable hook
diff --git a/ui/js/dfv/src/hooks/useValidation.js b/ui/js/dfv/src/hooks/useValidation.js
index 2c550c4954..8607dcbf87 100644
--- a/ui/js/dfv/src/hooks/useValidation.js
+++ b/ui/js/dfv/src/hooks/useValidation.js
@@ -1,8 +1,22 @@
 import { useState, useEffect } from 'react';
+import {
+	useSelect,
+	useDispatch,
+} from '@wordpress/data';
 
-const useValidation = ( defaultRules = [], value ) => {
+const useValidation = ( defaultRules = [], value, fieldName, strokeKey ) => {
 	const [ validationRules, setValidationRules ] = useState( defaultRules );
-	const [ validationMessages, setValidationMessages ] = useState( [] );
+
+	const validationMessages = useSelect( ( select ) => {
+		const currentMessages = select( strokeKey ).getValidationMessages();
+		//has fieldName ?
+		if ( currentMessages.hasOwnProperty( fieldName ) ) {
+			return currentMessages[ fieldName ];
+		}
+		return [];
+	}, [ fieldName ] );
+
+	const { setValidationMessages } = useDispatch( strokeKey );
 
 	useEffect( () => {
 		const newMessages = [];
@@ -20,8 +34,7 @@ const useValidation = ( defaultRules = [], value ) => {
 				}
 			}
 		} );
-
-		setValidationMessages( newMessages );
+		setValidationMessages( fieldName, newMessages );
 	}, [ value ] );
 
 	const addValidationRules = ( rules = [] ) => {
@@ -34,7 +47,6 @@ const useValidation = ( defaultRules = [], value ) => {
 			} );
 		} );
 	};
-
 	return [
 		validationMessages,
 		addValidationRules,
diff --git a/ui/js/dfv/src/store/actions.js b/ui/js/dfv/src/store/actions.js
index fe5f24b8c2..7940188b85 100644
--- a/ui/js/dfv/src/store/actions.js
+++ b/ui/js/dfv/src/store/actions.js
@@ -335,10 +335,11 @@ export const deleteField = ( fieldID, name ) => {
 };
 
 //Set the validation messages
-export const setValidationMessages = ( validationMessages ) => {
+export const setValidationMessages = ( fieldName, validationMessages ) => {
 	return {
 		type: CURRENT_POD_ACTIONS.SET_VALIDATION_MESSAGES,
 		validationMessages,
+		fieldName,
 	};
 };
 
diff --git a/ui/js/dfv/src/store/reducer.js b/ui/js/dfv/src/store/reducer.js
index e6d069d34a..d2d75aefd0 100644
--- a/ui/js/dfv/src/store/reducer.js
+++ b/ui/js/dfv/src/store/reducer.js
@@ -354,7 +354,10 @@ export const currentPod = ( state = {}, action = {} ) => {
 		case CURRENT_POD_ACTIONS.SET_VALIDATION_MESSAGES: {
 			return {
 				...state,
-				validationMessages: action.validationMessages,
+				validationMessages: {
+					...state.validationMessages,
+					[ action.fieldName ]: action.validationMessages,
+				},
 			};
 		}
 		case CURRENT_POD_ACTIONS.TOGGLE_NEEDS_VALIDATING: {
diff --git a/ui/js/dfv/src/store/selectors.js b/ui/js/dfv/src/store/selectors.js
index aad7b75ca6..c366ac2870 100644
--- a/ui/js/dfv/src/store/selectors.js
+++ b/ui/js/dfv/src/store/selectors.js
@@ -42,6 +42,9 @@ export const getPodOptions = ( state ) => CURRENT_POD.getFrom( state );
 
 export const getPodOption = ( state, key ) => CURRENT_POD.getFrom( state )[ key ];
 
+//Get all validation messages
+export const getValidationMessages = ( state ) => CURRENT_POD.getFrom( state ).validationMessages;
+export const getNeedsValidating = ( state ) => CURRENT_POD.getFrom( state ).needsValidating;
 //-- Pod Groups
 export const getGroups = ( state ) => GROUPS.getFrom( state );