JSFiddle - React, Tailwind, and code Playground

by Stephane de Luca

JavaScript

// Voila la méthode Promise pour gérer les appelles d’API



// A  promise that resolves after a given time and reject when given 2000
const timeOut = (url) => {
	const duration = 2000

  return new Promise((resolve, reject) => {
  
	  const toBeRejected = url.substring('soc')

  	console.log(`~> to be rejected? ${toBeRejected} in ${duration/1000}s: ${url}…`)
  
    setTimeout(() => {  
    
      if (toBeRejected) {
        reject(`Rejected ${url}`)
      } else {
        resolve(`Completed ${url}`)
      }
    }, duration)
  })
}




const getFetchAPI = (url) => {
	return timeOut(url)
}


const testBench = (gender) => {
	const installation = '12'
	const select = '1'

	//React.useEffect(() => {


 
      var promises = []
  
      if (gender === 0) {
        promises.push(getFetchAPI(`victron/stats/summary?installationId=${installation}&periodId=${select}`))
        promises.push(getFetchAPI(`victron/stats/soc?installationId=${installation}&periodId=${select}`))
      }
      else if (gender === 1) {
        promises.push(getFetchAPI(`victron/stats/consumption?installationId=${installation}&periodId=${select}`))
        promises.push(getFetchAPI(`victron/stats/consumption/summary?installationId=${installation}&periodId=${select}`))
      }
      else if (gender === 2) {
        promises.push(getFetchAPI(`victron/stats/production?installationId=${installation}&periodId=${select}`))
        promises.push(getFetchAPI(`victron/stats/production/summary?installationId=${installation}&periodId=${select}`))
     }
 
     Promise.all(promises)
        .then(([p1, p2]) => {
        	alert("Promise.all(): all completed")
         /*
          const newData = initialChartData;
 
          newData.upChart = drawUpChart(p1.data) || newData.upChart;
 
          if (gender === 0) {
            newData.socChart = drawSocChart(p2.data) || newData.socChart;
          }
          else {
            newData.stackChart = drawStackChart(p2.data) || newData.stackChart;
          }
 
  ...