MorePromiseRefactoring

by Jimmy Chandra

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

JavaScript

//polyfill for Array.unique()
if (!Array.prototype.hasOwnProperty('distinct')) {
	const onlyUnique = (value, index, self) => self.indexOf(value) === index;

	Object.defineProperty(Array.prototype, 'distinct', {
	  value: function() { return [].concat(this).filter(onlyUnique); }
	});
}

const page1AnchorData = [ 1,2,3 ];

const anchors = [
  { pageNumber: 1, anchorData: page1AnchorData },
  { pageNumber: undefined, anchorData: undefined },
  { pageNumber: 1, anchorData: page1AnchorData },
  { pageNumber: 5, anchorData: [] },
  { pageNumber: 8, anchorData: [] },
];

const onlyValidAnchorWithPageNumber= (anchor) => !isNaN(anchor?.pageNumber);

function clearAnchorDataForPage(page) {
	console.log(`Scheduling anchor clearing for page ${page}...`);
  return new Promise((resolve, reject) => {
  	const delay = 250 + Math.random() * 1500;
  	setTimeout(() => {
    	console.log(`Page ${page} anchors cleared after ${delay.toFixed(2)} ms.`);
      return resolve(page);
    }, delay);
  })
}

let anchorDataClearTasks = anchors
	.filter(onlyValidAnchorWithPageNumber)
  .map(a => a.pageNumber)
  .distinct()
  .map(pageNumber => clearAnchorDataForPage(pageNumber));
  
Promise.all(anchorDataClearTasks)
	.then(() => {
  	console.log('All Done!');
  });