feat: make the optimization statuses update live based on toggles

Author: abaicus

assets/src/dashboard/parts/connected/OptimizationStatus.js

@@ -1,34 +1,25 @@
-/**
- * WordPress dependencies.
- */
 import { Icon } from '@wordpress/components';
 import { closeSmall, check } from '@wordpress/icons';
 
-import { useSelect } from '@wordpress/data';
-
-const OptimizationStatus = () => {
-	const statuses = useSelect( select => {
-		const { getSiteSettings } = select( 'optimole' );
-		const siteSettings = getSiteSettings();
-		const lazyloadEnabled = 'enabled' === siteSettings?.lazyload;
-		return [
-			{
-				active: 'enabled' === siteSettings?.image_replacer,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
-			},
-			{
-				active: lazyloadEnabled,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
-			},
-			{
-				active: lazyloadEnabled && 'disabled' === siteSettings?.scale,
-				label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
-				description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
-			}
-		];
-	});
+const OptimizationStatus = ({ settings }) => {
+	const lazyloadEnabled = 'enabled' === settings?.lazyload;
+	const statuses = [
+		{
+			active: 'enabled' === settings?.image_replacer,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
+		},
+		{
+			active: lazyloadEnabled,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
+		},
+		{
+			active: lazyloadEnabled && 'disabled' === settings?.scale,
+			label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
+			description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
+		}
+	];
 
 	return (
 		<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">

assets/src/dashboard/parts/connected/Sidebar.js

@@ -21,7 +21,7 @@ const reasons = [
 	optimoleDashboardApp.strings.upgrade.reason_4
 ];
 
-const Sidebar = () => {
+const Sidebar = ({ settings }) => {
 	const {
 		name,
 		domain,
@@ -127,7 +127,7 @@ const Sidebar = () => {
 				</Button>
 			) }
 
-			<OptimizationStatus />
+			<OptimizationStatus settings={settings} />
 
 			{ showSPCRecommendation && (
 				<SPCRecommendation />

assets/src/dashboard/parts/connected/index.js

@@ -143,7 +143,7 @@ const ConnectedLayout = ({
 					{ 'help' === tab && <Help /> }
 				</div>
 
-				<Sidebar/>
+				<Sidebar settings={settings}/>
 			</div>
 
 			<CSAT />