update: refactor notification component and context

modules/settings/assets/js/admin.js

@@ -3,7 +3,7 @@ import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import AdminTopBar from './components/admin-top-bar';
 import { PluginSettingsProvider } from './contexts/plugin-settings-context';
-import { SettingsProvider } from './hooks';
+import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
 const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
@@ -23,10 +23,12 @@ topBar.render(
 
 root.render(
 	<AppWrapper>
-		<SettingsProvider>
-			<PluginSettingsProvider>
-				<App />
-			</PluginSettingsProvider>
-		</SettingsProvider>
+		<NotificationsProvider>
+			<SettingsProvider>
+				<PluginSettingsProvider>
+					<App />
+				</PluginSettingsProvider>
+			</SettingsProvider>
+		</NotificationsProvider>
 	</AppWrapper>,
 );

modules/settings/assets/js/app.js

@@ -3,16 +3,17 @@ import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
 import { ConnectModal, Notifications } from './components';
 import { usePluginSettingsContext } from './contexts/plugin-settings-context';
-import { useSettings } from './hooks';
+import { useNotificationSettings } from './hooks';
 
 const App = () => {
 	const { isConnected } = usePluginSettingsContext();
 	const {
 		notificationMessage,
 		notificationType,
-	} = useSettings();
+	} = useNotificationSettings();
+
 	return (
-		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
+		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
 				{ ! isConnected && <ConnectModal /> }
 				<Notifications message={ notificationMessage } type={ notificationType } />

modules/settings/assets/js/components/notifications/index.js

@@ -1,14 +1,14 @@
 import Alert from '@elementor/ui/Alert';
 import Snackbar from '@elementor/ui/Snackbar';
-import { useSettings } from '../../hooks';
+import { useNotificationSettings } from '../../hooks';
 
 const Notifications = ( { type, message } ) => {
 	const {
 		showNotification,
 		setShowNotification,
 		setNotificationMessage,
 		setNotificationType,
-	} = useSettings();
+	} = useNotificationSettings();
 
 	const closeNotification = () => {
 		setShowNotification( ! showNotification );
@@ -24,7 +24,9 @@ const Notifications = ( { type, message } ) => {
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 			sx={ { zIndex: 99999 } }
 		>
-			<Alert onClose={ () => setShowNotification( ! showNotification ) } severity={ type } variant="filled" >
+			<Alert onClose={ () => setShowNotification( ! showNotification ) }
+				severity={ type }
+				variant="filled" >
 				{ message }
 			</Alert>
 		</Snackbar>

modules/settings/assets/js/contexts/plugin-settings-context.js

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import API from '../api';
-import { useToastNotification } from '../hooks/use-settings';
+import { useToastNotification } from '../hooks';
 
 const PluginSettingsContext = createContext( {} );
 

modules/settings/assets/js/hooks/index.js

@@ -1,6 +1,9 @@
 export { default as useAuth } from './use-auth';
 export { default as useModal } from './use-modal';
 export { useSettings } from './use-settings';
-export { useToastNotification } from './use-settings';
 export { default as SettingsProvider } from './use-settings';
 export { default as useStorage } from './use-storage';
+export { useToastNotification } from './use-notifications';
+export { default as NotificationsProvider } from './use-notifications';
+export { useNotificationSettings } from './use-notifications';
+

modules/settings/assets/js/hooks/use-notifications.js

@@ -0,0 +1,55 @@
+import { useState, createContext, useContext } from '@wordpress/element';
+
+const NotificationsContext = createContext( undefined );
+
+export function useNotificationSettings() {
+	return useContext( NotificationsContext );
+}
+
+export const NotificationsProvider = ( { children } ) => {
+	const [ showNotification, setShowNotification ] = useState( false );
+	const [ notificationMessage, setNotificationMessage ] = useState( '' );
+	const [ notificationType, setNotificationType ] = useState( '' );
+
+	return (
+		<NotificationsContext.Provider
+			value={ {
+				showNotification,
+				setShowNotification,
+				notificationMessage,
+				setNotificationMessage,
+				notificationType,
+				setNotificationType,
+			} }
+		>
+			{ children }
+		</NotificationsContext.Provider>
+	);
+};
+
+export const useToastNotification = () => {
+	const {
+		setNotificationMessage,
+		setNotificationType,
+		setShowNotification,
+	} = useContext( NotificationsContext );
+
+	const error = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'error' );
+		setShowNotification( true );
+	};
+
+	const success = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'success' );
+		setShowNotification( true );
+	};
+
+	return {
+		success,
+		error,
+	};
+};
+
+export default NotificationsProvider;

modules/settings/assets/js/hooks/use-settings.js

@@ -10,46 +10,17 @@ export function useSettings() {
 }
 
 const SettingsProvider = ( { children } ) => {
-	// Notification
-	const [ showNotification, setShowNotification ] = useState( false );
-	const [ notificationMessage, setNotificationMessage ] = useState( '' );
-	const [ notificationType, setNotificationType ] = useState( '' );
-
+	const [ test, setTest ] = useState( 'Test' );
 	return (
 		<SettingsContext.Provider
 			value={ {
-				showNotification,
-				setShowNotification,
-				notificationMessage,
-				setNotificationMessage,
-				notificationType,
-				setNotificationType,
+				test,
+				setTest,
 			} }
 		>
 			{ children }
 		</SettingsContext.Provider>
 	);
 };
 
-export const useToastNotification = () => {
-	const { setNotificationMessage, setNotificationType, setShowNotification } = useContext( SettingsContext );
-
-	const error = ( message ) => {
-		setNotificationMessage( message );
-		setNotificationType( 'error' );
-		setShowNotification( true );
-	};
-
-	const success = ( message ) => {
-		setNotificationMessage( message );
-		setNotificationType( 'success' );
-		setShowNotification( true );
-	};
-
-	return {
-		success,
-		error,
-	};
-};
-
 export default SettingsProvider;