WIP: Feature Request Component

.babelrc

@@ -5,11 +5,26 @@
   "plugins": ["transform-object-rest-spread"],
   "env": {
     "test": {
-      "presets": ["env", "react"]
+      "presets": ["env", "react"],
+      "plugins": [
+        "transform-class-properties",
+        ["transform-runtime", {
+          "polyfill": false,
+          "regenerator": true
+        }]
+      ]
     },
     "rollup": {
       "presets": [["env", {"modules": false}], "react"],
-      "plugins": ["transform-object-rest-spread", "external-helpers"]
-    },
+      "plugins": [
+        "transform-object-rest-spread",
+        "external-helpers",
+        "transform-class-properties",
+        ["transform-runtime", {
+          "polyfill": false,
+          "regenerator": true
+        }]
+      ]
+    }
   }
 }

.eslintrc.json

@@ -32,6 +32,7 @@
         "newlines-between": "always"
       }
     ],
+    "import/no-unresolved": ["error", { "ignore": ["fetches"] }],
     "react/jsx-filename-extension": "off",
     "arrow-parens": ["error", "as-needed"],
     "prettier/prettier": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetches",
-  "version": "2.0.0-0",
+  "version": "2.0.0-3",
   "description": "A new way to perform fetch requests with react.",
   "main": "./lib/module.js",
   "scripts": {
@@ -10,44 +10,49 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dleitee/fetches.git"
+    "url": "git+https://github.com/dleitee/react-fetches.git"
   },
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/dleitee/fetches/issues"
+    "url": "https://github.com/dleitee/react-fetches/issues"
   },
-  "homepage": "https://github.com/dleitee/fetches#readme",
+  "homepage": "https://github.com/dleitee/react-fetches#readme",
   "author": "Daniel Leite de Oliveira <dleitee@gmail.com> (https://github.com/dleitee)",
   "dependencies": {
-    "fetches": "^0.1.3",
     "lodash.frompairs": "^4.0.1",
     "p-is-promise": "^1.1.0",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.4.0"
   },
+  "peerDependencies": {
+    "fetches": "^0.2.1"
+  },
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-jest": "^23.0.1",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "dom-testing-library": "^2.3.2",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint": "^5.0.0",
+    "eslint-config-airbnb": "^17.0.0",
     "eslint-config-cheesecakelabs": "^2.0.3",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.9.1",
+    "fetches": "^0.2.1",
     "form-data": "^2.3.2",
     "jest": "^23.1.0",
     "lodash.get": "^4.4.2",
     "nock": "^9.2.6",
     "node-fetch": "^2.1.2",
-    "react-testing-library": "^3.1.3",
-    "rollup": "^0.60.0",
+    "react-testing-library": "^4.0.1",
+    "rollup": "^0.62.0",
     "rollup-plugin-babel": "^3.0.4",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0"

rollup.config.js

@@ -9,7 +9,7 @@ export default {
     format: 'cjs',
   },
   plugins: [
-    babel({ exclude: 'node_modules/**' }),
+    babel({ exclude: 'node_modules/**', runtimeHelpers: true }),
     resolve({
       modulesOnly: true,
       jsnext: true,

src/components/request/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FetchesContext } from '../../context'
+
+import RequestWrapper from './wrapper'
+
+const Request = props => {
+  const { skip, children, uri, cache } = props
+  if (skip) {
+    return children({ data: null, error: null, loading: false })
+  }
+  return (
+    <FetchesContext.Consumer>
+      {({ client, setCache, getCache }) => (
+        <RequestWrapper client={client} getCache={getCache} setCache={setCache} {...props} />
+      )}
+    </FetchesContext.Consumer>
+  )
+}
+
+Request.propTypes = {
+  children: PropTypes.func.isRequired,
+  uri: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  method: PropTypes.oneOf(['get', 'post', 'patch', 'delete', 'put']),
+  multipleMethod: PropTypes.oneOf(['all', 'race']),
+  skip: PropTypes.bool,
+  config: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  delay: PropTypes.number,
+  pollInterval: PropTypes.number,
+  cache: PropTypes.bool,
+}
+
+Request.defaultProps = {
+  uri: '',
+  method: 'get',
+  multipleMethod: 'all',
+  skip: false,
+  config: {},
+  data: {},
+  delay: 0,
+  pollInterval: 0,
+  cache: false,
+}
+export default Request

src/components/request/wrapper.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Client, getHTTPMethods } from 'fetches'
+
+const cacheable = setCache => response => {
+  setCache(response)
+  return Promise.resolve(response)
+}
+
+const getClient = (client, cache, setCache) => {
+  if (!cache) {
+    return client
+  }
+  return client.appendAfterMiddleware(cacheable(setCache))
+}
+
+class RequestWrapper extends React.Component {
+  controller = AbortController ? new AbortController() : {}
+
+  timeout = null
+
+  interval = null
+
+  unmounted = false
+
+  memoryAddress = null
+
+  state = {
+    loading: true,
+    error: null,
+    data: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.memoryAddress = JSON.stringify(props.uri)
+  }
+
+  componentDidMount() {
+    const { client, delay, pollInterval, setCache, cache } = this.props
+    const setCacheWithAddress = setCache.bind(null, this.memoryAddress)
+    const configuredClient = getClient(client, cache, setCacheWithAddress)
+    const http = getHTTPMethods(configuredClient)
+    if (pollInterval) {
+      this.delayRequest().then(() => {
+        this.interval = setInterval(() => this.resolvePromise(http), pollInterval)
+      })
+      return
+    }
+    if (delay) {
+      this.delayRequest().then(() => this.resolvePromise(http))
+      return
+    }
+    this.resolvePromise(http)
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true
+    if (this.controller.abort) {
+      this.controller.abort()
+    }
+    clearTimeout(this.timeout)
+    clearInterval(this.interval)
+  }
+
+  getRequest = (http, uri, props) => {
+    const { method, data, config } = props
+    const { signal } = this.controller
+
+    return http[method.toLowerCase()](uri, data, Object.assign({}, config, { signal }))
+  }
+
+  getStateResponse = (error, data) => {
+    if (this.unmounted) {
+      return null
+    }
+    return this.setState({
+      error,
+      data,
+      loading: false,
+    })
+  }
+
+  delayRequest = () => {
+    const { delay } = this.props
+    return new Promise(resolve => {
+      this.timeout = setTimeout(() => {
+        resolve()
+      }, delay)
+    })
+  }
+
+  resolvePromise = http => {
+    this.handlePromise(http, this.props)
+      .then(data => {
+        this.getStateResponse(null, data)
+      })
+      .catch(error => {
+        this.getStateResponse(error, null)
+      })
+  }
+
+  handlePromise = (http, props) => {
+    const { uri, cache, getCache } = props
+
+    const cacheResult = getCache(this.memoryAddress)
+    if (cache && cacheResult) {
+      return Promise.resolve(cacheResult)
+    }
+
+    if (Array.isArray(uri)) {
+      return this.handleMultiplePromises(http, props)
+    }
+    return this.handleSinglePromise(http, props)
+  }
+
+  handleSinglePromise = (http, props) => {
+    const { uri } = props
+    return this.getRequest(http, uri, props)
+  }
+
+  handleMultiplePromises = (http, props) => {
+    const { multipleMethod, uri } = props
+    const promises = uri.map(item => this.getRequest(http, item, props))
+    return Promise[multipleMethod](promises)
+  }
+
+  render() {
+    const { children } = this.props
+    const { loading, error, data } = this.state
+    return children({
+      loading,
+      error,
+      data,
+    })
+  }
+}
+
+RequestWrapper.propTypes = {
+  client: PropTypes.instanceOf(Client).isRequired,
+  children: PropTypes.func.isRequired,
+  uri: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired, // eslint-disable-line react/no-unused-prop-types
+  method: PropTypes.oneOf(['get', 'post', 'patch', 'delete', 'put']).isRequired, // eslint-disable-line react/no-unused-prop-types
+  multipleMethod: PropTypes.oneOf(['all', 'race']).isRequired, // eslint-disable-line react/no-unused-prop-types
+  config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,react/no-unused-prop-types
+  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,react/no-unused-prop-types
+  delay: PropTypes.number.isRequired,
+  pollInterval: PropTypes.number.isRequired,
+  cache: PropTypes.bool.isRequired,
+}
+
+export default RequestWrapper

src/connect.js

@@ -19,23 +19,27 @@ const connect = (mapRequestsToProps, mapDispatchToProps) => WrappedComponent =>
         ...this.getDispatchAsProps(),
       }
     }
+
     componentDidMount() {
-      if (!this.props.client) {
+      const { client } = this.props
+      if (!client) {
         return
       }
       this.getResponseAsProps()
     }
 
     getDispatchAsProps() {
+      const { client } = this.props
       if (mapDispatchToProps) {
-        return makeDispatches(this.props.client)(mapDispatchToProps)
+        return makeDispatches(client)(mapDispatchToProps)
       }
       return {}
     }
 
     getResponseAsProps() {
+      const { client } = this.props
       if (mapRequestsToProps) {
-        makeRequests(this.props.client, props => {
+        makeRequests(client, props => {
           const responses = makeResponses(props)
 
           this.setState(() => ({
@@ -59,7 +63,7 @@ const connect = (mapRequestsToProps, mapDispatchToProps) => WrappedComponent =>
 
   const FecthesComponent = props => (
     <FetchesContext.Consumer>
-      {client => <Wrapper client={client} {...props} />}
+      {({ client }) => <Wrapper client={client} {...props} />}
     </FetchesContext.Consumer>
   )
   return FecthesComponent

src/context.js

@@ -1,3 +1,3 @@
 import * as React from 'react'
 
-export const FetchesContext = React.createContext(null)
+export const FetchesContext = React.createContext({ client: null })

src/index.js

@@ -1,2 +1,6 @@
+import Request from './components/request'
+
 export * from './provider'
 export * from './connect'
+
+export { Request }