Merge branch 'axios'

apenab · apenab · commit 92c95df81e07 · 2019-05-03T15:14:54.000-04:00
diff --git a/db.json b/db.json
@@ -0,0 +1,9 @@
+{
+  "posts": [
+    { "id": 1, "title": "json-server", "author": "typicode" },
+    { "id": 2, "title": "client", "author": "client" },
+    { "id": 3, "title": "hybrid", "author": "hybrid" }
+  ],
+  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
+  "profile": { "name": "typicode" }
+}
diff --git a/demo/src/components/AxiosAPIExample.js b/demo/src/components/AxiosAPIExample.js
@@ -0,0 +1,39 @@
+import React from "react";
+
+import {useAxiosGet} from "../../../src";
+
+
+function ListPosts() {
+    const {status, response} = useAxiosGet({
+        url: "http://localhost:3001/posts"
+    });
+    if (status === "loading") {
+        return <h5>Loading posts...</h5>;
+    }
+    else if (status === "error") {
+        return <h5>Error in loading posts.</h5>;
+    }
+    else if (status === "success") {
+        return (
+            <ul>
+                {" "}
+                {response.map(item => (
+                    <li key={item.id}>
+                        {item.title}, {item.author}
+                    </li>
+                ))}{" "}
+            </ul>
+        );
+    }
+    else {
+        return null;
+    }
+}
+
+export default function AxiosAPIExample(props) {
+    return (
+        <div>
+            <ListPosts/>
+        </div>
+    );
+}
diff --git a/demo/src/components/DymoAPIExample.js b/demo/src/components/DymoAPIExample.js
@@ -1,37 +1,46 @@
-import React from "react";
+import React, {useState, useMemo} from "react";
 
 import {useDymoCheckService, useDymoFetchPrinters} from "../../../src";
+import {generateXmlExample} from "../../../src/utils/dymo";
+import DymoLabelPreview from "./DymoLabelPreview";
 
 
 export default function DymoAPIExample() {
-    const [msg, statusDymoService] = useDymoCheckService();
-    const [printers, statusDymoLoadPrinters] = useDymoFetchPrinters(statusDymoService);
+    const statusDymoService = useDymoCheckService();
+    const [name, setName] = useState("Antonio Peña Batista");
+    const [address, setAddress] = useState("Headquarters 1120 N Street Sacramento");
+    const {statusDymoFetchPrinters, printers} = useDymoFetchPrinters(statusDymoService);
 
-    if (statusDymoService === "loading") {
-        return <h1>Checking DYMO service...</h1>;
-    }
-    else if (statusDymoService === "error") {
-        return <h1 style={{color: "red"}}>{msg}</h1>;
-    }
-    else if (statusDymoService === "success") {
-        return (
-            <div>
-                <h3 style={{color: "green"}}>DYMO service is running in your PC.</h3>
-                {statusDymoLoadPrinters === "loading" && <h4>Loading printers..</h4>}
-                {statusDymoLoadPrinters === "success" && (
-                    <React.Fragment>
-                        <h4>Printers:</h4>
-                        <ul>
-                            {printers.map(printer => (
-                                <li key={printer.name}>{printer.name}</li>
-                            ))}
-                        </ul>
-                    </React.Fragment>
-                )}
-            </div>
-        );
-    }
-    else {
-        return null;
-    }
+    const xmlMemo = useMemo(() => generateXmlExample(name, address), [address, name]);
+
+    return (
+        <div>
+            {statusDymoService !== "success" ? (
+                <h1>Checking DYMO service...</h1>
+            ) : (
+                <React.Fragment>
+                    <h3 style={{color: "green"}}>DYMO service is running in your PC.</h3>
+                    <input value={name} title="Name" onChange={e => setName(e.target.value)}/>
+                    <br/>
+                    <input value={address} title="Address" onChange={e => setAddress(e.target.value)}/>
+                </React.Fragment>
+            )}
+            <DymoLabelPreview
+                xml={xmlMemo}
+                statusDymoService={statusDymoService}
+                loadingComponent={<h4>Loading Preview...</h4>}
+                errorComponent={<h4>Error..</h4>}/>
+            {statusDymoFetchPrinters === "loading" && <h4>Loading printers..</h4>}
+            {statusDymoFetchPrinters === "success" && (
+                <React.Fragment>
+                    <h4>Printers:</h4>
+                    <ul>
+                        {printers.map(printer => (
+                            <li key={printer.name}>{printer.name}</li>
+                        ))}
+                    </ul>
+                </React.Fragment>
+            )}
+        </div>
+    );
 }
diff --git a/demo/src/components/DymoLabelPreview.js b/demo/src/components/DymoLabelPreview.js
@@ -0,0 +1,24 @@
+import React, {memo} from "react";
+
+import {useDymoOpenLabel} from "../../../src";
+
+
+const DymoLabelPreview = memo(({xml, statusDymoService, loadingComponent, errorComponent}) => {
+    const {label, statusOpenLabel} = useDymoOpenLabel(statusDymoService, xml);
+    const style = {background: "hsla(0, 0%, 50%, 0.66)", padding: 7};
+    if (statusOpenLabel === "loading") {
+        return loadingComponent;
+    }
+    else if (statusOpenLabel === "error") {
+        return errorComponent;
+    }
+    else if (statusOpenLabel === "success") {
+        return (
+            <React.Fragment>
+                <img src={"data:image/png;base64," + label} alt="dymo label preview" style={style}/>
+            </React.Fragment>
+        );
+    }
+});
+
+export default DymoLabelPreview;
diff --git a/demo/src/components/GoogleAPIExample.js b/demo/src/components/GoogleAPIExample.js
@@ -8,9 +8,6 @@ const config = require("../../../api_google.config.json");
 export default function GoogleAPIExample() {
     const gapiObject = useGoogleApiInit(config);
     const {gapiStatus, signed} = gapiObject;
-    useEffect(() => {
-        console.log(gapiObject);
-    });
     function handleSignIn() {
         window["gapi"].auth2.getAuthInstance().signIn();
     }
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -3,6 +3,7 @@ import {render} from "react-dom";
 
 import GoogleAPIExample from "./components/GoogleAPIExample";
 import DymoAPIExample from "./components/DymoAPIExample";
+import AxiosAPIExample from "./components/AxiosAPIExample";
 
 
 class Demo extends React.Component {
@@ -30,6 +31,13 @@ class Demo extends React.Component {
                     <br/>
                     {this.state.show === "dymo_example" && <DymoAPIExample/>}
                 </div>
+                <div style={{display: "inline-table", width: "30%"}}>
+                    <button onClick={() => this.setState({show: "axios_example"})}>
+                        Mount AXIOS API component example
+                    </button>
+                    <br/>
+                    {this.state.show === "axios_example" && <AxiosAPIExample/>}
+                </div>
             </div>
         );
     }
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "start": "nwb serve-react-demo",
     "test": "nwb test-react",
     "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server"
+    "test:watch": "nwb test-react --server",
+    "run:server": "json-server db.json -p 3001"
   },
   "dependencies": {
     "axios": "^0.18.0",
diff --git a/src/index.js b/src/index.js
@@ -2,3 +2,7 @@ export * from "./useGoogleApiInit";
 export * from "./useDymoCheckService";
 export * from "./useDymoFetchPrinters";
 export * from "./useDymoOpenLabel";
+export * from "./useAxios";
+export * from "./useAxiosGet";
+export * from "./useAxiosPost";
+export * from "./useDebounce";
diff --git a/src/useAxios/actions.js b/src/useAxios/actions.js
@@ -0,0 +1,6 @@
+export const fetch_start = () => ({type: "FETCH_START"});
+export const fetch_success = data => ({
+    type: "FETCH_SUCCESS",
+    payload: data
+});
+export const fetch_failure = error => ({type: "FETCH_FAILURE", error});
diff --git a/src/useAxios/index.js b/src/useAxios/index.js
@@ -0,0 +1,76 @@
+import {useReducer, useEffect, useRef, useState} from "react";
+import axios from "axios";
+
+import {init, reducer} from "./reducer";
+import {fetch_start, fetch_success, fetch_failure} from "./actions";
+
+
+export function useAxios({
+    url,
+    method,
+    options = {},
+    controlledFetch = false,
+    axiosInstance = axios,
+    successCb = () => {},
+    failedCb = () => {},
+    onlyDispatchIf = true
+}) {
+    const [state, dispatch] = useReducer(reducer, init);
+    const [innerTrigger, setInnerTrigger] = useState(null);
+    const cancelToken = useRef();
+
+    let optionsString;
+    try {
+        optionsString = JSON.stringify(options);
+    }
+    catch (err) {}
+
+    const deps = controlledFetch ? [innerTrigger] : [method, optionsString, url, onlyDispatchIf];
+
+    useEffect(() => {
+        if (!onlyDispatchIf) {
+            return;
+        }
+        if (!innerTrigger && controlledFetch) {
+            return;
+        }
+        const fetchData = async () => {
+            dispatch(fetch_start());
+            if (cancelToken.current) {
+                cancelToken.current.cancel();
+            }
+            cancelToken.current = axios.CancelToken.source();
+            try {
+                const optionsObj = JSON.parse(optionsString);
+                const results = await axiosInstance.request({
+                    url,
+                    method,
+                    cancelToken: cancelToken.current.token,
+                    ...optionsObj
+                });
+                successCb(results.data);
+                dispatch(fetch_success(results.data));
+            }
+            catch (error) {
+                failedCb(error);
+                if (!axios.isCancel(error)) {
+                    dispatch(fetch_failure(error));
+                }
+            }
+        };
+        fetchData();
+        return function cleanup() {
+            if (cancelToken.current) {
+                cancelToken.current.cancel();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+
+    return {
+        ...state,
+        dispatchFetch: () => {
+            setInnerTrigger(+new Date());
+        }
+    };
+}
diff --git a/src/useAxios/reducer.js b/src/useAxios/reducer.js
@@ -0,0 +1,29 @@
+import produce from "immer";
+
+
+export const init = {status: "init", response: null, error: null};
+
+export function reducer(state, action) {
+    switch (action.type) {
+    case "FETCH_START":
+        return produce(state, draftState => {
+            draftState.status = "loading";
+            draftState.error = null;
+            draftState.response = null;
+        });
+    case "FETCH_SUCCESS":
+        return produce(state, draftState => {
+            draftState.status = "success";
+            draftState.error = null;
+            draftState.response = action.payload;
+        });
+    case "FETCH_FAILURE":
+        return produce(state, draftState => {
+            draftState.status = "error";
+            draftState.error = action.error;
+            draftState.response = null;
+        });
+    default:
+        break;
+    }
+}
diff --git a/src/useAxiosGet/index.js b/src/useAxiosGet/index.js
@@ -0,0 +1,20 @@
+import {useAxios} from "../index";
+
+import {useDebounce} from "../useDebounce";
+
+
+export function useAxiosGet({
+    url = "",
+    options = {},
+    controlledFetch,
+    delay = 0,
+    axiosInstance,
+    onlyDispatchIf,
+    successCb,
+    failedCb
+}) {
+    const debounceProps = useDebounce({url, method: "GET", options, controlledFetch, onlyDispatchIf}, delay);
+    const state = useAxios({...debounceProps, axiosInstance, successCb, failedCb});
+
+    return state;
+}
diff --git a/src/useAxiosPost/index.js b/src/useAxiosPost/index.js
@@ -0,0 +1,20 @@
+import {useAxios} from "../index";
+
+import {useDebounce} from "../useDebounce";
+
+
+export function useAxiosPost({
+    url = "",
+    options = {},
+    controlledFetch,
+    delay = 0,
+    axiosInstance,
+    successCb,
+    failedCb,
+    onlyDispatchIf
+}) {
+    const debounceProps = useDebounce({url, method: "POST", options, controlledFetch, onlyDispatchIf}, delay);
+    const state = useAxios({...debounceProps, axiosInstance, successCb, failedCb});
+
+    return state;
+}
diff --git a/src/useDebounce/index.js b/src/useDebounce/index.js
@@ -0,0 +1,25 @@
+import {useRef, useState, useEffect} from "react";
+
+
+export function useDebounce(data, delay) {
+    const handler = useRef();
+    const [value, setValue] = useState(data);
+    let optionsString;
+    try {
+        optionsString = JSON.stringify(data);
+    }
+    catch (err) {}
+
+    useEffect(() => {
+        handler.current = setTimeout(() => {
+            setValue(data);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [optionsString, delay]);
+
+    return value;
+}
diff --git a/src/useDymoCheckService/index.js b/src/useDymoCheckService/index.js
diff --git a/src/useDymoFetchPrinters/index.js b/src/useDymoFetchPrinters/index.js
diff --git a/src/useDymoOpenLabel/index.js b/src/useDymoOpenLabel/index.js
diff --git a/src/utils/dymo.js b/src/utils/dymo.js
