New examples

Author: apenab

README.md

@@ -108,6 +108,39 @@ Object containing:
 - `error: object`: Request error.
 - `dispatchFetch: function`: Dispatched request if `controlledFetch` property is `true`.
 
+#### Example
+
+```js
+import { useAxiosPost } from "react-hooks-toolbox";
+
+const AddPost = () => {
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+
+  const { status, response, dispatchFetch } = useAxiosPost({
+    url: "http://localhost:3001/posts",
+    controlledFetch: true,
+    options: {
+      data: {
+        title: title,
+        author: author
+      }
+    },
+    successCb: response => {
+      console.log(response);
+    }
+  });
+
+  return (
+    <div>
+      <input value={title} onChange={e => setTitle(e.target.value)} />
+      <input value={author} onChange={e => setAuthor(e.target.value)} />
+      <button onClick={() => dispatchFetch()}>Add Post</button>
+    </div>
+  );
+};
+```
+
 ## Google-API
 
 ### `useGoogleApiInit()`
@@ -197,7 +230,8 @@ const DymoLabelPreview = () => {
   }
 };
 ```
+
 [npm-image]: https://img.shields.io/npm/v/react-hooks-toolbox.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/react-hooks-toolbox
 [download-image]: https://img.shields.io/npm/dm/react-hooks-toolbox.svg?style=flat-square
-[download-url]: https://npmjs.org/package/react-hooks-toolbox
+[download-url]: https://npmjs.org/package/react-hooks-toolbox

db.json

@@ -1,9 +1,34 @@
 {
   "posts": [
-    { "id": 1, "title": "json-server", "author": "typicode" },
-    { "id": 2, "title": "client", "author": "client" },
-    { "id": 3, "title": "hybrid", "author": "hybrid" }
+    {
+      "id": 1,
+      "title": "Harry Potter and the Sorcerer's Stone",
+      "author": "J. K. Rowling"
+    },
+    {
+      "id": 2,
+      "title": "The Hobbit",
+      "author": "J. R. R. Tolkien"
+    },
+    {
+      "id": 3,
+      "title": "The Fellowship of the Ring",
+      "author": "J. R. R. Tolkien"
+    },
+    {
+      "title": "Catching Fire",
+      "author": "Suzanne Collins",
+      "id": 4
+    }
   ],
-  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
-  "profile": { "name": "typicode" }
-}
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

demo/src/components/AxiosAPIExample.js

@@ -1,39 +1,111 @@
-import React from "react";
+import React, {useState, useReducer, useContext, createContext} from "react";
+import produce from "immer";
 
-import {useAxiosGet} from "../../../src";
+import {useAxiosGet, useAxiosPost, useAxios} from "../../../src";
 
 
+const Context = createContext();
+
 function ListPosts() {
-    const {status, response} = useAxiosGet({
-        url: "http://localhost:3001/posts"
+    const {state, dispatch} = useContext(Context);
+    const [postId, setPostId] = useState(null);
+    const {status} = useAxiosGet({
+        url: "http://localhost:3001/posts",
+        successCb: response => {
+            dispatch({type: "FETCHED_POSTS", payload: response});
+        }
+    });
+    const {dispatchFetch} = useAxios({
+        url: `http://localhost:3001/posts/${postId}`,
+        method: "DELETE",
+        controlledFetch: true
     });
     if (status === "loading") {
         return <h5>Loading posts...</h5>;
     }
     else if (status === "error") {
-        return <h5>Error in loading posts.</h5>;
+        return <h5 style={{color: "red"}}>Error in loading posts</h5>;
     }
-    else if (status === "success") {
-        return (
-            <ul>
-                {" "}
-                {response.map(item => (
-                    <li key={item.id}>
-                        {item.title}, {item.author}
-                    </li>
-                ))}{" "}
-            </ul>
-        );
+
+    function handleDeletePost(post) {
+        setPostId(post.id);
+        dispatchFetch();
+        dispatch({type: "DELETED_POST", id: post.id});
     }
-    else {
-        return null;
+
+    return (
+        <ul>
+            {state.posts.map(post => (
+                <li key={post.id}>
+                    {post.title} by <strong>{post.author}</strong>{" "}
+                    <a href="javascript:void(0)" onClick={() => handleDeletePost(post)}>
+                        Delete Post
+                    </a>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+function AddPost() {
+    const {dispatch} = useContext(Context);
+    const [title, setTitle] = useState("");
+    const [author, setAuthor] = useState("");
+    const {dispatchFetch, status} = useAxiosPost({
+        url: "http://localhost:3001/posts",
+        controlledFetch: true,
+        options: {
+            data: {
+                title: title,
+                author: author
+            }
+        },
+        successCb: response => {
+            dispatch({type: "ADD_POST", payload: response});
+        }
+    });
+
+    const loading = status === "loading";
+    return (
+        <div>
+            <input value={title} onChange={e => setTitle(e.target.value)} disabled={loading}/>
+            <input value={author} onChange={e => setAuthor(e.target.value)} disabled={loading}/>
+            <button onClick={() => dispatchFetch()} disabled={loading}>
+                {loading ? "Loading..." : "Add Post"}
+            </button>
+        </div>
+    );
+}
+
+const initState = {posts: []};
+
+function reducer(state, action) {
+    switch (action.type) {
+    case "ADD_POST":
+        return produce(state, draftState => {
+            draftState.posts.push(action.payload);
+        });
+    case "FETCHED_POSTS":
+        return produce(state, draftState => {
+            draftState.posts = action.payload;
+        });
+    case "DELETED_POST":
+        return produce(state, draftState => {
+            const {posts} = state,
+                index = posts.findIndex(post => post["id"] === action.id);
+            draftState.posts.splice(index, 1);
+        });
+    default:
+        return state;
     }
 }
 
 export default function AxiosAPIExample(props) {
+    const [state, dispatch] = useReducer(reducer, initState);
     return (
-        <div>
+        <Context.Provider value={{state, dispatch}}>
             <ListPosts/>
-        </div>
+            <AddPost/>
+        </Context.Provider>
     );
 }