Skip to content

Commit 9458d04

Browse files
selulselul
authored
Merge pull request #967 from Codeinwp/refactor/dashboard_status
refactor: dashboard optimization status
2 parents 6772278 + 4cc2151 commit 9458d04

File tree

4 files changed

+123
-31
lines changed

4 files changed

+123
-31
lines changed

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

Lines changed: 107 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,81 @@
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+
}, []);
14+
15+
const lazyloadEnabled = 'enabled' === settings?.lazyload;
16+
const imageHandlingEnabled = 'enabled' === settings?.image_replacer;
17+
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+
const {
53+
optimization_status
54+
} = optimoleDashboardApp.strings;
355

4-
const OptimizationStatus = ({ settings }) => {
5-
const userStatus = optimoleDashboardApp.user_status ? optimoleDashboardApp.user_status : 'inactive';
6-
const lazyloadEnabled = 'enabled' === settings?.lazyload && 'active' === userStatus ;
7-
const imageHandlingEnabled = 'enabled' === settings?.image_replacer && 'active' === userStatus;
856
const statuses = [
957
{
58+
settingType: 'image_replacer',
1059
active: imageHandlingEnabled,
11-
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
12-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
60+
label: optimization_status.statusTitle1,
61+
description: optimization_status.statusSubTitle1,
62+
buttonText: imageHandlingEnabled ? optimization_status.manage : optimization_status.enable
1363
},
1464
{
15-
active: lazyloadEnabled,
16-
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
17-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
65+
settingType: 'lazyload',
66+
active: lazyloadEnabled && imageHandlingEnabled,
67+
label: optimization_status.statusTitle2,
68+
description: optimization_status.statusSubTitle2,
69+
buttonText: imageHandlingEnabled ? ( lazyloadEnabled ? optimization_status.disable : optimization_status.enable ) : ''
1870
},
1971
{
20-
active: lazyloadEnabled && 'disabled' === settings?.scale,
21-
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
22-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
72+
settingType: 'scale',
73+
active: ( lazyloadEnabled && 'disabled' === settings?.scale ) && imageHandlingEnabled,
74+
label: optimization_status.statusTitle3,
75+
description: optimization_status.statusSubTitle3,
76+
buttonText: imageHandlingEnabled ? ( ( lazyloadEnabled && 'disabled' === settings?.scale ) ? optimization_status.disable : optimization_status.enable ) : ''
2377
}
24-
].map( el => ({
25-
...el, active: imageHandlingEnabled && el.active
26-
}) );
78+
];
2779

2880
return (
2981
<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
@@ -32,20 +84,47 @@ const OptimizationStatus = ({ settings }) => {
3284
{ statuses.map( ( status, index ) => (
3385
<li
3486
key={index}
35-
className="flex items-start gap-2"
87+
className="flex items-start gap-2 justify-between"
3688
>
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>
89+
<div className="flex items-start gap-2">
90+
{status.active ? (
91+
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
92+
) : (
93+
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
94+
)}
95+
<div>
96+
<span className='text-gray-700 font-semibold'>
97+
{status.label}
98+
</span>
99+
<p className="m-0">{status.description}</p>
100+
</div>
48101
</div>
102+
<Button
103+
variant="link"
104+
className="text-info text-sm font-medium"
105+
style={{ textDecoration: 'none' }}
106+
onClick={() => {
107+
if ( 'image_replacer' === status.settingType && status.active ) {
108+
handleSettingsNavigation( );
109+
return;
110+
}
111+
112+
if ( 'scale' === status.settingType ) {
113+
status.active = ! status.active;
114+
}
115+
116+
if ( 'disabled' === settings?.image_replacer && 'image_replacer' !== status.settingType ) {
117+
return;
118+
}
119+
120+
directUpdate( status.settingType, ! status.active );
121+
}}
122+
123+
isBusy={isLoading}
124+
disabled={isLoading}
125+
>
126+
{status.buttonText}
127+
</Button>
49128
</li>
50129
) ) }
51130
</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: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2190,6 +2190,9 @@ private function get_dashboard_strings() {
21902190
'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
21912191
'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ),
21922192
'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
2193+
'disable' => __( 'Disable', 'optimole-wp' ),
2194+
'enable' => __( 'Enable', 'optimole-wp' ),
2195+
'manage' => __( 'Manage', 'optimole-wp' ),
21932196
],
21942197
'optimization_tips' => sprintf(
21952198
/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */

0 commit comments

Comments
 (0)