Skip to content

Commit a2f890d

Browse files
RaduCristianPopescuSoare-Robert-Daniel
RaduCristianPopescu
authored and
Soare-Robert-Daniel
committed
refactor: dashboard optimization status
1 parent 3be6810 commit a2f890d

File tree

4 files changed

+117
-22
lines changed

4 files changed

+117
-22
lines changed

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

Lines changed: 100 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,82 @@
1-
import { Icon } from '@wordpress/components';
1+
import { Icon, Button } from '@wordpress/components';
22
import { closeSmall, check } from '@wordpress/icons';
3+
import { useSelect } from '@wordpress/data';
4+
import { saveSettings } from '../../utils/api';
5+
6+
const OptimizationStatus = ({ settings, setSettings, setCanSave, setTab }) => {
7+
8+
const { isLoading } = useSelect( select => {
9+
const { isLoading } = select( 'optimole' );
10+
return {
11+
isLoading: isLoading()
12+
};
13+
}, []);
314

4-
const OptimizationStatus = ({ settings }) => {
515
const userStatus = optimoleDashboardApp.user_status ? optimoleDashboardApp.user_status : 'inactive';
6-
const lazyloadEnabled = 'enabled' === settings?.lazyload && 'active' === userStatus ;
16+
const lazyloadEnabled = 'enabled' === settings?.lazyload && 'active' === userStatus;
717
const imageHandlingEnabled = 'enabled' === settings?.image_replacer && 'active' === userStatus;
18+
const directUpdate = ( option, value ) => {
19+
if ( setCanSave && setSettings ) {
20+
setCanSave( true );
21+
const data = { ...settings };
22+
23+
data[ option ] = value ? 'enabled' : 'disabled';
24+
25+
if ( 'scale' === option && data.scale && 'disabled' === data.scale && 'disabled' === data.lazyload ) {
26+
data.lazyload = 'enabled';
27+
}
28+
29+
if ( 'lazyload' === option && data.lazyload && 'disabled' === data.lazyload && 'disabled' === data.scale ) {
30+
data.scale = 'enabled';
31+
}
32+
33+
setSettings( data );
34+
35+
saveSettings(
36+
data,
37+
false,
38+
false,
39+
() => {
40+
setCanSave( false );
41+
}
42+
);
43+
}
44+
};
45+
46+
const handleSettingsNavigation = ( ) => {
47+
if ( setTab ) {
48+
setTab( 'settings' );
49+
}
50+
};
51+
52+
853
const statuses = [
954
{
1055
active: imageHandlingEnabled,
1156
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
12-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
57+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1,
58+
buttonText: imageHandlingEnabled ? optimoleDashboardApp.strings.optimization_status.manage : optimoleDashboardApp.strings.optimization_status.enable,
59+
settingType: 'image_replacer'
1360
},
1461
{
1562
active: lazyloadEnabled,
1663
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
17-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
64+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2,
65+
buttonText: lazyloadEnabled ? optimoleDashboardApp.strings.optimization_status.disable : optimoleDashboardApp.strings.optimization_status.enable,
66+
settingType: 'lazyload'
1867
},
1968
{
2069
active: lazyloadEnabled && 'disabled' === settings?.scale,
2170
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
22-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
71+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3,
72+
buttonText: ( lazyloadEnabled && 'disabled' === settings?.scale ) ? optimoleDashboardApp.strings.optimization_status.disable : optimoleDashboardApp.strings.optimization_status.enable,
73+
settingType: 'scale'
2374
}
2475
].map( el => ({
25-
...el, active: imageHandlingEnabled && el.active
76+
...el, active: imageHandlingEnabled && el.active,
77+
buttonText: 'image_replacer' === el.settingType ?
78+
( imageHandlingEnabled ? el.buttonText : optimoleDashboardApp.strings.optimization_status.enable ) :
79+
( imageHandlingEnabled ? el.buttonText : optimoleDashboardApp.strings.optimization_status.block )
2680
}) );
2781

2882
return (
@@ -32,20 +86,47 @@ const OptimizationStatus = ({ settings }) => {
3286
{ statuses.map( ( status, index ) => (
3387
<li
3488
key={index}
35-
className="flex items-start gap-2"
89+
className="flex items-start gap-2 justify-between"
3690
>
37-
{status.active ? (
38-
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
39-
) : (
40-
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
41-
)}
42-
<div>
43-
<span className='text-gray-700 font-normal font-semibold'>
44-
{status.label}
45-
</span>
46-
47-
<p className="m-0">{status.description}</p>
91+
<div className="flex items-start gap-2">
92+
{status.active ? (
93+
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
94+
) : (
95+
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
96+
)}
97+
<div>
98+
<span className='text-gray-700 font-normal font-semibold'>
99+
{status.label}
100+
</span>
101+
<p className="m-0">{status.description}</p>
102+
</div>
48103
</div>
104+
<Button
105+
variant="link"
106+
className="text-info text-sm font-medium"
107+
style={{ textDecoration: 'none' }}
108+
onClick={() => {
109+
if ( 'image_replacer' === status.settingType && status.active ) {
110+
handleSettingsNavigation( );
111+
return;
112+
}
113+
114+
if ( 'scale' === status.settingType ) {
115+
status.active = ! status.active;
116+
}
117+
118+
if ( 'disabled' === settings?.image_replacer && 'image_replacer' !== status.settingType ) {
119+
return;
120+
}
121+
122+
directUpdate( status.settingType, ! status.active );
123+
}}
124+
125+
isBusy={isLoading}
126+
disabled={isLoading}
127+
>
128+
{status.buttonText}
129+
</Button>
49130
</li>
50131
) ) }
51132
</ul>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const reasons = [
2323
optimoleDashboardApp.strings.upgrade.reason_4
2424
];
2525

26-
const Sidebar = ({ settings }) => {
26+
const Sidebar = ({ settings, setSettings, setCanSave, setTab }) => {
2727
const {
2828
name,
2929
domain,
@@ -121,7 +121,12 @@ const Sidebar = ({ settings }) => {
121121
</Button>
122122
) }
123123

124-
<OptimizationStatus settings={settings} />
124+
<OptimizationStatus
125+
settings={settings}
126+
setSettings={setSettings}
127+
setCanSave={setCanSave}
128+
setTab={setTab}
129+
/>
125130

126131
{ showSPCRecommendation && (
127132
<SPCRecommendation />

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,12 @@ const ConnectedLayout = ({
121121
{ 'help' === tab && <Help /> }
122122
</div>
123123

124-
<Sidebar settings={settings}/>
124+
<Sidebar
125+
settings={settings}
126+
setSettings={setSettings}
127+
setCanSave={setCanSave}
128+
setTab={setTab}
129+
/>
125130
</div>
126131
</div>
127132
);

‎inc/admin.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2192,6 +2192,10 @@ private function get_dashboard_strings() {
21922192
'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
21932193
'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ),
21942194
'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
2195+
'disable' => __( 'Disable', 'optimole-wp' ),
2196+
'enable' => __( 'Enable', 'optimole-wp' ),
2197+
'manage' => __( 'Manage', 'optimole-wp' ),
2198+
'block' => __( 'Block', 'optimole-wp' ),
21952199
],
21962200
'optimization_tips' => sprintf(
21972201
/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */

0 commit comments

Comments
 (0)