refac(Fetch): added string templed for duplicate string

README.md

@@ -28,13 +28,13 @@
   </a>
   <a href="https://www.npmjs.com/package/react-data-fetching">
     <img
-      alt="version: 0.2.3"
+      alt="version: 0.2.4"
       src="https://img.shields.io/npm/v/react-data-fetching.svg"
     />
   </a>
   <img 
     alt="gzip size"
-    src="https://img.shields.io/badge/gzip%20size-6.36%20kB-brightgreen.svg"
+    src="https://img.shields.io/badge/gzip%20size-6.19%20kB-brightgreen.svg"
   />
   <a href="https://github.com/prettier/prettier">
     <img
@@ -54,6 +54,8 @@
 
 The package is really lightweight (~6 kB gzipped) and has been built from the ground up with universal apps in mind: you can use it wherever React is rendering - meaning it works seamlessly with React (web) & React Native!
 
+ℹ️ You can already try the next major version under the [/next](https://github.com/CharlesMangwa/react-data-fetching/tree/next) branch!
+
 ## Installation
 
 Using [Yarn](https://yarnpkg.com/):
@@ -114,7 +116,7 @@ The package gives access to `<Fetch>`, `<FetchProvider>` and `requestToApi()`. T
 
 ## Docs
 
-The documentation is available here: https://charlesmangwa.github.io/react-data-fetching.
+The documentation is available here: https://react-data-fetching.now.sh.
 
 ## Todo
 

docs/FetchProvider.md

@@ -28,7 +28,6 @@ const App = () => (
 )
 
 export default App
-
 ```
 
 ## Props
@@ -87,4 +86,4 @@ This allows you to share general parameters, but still have fine-grained control
 
 ### Store propagation
 
-As seen above, *for now*, React Data Fetching can share your Redux store all by itself. This is a feature which is nice to have, was possible to implement without spending too much time on it, but could possibly disappear/be modified in the (near?) future. However, you will always be able to at least manually pass a variable you want to be shared through `data.store`.
+As seen above, _for now_, React Data Fetching can share your Redux store all by itself. This is a feature which is nice to have, was possible to implement without spending too much time on it, but could possibly disappear/be modified in the (near?) future. However, you will always be able to at least manually pass a variable you want to be shared through `data.store`.

docs/README.md

@@ -16,13 +16,13 @@
   </a>
   <a href="https://www.npmjs.com/package/react-data-fetching">
     <img
-      alt="version: 0.2.3"
+      alt="version: 0.2.4"
       src="https://img.shields.io/npm/v/react-data-fetching.svg"
     />
   </a>
   <img 
     alt="gzip size"
-    src="https://img.shields.io/badge/gzip%20size-6.36%20kB-brightgreen.svg"
+    src="https://img.shields.io/badge/gzip%20size-6.19%20kB-brightgreen.svg"
   />
   <a href="https://github.com/prettier/prettier">
     <img
@@ -96,7 +96,7 @@ export default class App extends Component {
 }
 ```
 
-The package gives access to `<Fetch>`, `<FetchProvider>` and `requestToApi()`. To have an in-depth explanation of how to use them, how they work and even more, head to this post: [Introducing React Data Fetching 🎣](https://medium.com/@CharlesMangwa/introducing-react-data-fetching-2140a1d36cc8).
+The package gives access to `<Fetch>`, `<FetchProvider>` and `requestToApi()`. To have an in-depth explanation of how to use them, how they work and even more, head to this post: [Introducing React Data Fetching 🎣](https://medium.com/@CharlesMangwa/introducing-react-data-fetching-2140a1d36cc8).
 
 ## About
 

docs/requestToApi.md

@@ -5,10 +5,10 @@ A function which against all odds: sends a request to an API!
 ## Example
 
 ```jsx
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment } from 'react'
 import { requestToApi } from 'react-data-fetching'
 
-import { Button } from './components
+import { Button } from './components
 
 export default class Auth extends Component {
   state = { accountCreated: false }
@@ -17,7 +17,7 @@ export default class Auth extends Component {
     const apiResponse = await requestToApi({
       url: 'https://my-app.com/api/v1/users',
       body: { email: 'midoriya@shonen.com' },
-      headers: { Cache-Control: 'no-cache' },
+      headers: { Cache-Control: 'no-cache' },
       method: 'POST',
       onTimeout: () => console.log('⏱️ Timeout!'),
       onProgress: (progression) => ('♻️ Progressing...', progression),
@@ -49,7 +49,7 @@ type RequestToApi = {
   body?: Object,
   headers?: Object,
   method: Method,
-  onProgress?: (Progress) => void,
+  onProgress?: Progress => void,
   onTimeout?: Function,
   params?: Object,
   url: string,

modules/ConnectedFetch.js

@@ -0,0 +1,136 @@
+/* @flow */
+
+import { Children, Component } from 'react'
+import PropTypes from 'prop-types'
+import invariant from 'invariant'
+
+import {
+  type Interceptor,
+  type ProviderProps,
+  type Store,
+  storeShape,
+} from './types'
+
+const createConnectedFetch = (): Class<*> => {
+  class ConnectedFetch extends Component<ProviderProps> {
+    rdfApi = this.props.api
+
+    rdfHeaders: ?Object = this.props.headers
+
+    rdfInterceptor: ?Interceptor = this.props.onIntercept
+
+    rdfLoader: ?React$Node = this.props.loader
+
+    rdfStore: ?Store =
+      this.context && this.context.store
+        ? this.context.store.getState()
+        : this.props.store
+
+    rdfTimeout: ?number = this.props.timeout
+
+    static defaultProps = {
+      api: undefined,
+      headers: {},
+      loader: undefined,
+      onIntercept: undefined,
+      store: undefined,
+      timeout: undefined,
+    }
+
+    static propTypes = {
+      api: PropTypes.string,
+      children: PropTypes.element.isRequired,
+      headers: PropTypes.object,
+      loader: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+      onIntercept: PropTypes.func,
+      store: storeShape,
+      timeout: PropTypes.number,
+    }
+
+    static contextTypes = {
+      store: storeShape,
+    }
+
+    static childContextTypes = {
+      rdfApi: PropTypes.string,
+      rdfHeaders: PropTypes.object,
+      rdfInterceptor: PropTypes.func,
+      rdfLoader: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+      rdfStore: PropTypes.object,
+      rdfTimeout: PropTypes.number,
+    }
+
+    componentDidMount() {
+      const message =
+        '`<ConnectedFetch />` is deprecated and will be removed ' +
+        'in the next major version. ' +
+        'Please use `<FetchProvider />` instead.'
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (typeof console !== 'undefined') console.error(message)
+
+        try {
+          throw new Error(message)
+        } catch (x) {} // eslint-disable-line
+      }
+    }
+
+    componentWillReceiveProps = () => null
+
+    getChildContext() {
+      return {
+        rdfApi: this.rdfApi || '',
+        rdfHeaders: this.rdfHeaders,
+        rdfInterceptor: this.rdfInterceptor,
+        rdfLoader: this.rdfLoader,
+        rdfStore: this.props.store || this.rdfStore,
+        rdfTimeout: this.rdfTimeout,
+      }
+    }
+
+    render() {
+      return Children.only(this.props.children)
+    }
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    ConnectedFetch.prototype.componentWillReceiveProps = (
+      nextProps: ProviderProps
+    ): void => {
+      invariant(
+        // $FlowFixMe
+        this.rdfApi === nextProps.api,
+        '<ConnectedFetch> does not support changing `api` on the fly.'
+      )
+      invariant(
+        // $FlowFixMe
+        this.rdfHeaders === nextProps.headers,
+        '<ConnectedFetch> does not support changing `headers` on the fly.'
+      )
+      invariant(
+        // $FlowFixMe
+        this.rdfLoader === nextProps.loader,
+        '<ConnectedFetch> does not support changing `loader` on the fly.'
+      )
+      invariant(
+        // $FlowFixMe
+        this.rdfInterceptor === nextProps.onIntercept,
+        '<ConnectedFetch> does not support changing `onIntercept` on the fly.'
+      )
+      invariant(
+        // $FlowFixMe
+        this.rdfStore === nextProps.store,
+        '<ConnectedFetch> does not support changing `store` on the fly.'
+      )
+      invariant(
+        // $FlowFixMe
+        this.rdfTimeout === nextProps.timeout,
+        '<ConnectedFetch> does not support changing `timeout` on the fly.'
+      )
+    }
+  }
+
+  return ConnectedFetch
+}
+
+export default createConnectedFetch()