Skip to content

refactor: dashboard optimization status #967

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

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
+121 −29
Open

refactor: dashboard optimization status #967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2f890d
refactor: dashboard optimization status
RaduCristianPopescu Sep 25, 2025
656aa93
chore: tweaks
Soare-Robert-Daniel Oct 3, 2025
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
131 changes: 105 additions & 26 deletions assets/src/dashboard/parts/connected/OptimizationStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,81 @@
import { Icon } from '@wordpress/components';
import { Icon, Button } from '@wordpress/components';
import { closeSmall, check } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { saveSettings } from '../../utils/api';

const OptimizationStatus = ({ settings, setSettings, setCanSave, setTab }) => {

const { isLoading } = useSelect( select => {
const { isLoading } = select( 'optimole' );
return {
isLoading: isLoading()
};
}, []);

const OptimizationStatus = ({ settings }) => {
const userStatus = optimoleDashboardApp.user_status ? optimoleDashboardApp.user_status : 'inactive';
const lazyloadEnabled = 'enabled' === settings?.lazyload && 'active' === userStatus ;
const lazyloadEnabled = 'enabled' === settings?.lazyload && 'active' === userStatus;
const imageHandlingEnabled = 'enabled' === settings?.image_replacer && 'active' === userStatus;
const directUpdate = ( option, value ) => {
if ( setCanSave && setSettings ) {
setCanSave( true );
const data = { ...settings };

data[ option ] = value ? 'enabled' : 'disabled';

if ( 'scale' === option && data.scale && 'disabled' === data.scale && 'disabled' === data.lazyload ) {
data.lazyload = 'enabled';
}

if ( 'lazyload' === option && data.lazyload && 'disabled' === data.lazyload && 'disabled' === data.scale ) {
data.scale = 'enabled';
}

setSettings( data );

saveSettings(
data,
false,
false,
() => {
setCanSave( false );
}
);
}
};

const handleSettingsNavigation = ( ) => {
if ( setTab ) {
setTab( 'settings' );
}
};

const {
optimization_status
} = optimoleDashboardApp.strings;

const statuses = [
{
settingType: 'image_replacer',
active: imageHandlingEnabled,
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
label: optimization_status.statusTitle1,
description: optimization_status.statusSubTitle1,
buttonText: imageHandlingEnabled ? optimization_status.manage : optimization_status.enable
},
{
active: lazyloadEnabled,
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
settingType: 'lazyload',
active: lazyloadEnabled && imageHandlingEnabled,
label: optimization_status.statusTitle2,
description: optimization_status.statusSubTitle2,
buttonText: imageHandlingEnabled ? ( lazyloadEnabled ? optimization_status.disable : optimization_status.enable ) : ''
},
{
active: lazyloadEnabled && 'disabled' === settings?.scale,
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
settingType: 'scale',
active: ( lazyloadEnabled && 'disabled' === settings?.scale ) && imageHandlingEnabled,
label: optimization_status.statusTitle3,
description: optimization_status.statusSubTitle3,
buttonText: imageHandlingEnabled ? ( ( lazyloadEnabled && 'disabled' === settings?.scale ) ? optimization_status.disable : optimization_status.enable ) : ''
}
].map( el => ({
...el, active: imageHandlingEnabled && el.active
}) );
];

return (
<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
Expand All @@ -32,20 +84,47 @@ const OptimizationStatus = ({ settings }) => {
{ statuses.map( ( status, index ) => (
<li
key={index}
className="flex items-start gap-2"
className="flex items-start gap-2 justify-between"
>
{status.active ? (
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
) : (
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
)}
<div>
<span className='text-gray-700 font-normal font-semibold'>
{status.label}
</span>

<p className="m-0">{status.description}</p>
<div className="flex items-start gap-2">
{status.active ? (
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
) : (
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
)}
<div>
<span className='text-gray-700 font-semibold'>
{status.label}
</span>
<p className="m-0">{status.description}</p>
</div>
</div>
<Button
variant="link"
className="text-info text-sm font-medium"
style={{ textDecoration: 'none' }}
onClick={() => {
if ( 'image_replacer' === status.settingType && status.active ) {
handleSettingsNavigation( );
return;
}

if ( 'scale' === status.settingType ) {
status.active = ! status.active;
Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

Mutating the status.active property directly modifies the original array item, which can cause unexpected behavior in React. This mutation should be avoided as it modifies the state outside of React's state management system.

Suggested change
status.active = ! status.active;
// Do not mutate status.active directly; handled by directUpdate below.

Copilot uses AI. Check for mistakes.

}

if ( 'disabled' === settings?.image_replacer && 'image_replacer' !== status.settingType ) {
return;
}

directUpdate( status.settingType, ! status.active );
}}

isBusy={isLoading}
disabled={isLoading}
>
{status.buttonText}
</Button>
</li>
) ) }
</ul>
Expand Down
9 changes: 7 additions & 2 deletions assets/src/dashboard/parts/connected/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const reasons = [
optimoleDashboardApp.strings.upgrade.reason_4
];

const Sidebar = ({ settings }) => {
const Sidebar = ({ settings, setSettings, setCanSave, setTab }) => {
const {
name,
domain,
Expand Down Expand Up @@ -121,7 +121,12 @@ const Sidebar = ({ settings }) => {
</Button>
) }

<OptimizationStatus settings={settings} />
<OptimizationStatus
settings={settings}
setSettings={setSettings}
setCanSave={setCanSave}
setTab={setTab}
/>

{ showSPCRecommendation && (
<SPCRecommendation />
Expand Down
7 changes: 6 additions & 1 deletion assets/src/dashboard/parts/connected/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,12 @@ const ConnectedLayout = ({
{ 'help' === tab && <Help /> }
</div>

<Sidebar settings={settings}/>
<Sidebar
settings={settings}
setSettings={setSettings}
setCanSave={setCanSave}
setTab={setTab}
/>
</div>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions inc/admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2192,6 +2192,9 @@ private function get_dashboard_strings() {
'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ),
Copy link
Preview

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

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

The word 'Scalling' should be 'Scaling' (single 'l').

Suggested change
'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ),
'statusTitle3' => __( 'Image Scaling', 'optimole-wp' ),

Copilot uses AI. Check for mistakes.

'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
'disable' => __( 'Disable', 'optimole-wp' ),
'enable' => __( 'Enable', 'optimole-wp' ),
'manage' => __( 'Manage', 'optimole-wp' ),
],
'optimization_tips' => sprintf(
/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
Expand Down
Loading