chore: use store for userData check

Author: Soare-Robert-Daniel

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

@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 
 import { sprintf } from '@wordpress/i18n';
-
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { warning, external, help } from '@wordpress/icons';
 
@@ -36,50 +36,9 @@ import {
 import ProgressBar from '../../components/ProgressBar';
 
 import LastImages from './LastImages';
-import { useMemo } from 'react';
 
 const cardClasses = 'flex p-6 bg-light-blue border border-blue-300 rounded-md';
 
-const metrics = [
-	{
-		icon: arrowDownToLine,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle2,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
-		value: 'saved_size',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
-	},
-	{
-		icon: chartBarDecreasing,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle3,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
-		value: 'compression_percentage',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
-	},
-	{
-		icon: globe,
-		label: optimoleDashboardApp.strings.metrics.metricsTitle4,
-		description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
-		value: 'traffic',
-		hasButton: true,
-		buttonText: optimoleDashboardApp.strings.metrics.view_analytics
-	}
-];
-
-if ( optimoleDashboardApp.user_data?.can_use_offloading ) {
-	metrics.push(
-		{
-			icon: cloudDownload,
-			label: optimoleDashboardApp.strings.metrics.metricsTitle5,
-			description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
-			value: 'offloaded_images',
-			hasButton: true,
-			buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
-		}
-	);
-}
-
 const settingsTab = {
 	offload_image: 1,
 	advance: 2
@@ -166,6 +125,50 @@ const Dashboard = () => {
 		};
 	});
 
+	const availableMetrics = useMemo( () => {
+		const metrics = [
+			{
+				icon: arrowDownToLine,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle2,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
+				value: 'saved_size',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
+			},
+			{
+				icon: chartBarDecreasing,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle3,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
+				value: 'compression_percentage',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.adjust_compression
+			},
+			{
+				icon: globe,
+				label: optimoleDashboardApp.strings.metrics.metricsTitle4,
+				description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
+				value: 'traffic',
+				hasButton: true,
+				buttonText: optimoleDashboardApp.strings.metrics.view_analytics
+			}
+		];
+
+		if ( userData?.can_use_offloading ) {
+			metrics.push(
+				{
+					icon: cloudDownload,
+					label: optimoleDashboardApp.strings.metrics.metricsTitle5,
+					description: optimoleDashboardApp.strings.metrics.metricsSubtitle5,
+					value: 'offloaded_images',
+					hasButton: true,
+					buttonText: optimoleDashboardApp.strings.metrics.manage_offloading
+				}
+			);
+		}
+
+		return metrics;
+	}, [ userData ]);
+
 	const visitorsLimitPercent = ( ( userData.visitors / userData.visitors_limit ) * 100 ).toFixed( 0 );
 
 	const renewalDate = useMemo( () => {
@@ -332,7 +335,7 @@ const Dashboard = () => {
 				</div>
 
 				<div className="flex pt-5 gap-5 flex-col md:flex-row">
-					{ metrics.map( metric => {
+					{ availableMetrics.map( metric => {
 						const rawValue = userData[ metric.value ];
 						const { formattedValue, unit } = formatMetric( metric.value, rawValue );
 						const buttonAction = getMetricButtonAction( metric.value );

inc/v2/Offload/Loader.php

@@ -25,7 +25,7 @@ public function __construct() {
 	 * Adds filters to integrate the custom image editor into WordPress.
 	 */
 	public function register_hooks() {
-		if( has_filter( 'wp_image_editors', 'photon_subsizes_override_image_editors' )){
+		if ( has_filter( 'wp_image_editors', 'photon_subsizes_override_image_editors' ) ) {
 			return;
 		}
 		add_filter( 'wp_image_editors', [ $this, 'register_image_editor' ] );