Merge pull request #955 from Codeinwp/fix/image_storage_selection

fix: image storage selection

Author: selul

assets/src/dashboard/parts/components/RadioBoxes.js

@@ -48,6 +48,7 @@ export default function RadioBoxes({ options, value, onChange, label, disabled =
 							id={buttonValue}
 							className="!opacity-0 !w-0 !h-0 !overflow-hidden !absolute !pointer-events-none"
 							disabled={disabled}
+							checked={isActive}
 						/>
 					</label>
 				);

assets/src/dashboard/parts/connected/settings/OffloadMedia.js

@@ -80,6 +80,7 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 	} = useDispatch( 'optimole' );
 
 	const [ modal, setModal ] = useState( null );
+	const [ initialRadioValue, setInitialRadioValue ] = useState( null );
 
 	const isOffloadingInProgress = 'disabled' !== settings['offloading_status'];
 	const isRollbackInProgress = 'disabled' !== settings['rollback_status'];
@@ -108,6 +109,7 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 		const nextSettings = { ...settings };
 		nextSettings['show_offload_finish_notice'] = '';
 		nextSettings['offloading_status'] = 'enabled';
+		nextSettings['offload_media'] = 'enabled';
 		setSettings( nextSettings );
 		saveSettings( nextSettings, false, true, () => {
 			setErrorMedia( false );
@@ -131,6 +133,7 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 				const nextSettings = { ...settings };
 				nextSettings['show_offload_finish_notice'] = '';
 				nextSettings['rollback_status'] = 'enabled';
+				nextSettings['offload_media'] = 'disabled';
 				saveSettings( nextSettings, false, true, () => {
 					setErrorMedia( false );
 					setProcessedImages( 0 );
@@ -161,26 +164,33 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 	const radioBoxValue = 'enabled' === settings['offload_media'] ? 'offload' : 'rollback';
 
 	const updateRadioBoxValue = value => {
+		setInitialRadioValue( radioBoxValue );
+
 		const offloadEnabled = 'offload' === value;
-		const nextSettings = { ...settings };
-		nextSettings['offload_media'] = offloadEnabled ? 'enabled' : 'disabled';
-		setSettings( nextSettings );
-		setCanSave( true );
 
 		if ( offloadEnabled ) {
-			setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD );
+			setModal({
+				type: show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD,
+				optionValue: value
+			});
 
 			return;
 		}
 
-		setModal( MODAL_STATE_ROLLBACK );
+		setModal({ type: MODAL_STATE_ROLLBACK, optionValue: value });
 	};
 
-	const getModalProps = ( type ) => {
+	const getModalProps = ({ type, optionValue }) => {
+		const nextSettings = { ...settings };
+
 		const props = {
 			[MODAL_STATE_OFFLOAD]: {
 				icon: offload,
 				onConfirm: () => {
+					nextSettings['offload_media'] = 'offload' === optionValue ? 'enabled' : 'disabled';
+					setSettings( nextSettings );
+					setCanSave( true );
+
 					onOffloadMedia();
 					setModal( null );
 				},
@@ -193,6 +203,10 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 			[MODAL_STATE_ROLLBACK]: {
 				icon: rollbackIcon,
 				onConfirm: () => {
+					nextSettings['offload_media'] = 'offload' === optionValue ? 'enabled' : 'disabled';
+					setSettings( nextSettings );
+					setCanSave( true );
+
 					onRollbackdMedia();
 					setModal( null );
 				},
@@ -210,7 +224,9 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 					setModal( null );
 					const options = settings;
 					options.offloading_status = 'disabled';
+					options.offload_media = 'offload' === initialRadioValue ? 'enabled' : 'disabled';
 					saveSettings( options );
+					setInitialRadioValue( null );
 				},
 				labels: {
 					title: options_strings.offloading_stop_title,
@@ -225,7 +241,9 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 					setModal( null );
 					const options = settings;
 					options.rollback_status = 'disabled';
+					options.offload_media = 'offload' === initialRadioValue ? 'enabled' : 'disabled';
 					saveSettings( options );
+					setInitialRadioValue( null );
 				},
 				labels: {
 					title: options_strings.rollback_stop_title,
@@ -237,6 +255,10 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 				variant: 'warning',
 				icon: warningAlt,
 				onConfirm: () => {
+					nextSettings['offload_media'] = 'offload' === optionValue ? 'enabled' : 'disabled';
+					setSettings( nextSettings );
+					setCanSave( true );
+
 					onOffloadMedia();
 					setModal( null );
 				},
@@ -268,23 +290,26 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 
 	const onCancelProgress = () => {
 		if ( loadingSync ) {
-			setModal( MODAL_STATE_STOP_OFFLOAD );
+			setModal({ type: MODAL_STATE_STOP_OFFLOAD, optionValue: initialRadioValue });
 		}
 
 		if ( loadingRollback ) {
-			setModal( MODAL_STATE_STOP_ROLLBACK );
+			setModal({ type: MODAL_STATE_STOP_ROLLBACK, optionValue: initialRadioValue });
 		}
 	};
 
 	const handleForceSync = ( e ) => {
 		e.preventDefault();
 
 		if ( 'offload' === radioBoxValue ) {
-			setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD );
+			setModal({
+				type: show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD,
+				optionValue: radioBoxValue
+			});
 		}
 
 		if ( 'rollback' === radioBoxValue ) {
-			setModal( MODAL_STATE_ROLLBACK );
+			setModal({ type: MODAL_STATE_ROLLBACK, optionValue: radioBoxValue });
 		}
 	};