Initial import

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.travis.yml

@@ -1,8 +1,5 @@
-sudo: false
-
 language: node_js
-node_js:
-  - 8
+node_js: 11
 
 before_install:
   - npm install codecov.io coveralls
@@ -14,3 +11,9 @@ after_success:
 branches:
   only:
     - master
+
+deploy:
+  provider: script
+  script: bash deploy.sh
+  on:
+    tags: true

demo/src/index.js

@@ -1,15 +1,24 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
+import React from 'react'
+import { render } from 'react-dom'
 
-import Example from '../../src'
+import useAxios from '../../src'
 
-class Demo extends Component {
-  render() {
-    return <div>
-      <h1>axios-hooks Demo</h1>
-      <Example/>
+function AxiosHooksDemo() {
+  const [{ data, loading, error }, reload] = useAxios(
+    'https://jsonplaceholder.typicode.com/todos/1'
+  )
+
+  return (
+    <div>
+      <h1>axios-hooks demo</h1>
+      <button onClick={reload}>Reload data</button>
+      <div>
+        {loading && 'Loading...'}
+        {error && 'Error!!!'}
+        <pre>{data && JSON.stringify(data, null, 2)}</pre>
+      </div>
     </div>
-  }
+  )
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<AxiosHooksDemo />, document.querySelector('#demo'))

package.json

@@ -1,11 +1,10 @@
 {
   "name": "axios-hooks",
-  "version": "1.0.0",
-  "description": "axios-hooks React component",
+  "version": "0.1.0",
+  "description": "axios-hooks",
   "main": "lib/index.js",
   "module": "es/index.js",
   "files": [
-    "css",
     "es",
     "lib",
     "umd"
@@ -19,20 +18,39 @@
     "test:coverage": "nwb test-react --coverage",
     "test:watch": "nwb test-react --server"
   },
-  "dependencies": {},
+  "dependencies": {
+    "lru-cache": "^5.1.1"
+  },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "^16.8.x",
+    "axios": "^0.18.0"
   },
   "devDependencies": {
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.4",
     "nwb": "0.23.x",
+    "prettier": "^1.16.4",
     "react": "^16.8.2",
     "react-dom": "^16.8.2"
   },
-  "author": "",
-  "homepage": "",
+  "author": "Simone Busoli <simone.busoli@gmail.com>",
+  "homepage": "https://github.com/simoneb/axios-hooks",
   "license": "MIT",
   "repository": "",
   "keywords": [
-    "react-component"
-  ]
+    "axios",
+    "react",
+    "hooks"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,json,md,yml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
 }

scripts/publish.sh

@@ -0,0 +1,3 @@
+OTP=$(curl https://my-otp.herokuapp.com/api/generate/$MY_OTP_TOKEN)
+echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+npm publish --otp $OTP

src/index.js

@@ -1,9 +1,99 @@
-import React, {Component} from 'react'
+import React from 'react'
+import axios from 'axios'
+import LRU from 'lru-cache'
 
-export default class extends Component {
-  render() {
-    return <div>
-      <h2>Welcome to React components</h2>
-    </div>
+const actions = {
+  REQUEST_START: 'REQUEST_START',
+  REQUEST_END: 'REQUEST_END'
+}
+
+const initialState = {
+  loading: false
+}
+
+const ssrPromises = []
+
+export const cache = new LRU()
+
+export const serializeCache = async () => {
+  await Promise.all(ssrPromises)
+
+  ssrPromises.length = 0
+
+  return cache.dump()
+}
+
+async function cacheAdapter(config) {
+  const cacheKey = JSON.stringify(config)
+  const hit = cache.get(cacheKey)
+
+  if (hit) {
+    return hit
+  }
+
+  delete config.adapter
+
+  const response = await axios(config)
+
+  const responseForCache = { ...response }
+  delete responseForCache.config
+  delete responseForCache.request
+
+  cache.set(cacheKey, responseForCache)
+
+  return response
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case actions.REQUEST_START:
+      return {
+        ...state,
+        loading: true
+      }
+    case actions.REQUEST_END:
+      return {
+        ...state,
+        loading: false,
+        ...(action.error ? {} : { data: action.payload.data }),
+        [action.error ? 'error' : 'response']: action.payload
+      }
+    default:
+      return state
   }
 }
+
+async function request(config, dispatch) {
+  try {
+    dispatch({ type: actions.REQUEST_START })
+    const response = await axios(config)
+    dispatch({ type: actions.REQUEST_END, payload: response })
+  } catch (err) {
+    dispatch({ type: actions.REQUEST_END, payload: err, error: true })
+  }
+}
+
+export default function useAxios(config) {
+  if (typeof config === 'string') {
+    config = {
+      url: config
+    }
+  }
+
+  const [state, dispatch] = React.useReducer(reducer, initialState)
+
+  if (typeof window === 'undefined') {
+    ssrPromises.push(axios({ ...config, adapter: cacheAdapter }))
+  }
+
+  React.useEffect(() => {
+    request({ ...config, adapter: cacheAdapter }, dispatch)
+  }, [JSON.stringify(config)])
+
+  return [
+    state,
+    function refetch() {
+      return request(config, dispatch)
+    }
+  ]
+}

tests/index-test.js

@@ -1,23 +1,5 @@
-import expect from 'expect'
-import React from 'react'
-import {render, unmountComponentAtNode} from 'react-dom'
-
-import Component from 'src/'
-
-describe('Component', () => {
-  let node
-
-  beforeEach(() => {
-    node = document.createElement('div')
-  })
-
-  afterEach(() => {
-    unmountComponentAtNode(node)
-  })
-
-  it('displays a welcome message', () => {
-    render(<Component/>, node, () => {
-      expect(node.innerHTML).toContain('Welcome to React components')
-    })
+describe('useAxios', () => {
+  it('works', () => {
+    console.log('all good')
   })
 })