JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.js"></script>

JavaScript

class BaseTest {
  constructor() {
    this.tasks = []
  }

  addTask(fn) {
    this.tasks.push(async (arg) => {
      return await new Promise(async (resolve, reject) => {
        let response = await fn(resolve, reject, arg)
        console.log(response)
      })
    })
    return this
  }

  delay(t) {

    /* this.addPromiseToTask(() => {

    }) */
    /*     return this.addPromiseToTask(() => setTimeout(() => {
          console.log('delay done...')
          resolve()
        }, t)) */

    let task = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('delay done...')
          resolve()
        }, t)
      })
    }
    this.tasks.push(task)
    return this;
  }

  async run() {
    console.log(this.tasks.length)
    let response = null;
    while (this.tasks.length > 0) {
      let task = this.tasks.shift(1)
      response = await task(response)
    }
  }
}

class Test extends BaseTest {
  clickToNews() {
    return this.addTask((pass, fail, arg) => {
      if (arg) {
        console.log("clickToNews called after: " + arg)
      } else {
        console.log("clickToNews")
      }
      pass(1)
    })
  }

  fn2(t) {
    return this.addTask((pass, fail, arg) => {
      setTimeout(() => {
        console.log("fn2 called after: " + arg)
        pass(2)
      }, t)
    })



    /*  let task = () => {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           console.log("fn2")
           resolve()
         }, 500)
       })
     }
     
     this.tasks.push(task)
     return this */
  }

  fn3() {
    return this.addTask((resolve, reject, arg) => {
      console.log("fn3 called after " + arg)
      resolve(3)
    })
  }
}

(async () => {
  let news = new Test()
  await news.clickToNews().fn2().fn3().run({
    testval: 123,
    branchName: 'master'
  })
})()