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.

Sign up for GitHub

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

Jump to bottom

feat(auth-modal): onSuccess, onDismiss, and onError callbacks #3481

Merged
merged 3 commits into from
Oct 18, 2024
+50 −28
Merged

feat(auth-modal): onSuccess, onDismiss, and onError callbacks #3481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fa4bd7
feat(auth-modal): onClose callback
miguelpeixe Oct 17, 2024
cda1b5c
feat: update modal callback hooks
miguelpeixe Oct 18, 2024
ba87938
fix: improve readability of callback fn
miguelpeixe Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/reader-activation-auth/auth-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ window.newspackRAS.push( function ( readerActivation ) {
) {
callback = ( authMessage, authData ) =>
openNewslettersSignupModal( {
callback: container.authCallback( authMessage, authData ),
onSuccess: container.authCallback( authMessage, authData ),
closeOnSuccess: true,
} );
} else {
Expand Down
29 changes: 19 additions & 10 deletions src/reader-activation-auth/auth-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,29 +22,34 @@ export function openAuthModal( config = {} ) {
const modalTrigger = config.trigger;

if ( reader?.authenticated ) {
if ( config.callback ) {
config.callback();
if ( config.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
Copy link
Contributor

Choose a reason for hiding this comment

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

Non-blocking suggestion: You can remove the need for these checks throughout the PR (config.onSuccess && ... === 'function') by just calling config?.onSuccess?.()

Copy link
Member Author

@miguelpeixe miguelpeixe Oct 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This will still throw an error if onSuccess is truthy an not a function.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm, this bit should cause this to resolve as undefined when not a function: onSuccess?.()

Copy link
Member Author

Choose a reason for hiding this comment

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

I double-checked running const notAFn = true; notAFn?.(); in the console and it errored.

Copy link
Contributor

Choose a reason for hiding this comment

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

Right. This won't work on every browser, but our build process will be sure to compile this to something universally compatible. This isn't a blocker though so feel free to keep what you have!

Copy link
Contributor

Choose a reason for hiding this comment

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

For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#optional_chaining_with_function_calls

Copy link
Member Author

Choose a reason for hiding this comment

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

I'd rather keep it because the optional chaining operator will not do type validation.

}
return;
}

const container = getModalContainer();
if ( ! container ) {
if ( config.callback ) {
config.callback();
if ( config.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
}
return;
}

const modal = container.closest( '.newspack-reader-auth-modal' );
if ( ! modal ) {
if ( config.callback ) {
config.callback();
if ( config.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
}
return;
}

const close = () => {
/**
* Close the auth modal.
*
* @param {boolean} dismiss Whether it's a dismiss action.
*/
const close = ( dismiss = true ) => {
container.config = {};
modal.setAttribute( 'data-state', 'closed' );
document.body.classList.remove( 'newspack-signin' );
Expand All @@ -60,6 +65,10 @@ export function openAuthModal( config = {} ) {
if ( modalTrigger ) {
modalTrigger.focus();
}

if ( dismiss && config.onDismiss && typeof config.onDismiss === 'function' ) {
config.onDismiss();
}
};

const closeButtons = modal.querySelectorAll( 'button[data-close], .newspack-ui__modal__close' );
Expand Down Expand Up @@ -87,9 +96,9 @@ export function openAuthModal( config = {} ) {
container.config = config;

container.authCallback = ( message, data ) => {
close();
if ( config.callback ) {
config.callback( message, data );
close( false );
if ( config.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess( message, data );
}
};

Expand Down
3 changes: 2 additions & 1 deletion src/reader-activation-auth/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ window.newspackRAS.push( readerActivation => {
}

openAuthModal( {
callback,
onSuccess: callback,
onError: callback,
trigger: modalTrigger,
} );
}
Expand Down
24 changes: 16 additions & 8 deletions src/reader-activation-newsletters/newsletters-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,26 @@ export function getModalContainer() {
export function openNewslettersSignupModal( config = {} ) {
const container = getModalContainer();
if ( ! container ) {
if ( config?.callback ) {
config.callback();
if ( config?.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
}
return;
}

const modal = container.closest( '.newspack-newsletters-signup-modal' );
if ( ! modal ) {
if ( config?.callback ) {
config.callback();
if ( config?.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
}
return;
}

const close = () => {
/**
* Close the modal.
*
* @param {boolean} dismiss Whether it's a dismiss action.
*/
const close = ( dismiss = true ) => {
container.config = {};
modal.setAttribute( 'data-state', 'closed' );
if ( modal?.overlayId && window?.newspackReaderActivation?.overlays ) {
Expand All @@ -45,6 +50,9 @@ export function openNewslettersSignupModal( config = {} ) {
if ( openerContent ) {
openerContent.remove();
}
if ( dismiss && config.onDismiss && typeof config.onDismiss === 'function' ) {
config.onDismiss();
}
};

const closeButtons = modal.querySelectorAll( 'button[data-close], .newspack-ui__modal__close' );
Expand All @@ -66,10 +74,10 @@ export function openNewslettersSignupModal( config = {} ) {

container.newslettersSignupCallback = ( message, data ) => {
if ( config?.closeOnSuccess ) {
close();
close( false );
}
if ( config?.callback ) {
config.callback( message, data );
if ( config?.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess( message, data );
}
};

Expand Down
20 changes: 12 additions & 8 deletions src/reader-activation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,9 @@ export function openAuthModal( config = {} ) {
// Set default config.
config = {
...{
callback: null,
onSuccess: null,
onDismiss: null,
onError: null,
initialState: null,
skipSuccess: false,
skipNewslettersSignup: false,
Expand All @@ -165,17 +167,17 @@ export function openAuthModal( config = {} ) {
};

if ( newspack_ras_config.is_logged_in ) {
if ( config.callback ) {
config.callback();
if ( config.onSuccess && typeof config.onSuccess === 'function' ) {
config.onSuccess();
}
return;
}
if ( readerActivation._openAuthModal ) {
readerActivation._openAuthModal( config );
} else {
console.warn( 'Authentication modal not available' ); // eslint-disable-line no-console
if ( config.callback ) {
config.callback();
if ( config.onError && typeof config.onError === 'function' ) {
config.onError();
}
}
}
Expand All @@ -189,7 +191,9 @@ export function openNewslettersSignupModal( config = {} ) {
// Set default config.
config = {
...{
callback: null,
onSuccess: null,
onDissmiss: null,
onError: null,
initialState: null,
skipSuccess: false,
labels: {},
Expand All @@ -203,8 +207,8 @@ export function openNewslettersSignupModal( config = {} ) {
readerActivation._openNewslettersSignupModal( config );
} else {
console.warn( 'Newsletters signup modal not available' ); // eslint-disable-line no-console
if ( config?.callback ) {
config.callback();
if ( config?.onError && typeof config.onError === 'function' ) {
config.onError();
}
}
}
Expand Down