Performance Issue: Unnecessary GET request for deleting frames

[arnabsen1729]

Description

omg-frames/js/loginsignup.js

Lines 162 to 181 in 332ec82

	function deleteframe(frameid) {
	if (confirm("Delete this Frame?")) {
	loader('show');
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 201) {
	loader('hide');
	getframes();
	}
	};
	xhttp.open("DELETE", "https://api.iwasat.events/api/v1/frames?id=" + frameid, true);
	xhttp.onerror = function () {
	loader('hide');
	alertpopup("Unexpected Error!", 'open');
	};
	xhttp.setRequestHeader("Accept", "application/json");
	xhttp.setRequestHeader("Authorization", `Bearer ${sessionStorage.getItem('token')}`);
	xhttp.send();
	}
	}

When a user heads over to gallery.html and then deletes an image, two requests happen one DELETE and another GET (line number 169) . Now the GET request is very time-consuming, so we should try to make fewer GET requests.

Solution

When the user first loads the gallery.html, we make one GET request and store the data we get in an array. Each element of an array represent one frame. For deletion, we can simply make the DELETE request and remove the corresponding frame from the array, and also toggle the display of that frame. This will make sure that there is one GET request in that user session.

[rajinderpalsingh2001]

Previously:

gallery.html loads ---> getframes() called with GET request for Getting Frames
if (user deletes frame ){
deleteframe() called
getframes() again called for fetching again frames
}

Now:

gallery.html loads ---> getframes() called with GET request for Getting Frames --->all frames stored in array ---> displayarrayofframes() called for displaying fetched array

if (user deletes frame ){
deleteframe() called
delete that frame from array
displayarrayofframes() called
}