JSFiddle - React, Tailwind, and code Playground

by levchenko_d

CSS

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

.banner {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto 20px;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

TypeScript

(function(){
const allBotsData = [
	{
    data: {
      sourceId: '1kda90k2',
      targetId: '1ldajosi',
    }
  },
  {
    data: {
      sourceId: '1ldajosi',
      targetId: '1dd2213',
    }
  },
  {
    data: {
      sourceId: '1dd2213',
      targetId: '1dd2213',
    }
  },
  {
    data: {
      sourceId: '2oi1djo1',
      targetId: '2joidqwdoids',
    }
  },
  {
    data: {
      sourceId: '2iuhiuh',
      targetId: '2joidqwdoids',
    }
  },
  {
    data: {
      sourceId: '2joidqwdoids',
      targetId: '2jodajs99a',
    }
  },
  {
    data: {
      sourceId: '2jodajs99a',
      targetId: '29dajojisadi',
    }
  },
  {
    data: {
      sourceId: '29dajojisadi',
      targetId: '2joidqwdoids',
    }
  },
];


allBotsData.map((d:any) => {
  $('body').append('<div id="card-'+d.data.sourceId+'" class="banner '+d.data.sourceId+'">'+d.data.sourceId+'<div>');
});


const mapAsync = (array: Array<any>, iterateeFn: Function) => {
    let index = 0;
    const result = [];

    return new Promise((resolve, reject) => {
        if(!Array.isArray(array)){
            return reject('Expected first argument to be an array');
        }

        if(typeof iterateeFn !== 'function'){
            return reject('Expected second argument to be a function');
        }

        /**
         * handle iteratee logic
         */
        const handleItem = () => {
            const item = array[index];

            iterateeFn(item, index, (error: any, updatedItem: any) => {
                if(error){
                    reject(error);
                } else {
                    const isTheLastItem = index === array.length - 1;

                    result.push(updatedItem || item);

                    if(isTheLastItem) {
                        /** Exit cycle*/
                        resolve(result);
                    } else {
                        /** Run next cycle */
                        index++;
                        handleItem();
                    }
             ...