JSFiddle - React, Tailwind, and code Playground

by Yomi Eluwande

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<div id="app">
  <h3>Everest pizza delivery</h3>
  <button @click="order" 
          :disabled="inProgress">Order pizza!</button>
  <span class="spinner" v-show="inProgress">🍕</span>
  <h4>Pizza wanted</h4>
  <p>{{requests}}</p>
  <h4>Pizzas ordered</h4>
  <span v-for="pizza in responses">
    {{pizza.id}}:{{pizza.req}}
  </span>
</div>

CSS

@keyframes spin {
  100% {transform:rotate(360deg);}
}
.spinner {
  width: 1em;
  height: 1em;
  padding-bottom: 12px;
  display: inline-block;
  animation: spin 2s linear infinite;
}

Babel + JSX

new Vue({
  el: '#app',
  data: {
    inProgress: false,
    requests: new Object(null),
    responses: new Object(null),
    counter: 0,
    impatientAxios: undefined
  },
  created () {
    this.impatientAxios = axios.create({
      timeout: 3000 
    })
  },
  methods: {
    order (event, oldRequest) {
      let request = undefined
      if (oldRequest) {
        request = oldRequest
      } else {
        request = { req: '🍕', id: this.counter++}
     }
     this.inProgress = true
     this.requests[request.id] = request
     this.impatientAxios.get('http://httpstat.us/200')
      .then(response => {
        this.inProgress = false
        this.responses[request.id] = this.requests[request.id]
        delete this.requests[request.id]
      })
      .catch(e => {
        this.inProgress = false
        console.error(e.message)
        console.error(this.requests.s)
        setTimeout(this.order(event, request), 1000)
      })
  }
}