Merge pull request #909 from Codeinwp/feat/single-image-move

Refactor media offload functionality and enhance REST API integration

Author: selul

assets/js/media.js

@@ -0,0 +1,42 @@
+jQuery(document).ready(function($) {
+    jQuery('.move-image-optml').click(function() {
+        //get the id and send a jquery rest request to the server
+        var id = jQuery(this).data('id');
+        var action = jQuery(this).data('action'); 
+        moveImage(id, action, jQuery(this));
+    }); 
+});
+
+function moveImage(id, action, element, is_retry = false) {
+    //add a loading indicator
+    element.parent().find('.spinner').addClass('is-active');
+    element.parent().addClass('is-loading');
+    jQuery.ajax({
+        url:  optimoleMediaListing.rest_url,
+        type: 'POST',
+        headers: {
+            'X-WP-Nonce': optimoleMediaListing.nonce
+        },
+        data: {
+            action: action,
+            status: is_retry ? 'check' : 'start',
+            id: id  
+        },
+        success: function(response) {
+            if(response.code === 'moved') {
+                element.parent().find('.spinner').removeClass('is-active');
+                element.parent().removeClass('is-loading'); 
+                element.parent().find('.move-image-optml').toggleClass('hidden'); 
+
+            }else if(response.code === 'error'){
+                element.parent().find('.spinner').removeClass('is-active');
+                element.parent().removeClass('is-loading'); 
+                element.parent().text(response.data);
+            }else{
+                setTimeout(function() {
+                    moveImage(id, action, element, true);
+                }, 1000);
+            }
+        }
+    });
+}

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

@@ -64,27 +64,6 @@ const ConnectedLayout = ({
 	const [ canSave, setCanSave ] = useState( false );
 	const [ settings, setSettings ] = useState( siteSettings );
 
-	useEffect( () => {
-		const urlSearchParams = new URLSearchParams( window.location.search );
-		const params = Object.fromEntries( urlSearchParams.entries() );
-		let images = [];
-
-		if ( Object.prototype.hasOwnProperty.call( params, 'optimole_action' ) ) {
-			for ( let i = 0; 20 > i; i++ ) {
-				if ( Object.prototype.hasOwnProperty.call( params, i ) ) {
-					if ( ! isNaN( params[i]) ) {
-						images[i] = parseInt( params[i], 10 );
-					}
-				}
-			}
-
-			params.images = images;
-			params.url = window.location.href.split( '?' )[0] + ( Object.prototype.hasOwnProperty.call( params, 'paged' ) ? '?paged=' + params.paged : '' );
-			setQueryArgs( params );
-			setTab( 'settings' );
-			setMenu( 'offload_media' );
-		}
-	}, []);
 
 	useEffect( () => {
 		if ( isConnected && hasApplication ) {