cancelable promis and react hoc

cancelablePromise.js

export const cancelablePromise = (promise) => {
  let state = false
  const prom = (...param) =>
    new Promise((resolve, reject) => {
      promise(...param)
      .then((res) => {
        if (!state) resolve(res)
      })
      .catch((err) => {
        if (!state) reject(err)
      })
    })
  prom.cancel = () => {
    state = true
  }
  return prom
}

export const cancelablePromiseAll = (promisesMap) => {
  const withCancPromise = Object.keys(promisesMap).map(key => (
    { [key]: cancelablePromise(promisesMap[key]) }
  ))
  const propMaps = Object.assign(...withCancPromise)
  const cancel = () => {
    Object.keys(propMaps).forEach(key => propMaps[key].cancel())
  }
  return { ...propMaps, cancel }
}

withCancelablePromise.jsx

import React, { Component } from 'react'
import { cancelablePromise } from 'cancelablePromise'

export const cancable = promisesMap => (WrappedComponent) => {
  class CancPromise extends Component {
    state = { propMaps: {} }

    componentWillMount() {
      const withCancPromise = Object.keys(promisesMap).map(key => (
        { [key]: cancelablePromise(promisesMap[key]) }
      ))
      const propMaps = Object.assign(...withCancPromise)
      this.setState({ propMaps })
    }

    componentWillUnmount() {
      this.cancel()
    }

    cancel = () => {
      const { propMaps } = this.state
      Object.keys(propMaps).forEach(key => propMaps[key].cancel())
    }

    render() {
      return (
        <WrappedComponent cancel={this.cancel} {...this.state.propMaps} {...this.props} />
      )
    }
  }
  CancPromise.displayName = `withCancelablePromise(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`
  return CancPromise
}

use cancelablePromise

import { cancelablePromise } from 'cancelablePromise'

const test = (str) => `test ${str}`

const req = (data)  => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data)
    }, 1000)
  })
}

const a = cancelablePromise(req)
const b = cancelablePromise((data) => req(test(data)))


a('a').then(res => {
  console.log(res)
  b('b').then(console.log)
})

setTimeout(() => {
  a.cancel()  
}, 500)

https://repl.it/KUE8/7

use hoc react

import React, { Component } from 'react'
import { cancelable } from 'cancelablePromise'

class Timer extends React.Component {
  state = {text: ''}

  componentWillMount() {
    this.props.startTime(2, 'TADA')
    .then((res) => {
      this.setState({ text: res })
    })
  }

  stop = () => {
    this.props.cancel()
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <button onClick={this.stop}> cancel Timer </button>
      </div>
    )
  }
}

const timer = (seconds, text) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(text)
    }, seconds * 1000)
  })
}

export default cancelable({
  startTime: timer
})(Timer)

https://www.webpackbin.com/bins/-KsE32InAfELP4vPJdij

Suppression at the root
https://repl.it/KUE8/5