From e640af715ae93a3c65e75e18bcbe3ce1c30dae36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20P=C3=A9rez=20Farr=C3=A9s?=
 <albert.pfarres@gmail.com>
Date: Fri, 19 Jun 2020 15:55:02 +0200
Subject: [PATCH] Linter readme (#7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix code example on README.md

* Add POST, PUT, DELETE actions example

Co-authored-by: Albert Pérez <albert.perez@immfly.com>
---
 README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 443dec8..8b3f872 100644
--- a/README.md
+++ b/README.md
@@ -50,10 +50,17 @@ npm install --save @sonofjs/use-async
 ## Usage
 This is a very simple example showing how to use the `useAsync` hook.
 * `axios` is used as client agent
-* Action types:
-    *  `GET_DATA`: dispatched on the `useEffect`hook of `Component`. It has a `request` key in the output of the action, which indicates the client agent that should make an http request.
-    *  `GET_DATA_SUCCESS`: will be dispatched if the http call throwed through the `GET_DATA` action has been successfully executed.
-    *  `GET_DATA_ERROR`: will be dispatched if the http call throwed through the `GET_DATA` action has failed.
+* Example action types:
+    *  `FETCH_DATA`: dispatched on the `useEffect`hook of `Component`. It has a `request` key in the output of the action, which indicates the client agent that should make an http request.
+    *  `FETCH_DATA_SUCCESS`: will be dispatched if the http call throwed through the `FETCH_DATA` action has been successfully executed.
+    *  `FETCH_DATA_ERROR`: will be dispatched if the http call throwed through the `FETCH_DATA` action has failed.
+    *  `CREATE`: dispatched on the button click event. Will throw an http POST request.
+    *  `CREATE_SUCCESS`: will be dispatched if the http call throwed through the `CREATE` action has been successfully executed.
+    *  `CREATE`: will be dispatched if the http call throwed through the `CREATE` action has failed.
+    *  `UPDATE`: will throw an http PUT request.
+    *  `DELETE`: will throw an http DELETE request.
+
+Note: *the `*_SUCCESS` and `*_ERROR` actions are optionals.*
 
 ### Client store
 Specify the client agent through the `ClientStore`.
@@ -79,7 +86,7 @@ export default ViewContainer
 Define the state actions and use the `useAsync` hook to manage it.
 
 ```
-import React, { useEffect }  from 'react'
+import React, { useEffect } from 'react'
 import useAsync from '@sonofjs/use-async'
 
 const actions = {
@@ -100,6 +107,38 @@ const actions = {
     ...state,
     loading: false,
     error
+  }),
+  CREATE: (state, payload) => ({
+    ...state,
+    request: {
+      method: 'POST',
+      url: '/api/data',
+      body: payload
+    }
+  }),
+  CREATE_SUCCESS: (state, response) => ({
+    ...state,
+    data: response
+  }),
+  CREATE_ERROR: (state, error) => ({
+    ...state,
+    error
+  }),
+  UPDATE: (state, payload) => ({
+    ...state,
+    request: {
+      method: 'PUT',
+      url: '/api/data',
+      body: payload
+    }
+  }),
+  DELETE: (state, payload) => ({
+    ...state,
+    request: {
+      method: 'DELETE',
+      url: '/api/data',
+      body: payload
+    }
   })
 }
 
@@ -110,17 +149,20 @@ const initialState = {
 
 const Component = () => {
   const [state, dispatch] = useAsync(actions, initialState)
-    
+
   useEffect(() => {
-    dispatch({ type: 'DATA' })
+    dispatch({ type: 'FETCH_DATA' })
   }, [])
-    
+
+  const create = () => dispatch({ type: 'CREATE', payload: { name: '::name::' } })
+
   return (
     <>
       {state.loading ? <span>Loading...</span> : null}
       {<span>{JSON.stringify(state.data)}</span>}
       {state.error ? <span>Error: {JSON.stringify(state.error)}</span> : null}
-    <>
+      <button onClick={create}>Create</button>
+    </>
   )
 }
 
@@ -187,6 +229,3 @@ Albert Pérez Farrés
 
 ## License
  - **MIT** : http://opensource.org/licenses/MIT
- 
-
-