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

Add checkValidation and isValid methods to window.podsDFV #7064

Open
wants to merge 24 commits into
base: main
Choose a base branch
from

Conversation

Shelob9
Copy link
Contributor

@Shelob9 Shelob9 commented Apr 20, 2023

Description

Add checkValidation and isValid methods to window.podsDFV

What we need:

  • The two new methods
  • A way to get the validation messages in podsDFV
    • Moving validation state out of useValidation hook's local state, and into a store will with action and selector can solve for this.
    • const [ validationRules, setValidationRules ] = useState( defaultRules );
      const [ validationMessages, setValidationMessages ] = useState( [] );
  • A way to trigger validation of Pods fields without submitting form.
    • Once in store, add a needsRevalidate bool in store. Make it a dependency of this effect.
    • useEffect( () => {
      const newMessages = [];
      validationRules.forEach( ( rule ) => {
      if ( ! rule.condition() ) {
      return;
      }
      try {
      rule.rule( value );
      } catch ( error ) {
      if ( typeof error === 'string' ) {
      newMessages.push( error );
      }
      }
      } );
      setValidationMessages( newMessages );
      }, [ value ] );
  • prevent save when fields are invalid.

Related GitHub issue(s)

Fixes #6898

Testing

  • Make pod have invalid state
  • run widow.PodsDFV.formIsValid() in console, expect false
  • run window.PodsDFV.getValidationMessages() in console, expect to see messages
  • Make pod have valid state
  • run widow.PodsDFV.formIsValid() in console, expect true
  • run window.PodsDFV.getValidationMessages() in console, expect not to see messages

Changelog text for these changes

  • Added: New getValidationMessages method to window.podsDFV
  • Added: New formIsValid method to window.podsDFV
  • Fixed: Notice component, with two messages, used the same key, generating React warning.

PR checklist

ui/js/dfv/src/pods-dfv.js Outdated Show resolved Hide resolved
@what-the-diff
Copy link

what-the-diff bot commented Apr 25, 2023

PR Summary

  • Updated Dependency Version
    The version of a dependency crucial for the functioning of our application has been updated. This improves the reliability and performance of our application's UI.

  • Added 'storeKey'
    A key named storeKey has been added to several components and objects in our application. This enables better data tracking and state management, leading to a more effective and reliable application.

  • Dynamic 'key' Prop in 'Notice' Component
    The key prop in our Notice component now changes based on the message it houses. This provides unique identifiers to each unique message and improves handling and tracking performance.

  • Improved Email Validation
    Our email validation function now checks if an entered value exists before applying the validation test, reducing unnecessary computation and potential error occurrences.

  • Validation Message Control
    The components are now equipped to update validation messages and validation needs state more effectively with the use of an enhanced useValidation hook.

  • Form Validation Functions
    We have introduced new functions to check and retrieve validation messages for a form. This aids in user-feedback and form submission flow, improving user experience.

  • Validation State Management
    Our state management has been expanded to include validation message states and state change functionalities, ensuring smoother and more reliable validation experiences.

  • Enhanced Test Cases
    Updated and newly added test cases help in verifying the functionality and reliability of new actions related to the validation system. This ensures the robust stability of our updates.

Copy link
Member

@sc0ttkclark sc0ttkclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great so far

@sc0ttkclark sc0ttkclark added this to the Pods 3.0 milestone Apr 25, 2023
@sc0ttkclark sc0ttkclark added the Type: Feature Features that add entirely new functionality that was not there before label Apr 25, 2023
@sc0ttkclark sc0ttkclark changed the base branch from main to release/3.0 April 25, 2023 02:40
@Shelob9
Copy link
Contributor Author

Shelob9 commented Apr 25, 2023

This PR is completed for #6898

Note: Does not prevent save when fields are invalid.

@Shelob9 Shelob9 marked this pull request as ready for review April 25, 2023 15:06
sc0ttkclark
sc0ttkclark previously approved these changes Apr 25, 2023
@Shelob9
Copy link
Contributor Author

Shelob9 commented Apr 25, 2023

New TODO list:

  • Initialize state in pod editor f651e06
  • Only show validation messages on submit

@Shelob9
Copy link
Contributor Author

Shelob9 commented Jul 13, 2023

@sc0ttkclark I am looking at how to show validation messages when saving and also how to block saving. Here are some notes for me and/ or you.

  • core/block/editor data module as lockPostSaving and unlockPostSaving https://developer.wordpress.org/block-editor/reference-guides/data/data-core-editor/#lockpostsaving
  • In the classic editor, not sure how to block saving beside disable button with the JavaScript.
  • I have already added isValidating and way to dispatch validation.
    • const needsValidation = useSelect( ( select ) => {
      return select( storeKey ).getNeedsValidating();
      }, [] );
      const toggleNeedsValidating = useDispatch( storeKey ).toggleNeedsValidating();
    • //Set the validation messages
      export const setValidationMessages = ( fieldName, validationMessages ) => {
      return {
      type: CURRENT_POD_ACTIONS.SET_VALIDATION_MESSAGES,
      validationMessages,
      fieldName,
      };
      };
      //Toggle if needs validation of the pod
      export const toggleNeedsValidating = () => {
      return {
      type: CURRENT_POD_ACTIONS.TOGGLE_NEEDS_VALIDATING,
      };
      };

@Shelob9
Copy link
Contributor Author

Shelob9 commented Jul 14, 2023

Something like this in PodsDFVApp could tell us if the post is being saved or not. This works.

       //Track when post is being saved so we can trigger validation
	const [isPostSaving,setIsPostSaving] = useState(false);
	//subscribe to "core/core-editor" to track when post is being saved
	useEffect( () => {
		const editor = select( 'core/editor' );
    	        const unsubscribe = subscribe( () => {
			setIsPostSaving(editor.isSavingPost());
		} );
		//Clean up when component unmounts
		return unsubscribe;

	}, [select,subscribe,setIsPostSaving] );

I tried to do this in ConnectedFieldWrapper using the withSelect and could not get editor to be defined:

const editor = storeSelect( 'core/editor' );
const isEditorSaving = editor.isSavingPost();
const isEditorSavingLocked = editor.isSavingLocked();

@sc0ttkclark
Copy link
Member

@Shelob9 Here's what I ended up having to do to workaround the bug with locking post saving (both when post has not yet been published and on subsequent saves which have slightly different timing):

WordPress/gutenberg#49811 (comment)

@sc0ttkclark sc0ttkclark modified the milestones: Pods 3.1, Pods 3.2 Sep 4, 2023
Base automatically changed from release/3.0 to main September 13, 2023 14:43
@sc0ttkclark sc0ttkclark dismissed their stale review September 13, 2023 14:43

The base branch was changed.

@sc0ttkclark sc0ttkclark modified the milestones: Pods 3.2, Pods 3.3 Dec 11, 2023
@JoryHogeveen JoryHogeveen modified the milestones: Pods 3.3, Pods 3.2 Feb 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Feature Features that add entirely new functionality that was not there before
Projects
Status: 👀 In Review / QA
Development

Successfully merging this pull request may close these issues.

Add checkValidation and isValid methods to window.PodsDFV
4 participants