Set field-specific validation messsage in store #6898

Author: Shelob9

ui/js/dfv/src/components/connected-field-wrapper.js

@@ -43,6 +43,7 @@ const ConnectedFieldWrapper = compose( [
 		return {
 			...valueData,
 			allPodValues,
+			storeKey,
 		};
 	} ),
 	withDispatch( ( storeDispatch, ownProps ) => {

ui/js/dfv/src/components/field-wrapper/index.js

@@ -48,6 +48,7 @@ export const FieldWrapper = ( props ) => {
 		values,
 		setOptionValue,
 		allPodValues,
+		storeKey,
 	} = props;
 
 	const {
@@ -139,7 +140,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.

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

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,

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

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: {

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