Skip to content

Commit 92c95df

Browse files
apenabapenab
committed
Merge branch 'axios'
2 parents 3c3eba5 + 0c16456 commit 92c95df

File tree

18 files changed

+514
-92
lines changed

18 files changed

+514
-92
lines changed

‎db.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"posts": [
3+
{ "id": 1, "title": "json-server", "author": "typicode" },
4+
{ "id": 2, "title": "client", "author": "client" },
5+
{ "id": 3, "title": "hybrid", "author": "hybrid" }
6+
],
7+
"comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
8+
"profile": { "name": "typicode" }
9+
}

‎demo/src/components/AxiosAPIExample.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
3+
import {useAxiosGet} from "../../../src";
4+
5+
6+
function ListPosts() {
7+
const {status, response} = useAxiosGet({
8+
url: "http://localhost:3001/posts"
9+
});
10+
if (status === "loading") {
11+
return <h5>Loading posts...</h5>;
12+
}
13+
else if (status === "error") {
14+
return <h5>Error in loading posts.</h5>;
15+
}
16+
else if (status === "success") {
17+
return (
18+
<ul>
19+
{" "}
20+
{response.map(item => (
21+
<li key={item.id}>
22+
{item.title}, {item.author}
23+
</li>
24+
))}{" "}
25+
</ul>
26+
);
27+
}
28+
else {
29+
return null;
30+
}
31+
}
32+
33+
export default function AxiosAPIExample(props) {
34+
return (
35+
<div>
36+
<ListPosts/>
37+
</div>
38+
);
39+
}

‎demo/src/components/DymoAPIExample.js‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,46 @@
1-
import React from "react";
1+
import React, {useState, useMemo} from "react";
22

33
import {useDymoCheckService, useDymoFetchPrinters} from "../../../src";
4+
import {generateXmlExample} from "../../../src/utils/dymo";
5+
import DymoLabelPreview from "./DymoLabelPreview";
46

57

68
export default function DymoAPIExample() {
7-
const [msg, statusDymoService] = useDymoCheckService();
8-
const [printers, statusDymoLoadPrinters] = useDymoFetchPrinters(statusDymoService);
9+
const statusDymoService = useDymoCheckService();
10+
const [name, setName] = useState("Antonio Peña Batista");
11+
const [address, setAddress] = useState("Headquarters 1120 N Street Sacramento");
12+
const {statusDymoFetchPrinters, printers} = useDymoFetchPrinters(statusDymoService);
913

10-
if (statusDymoService === "loading") {
11-
return <h1>Checking DYMO service...</h1>;
12-
}
13-
else if (statusDymoService === "error") {
14-
return <h1 style={{color: "red"}}>{msg}</h1>;
15-
}
16-
else if (statusDymoService === "success") {
17-
return (
18-
<div>
19-
<h3 style={{color: "green"}}>DYMO service is running in your PC.</h3>
20-
{statusDymoLoadPrinters === "loading" && <h4>Loading printers..</h4>}
21-
{statusDymoLoadPrinters === "success" && (
22-
<React.Fragment>
23-
<h4>Printers:</h4>
24-
<ul>
25-
{printers.map(printer => (
26-
<li key={printer.name}>{printer.name}</li>
27-
))}
28-
</ul>
29-
</React.Fragment>
30-
)}
31-
</div>
32-
);
33-
}
34-
else {
35-
return null;
36-
}
14+
const xmlMemo = useMemo(() => generateXmlExample(name, address), [address, name]);
15+
16+
return (
17+
<div>
18+
{statusDymoService !== "success" ? (
19+
<h1>Checking DYMO service...</h1>
20+
) : (
21+
<React.Fragment>
22+
<h3 style={{color: "green"}}>DYMO service is running in your PC.</h3>
23+
<input value={name} title="Name" onChange={e => setName(e.target.value)}/>
24+
<br/>
25+
<input value={address} title="Address" onChange={e => setAddress(e.target.value)}/>
26+
</React.Fragment>
27+
)}
28+
<DymoLabelPreview
29+
xml={xmlMemo}
30+
statusDymoService={statusDymoService}
31+
loadingComponent={<h4>Loading Preview...</h4>}
32+
errorComponent={<h4>Error..</h4>}/>
33+
{statusDymoFetchPrinters === "loading" && <h4>Loading printers..</h4>}
34+
{statusDymoFetchPrinters === "success" && (
35+
<React.Fragment>
36+
<h4>Printers:</h4>
37+
<ul>
38+
{printers.map(printer => (
39+
<li key={printer.name}>{printer.name}</li>
40+
))}
41+
</ul>
42+
</React.Fragment>
43+
)}
44+
</div>
45+
);
3746
}

‎demo/src/components/DymoLabelPreview.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, {memo} from "react";
2+
3+
import {useDymoOpenLabel} from "../../../src";
4+
5+
6+
const DymoLabelPreview = memo(({xml, statusDymoService, loadingComponent, errorComponent}) => {
7+
const {label, statusOpenLabel} = useDymoOpenLabel(statusDymoService, xml);
8+
const style = {background: "hsla(0, 0%, 50%, 0.66)", padding: 7};
9+
if (statusOpenLabel === "loading") {
10+
return loadingComponent;
11+
}
12+
else if (statusOpenLabel === "error") {
13+
return errorComponent;
14+
}
15+
else if (statusOpenLabel === "success") {
16+
return (
17+
<React.Fragment>
18+
<img src={"data:image/png;base64," + label} alt="dymo label preview" style={style}/>
19+
</React.Fragment>
20+
);
21+
}
22+
});
23+
24+
export default DymoLabelPreview;

‎demo/src/components/GoogleAPIExample.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ const config = require("../../../api_google.config.json");
88
export default function GoogleAPIExample() {
99
const gapiObject = useGoogleApiInit(config);
1010
const {gapiStatus, signed} = gapiObject;
11-
useEffect(() => {
12-
console.log(gapiObject);
13-
});
1411
function handleSignIn() {
1512
window["gapi"].auth2.getAuthInstance().signIn();
1613
}

‎demo/src/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {render} from "react-dom";
33

44
import GoogleAPIExample from "./components/GoogleAPIExample";
55
import DymoAPIExample from "./components/DymoAPIExample";
6+
import AxiosAPIExample from "./components/AxiosAPIExample";
67

78

89
class Demo extends React.Component {
@@ -30,6 +31,13 @@ class Demo extends React.Component {
3031
<br/>
3132
{this.state.show === "dymo_example" && <DymoAPIExample/>}
3233
</div>
34+
<div style={{display: "inline-table", width: "30%"}}>
35+
<button onClick={() => this.setState({show: "axios_example"})}>
36+
Mount AXIOS API component example
37+
</button>
38+
<br/>
39+
{this.state.show === "axios_example" && <AxiosAPIExample/>}
40+
</div>
3341
</div>
3442
);
3543
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"start": "nwb serve-react-demo",
1818
"test": "nwb test-react",
1919
"test:coverage": "nwb test-react --coverage",
20-
"test:watch": "nwb test-react --server"
20+
"test:watch": "nwb test-react --server",
21+
"run:server": "json-server db.json -p 3001"
2122
},
2223
"dependencies": {
2324
"axios": "^0.18.0",

‎src/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,7 @@ export * from "./useGoogleApiInit";
22
export * from "./useDymoCheckService";
33
export * from "./useDymoFetchPrinters";
44
export * from "./useDymoOpenLabel";
5+
export * from "./useAxios";
6+
export * from "./useAxiosGet";
7+
export * from "./useAxiosPost";
8+
export * from "./useDebounce";

‎src/useAxios/actions.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const fetch_start = () => ({type: "FETCH_START"});
2+
export const fetch_success = data => ({
3+
type: "FETCH_SUCCESS",
4+
payload: data
5+
});
6+
export const fetch_failure = error => ({type: "FETCH_FAILURE", error});

‎src/useAxios/index.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {useReducer, useEffect, useRef, useState} from "react";
2+
import axios from "axios";
3+
4+
import {init, reducer} from "./reducer";
5+
import {fetch_start, fetch_success, fetch_failure} from "./actions";
6+
7+
8+
export function useAxios({
9+
url,
10+
method,
11+
options = {},
12+
controlledFetch = false,
13+
axiosInstance = axios,
14+
successCb = () => {},
15+
failedCb = () => {},
16+
onlyDispatchIf = true
17+
}) {
18+
const [state, dispatch] = useReducer(reducer, init);
19+
const [innerTrigger, setInnerTrigger] = useState(null);
20+
const cancelToken = useRef();
21+
22+
let optionsString;
23+
try {
24+
optionsString = JSON.stringify(options);
25+
}
26+
catch (err) {}
27+
28+
const deps = controlledFetch ? [innerTrigger] : [method, optionsString, url, onlyDispatchIf];
29+
30+
useEffect(() => {
31+
if (!onlyDispatchIf) {
32+
return;
33+
}
34+
if (!innerTrigger && controlledFetch) {
35+
return;
36+
}
37+
const fetchData = async () => {
38+
dispatch(fetch_start());
39+
if (cancelToken.current) {
40+
cancelToken.current.cancel();
41+
}
42+
cancelToken.current = axios.CancelToken.source();
43+
try {
44+
const optionsObj = JSON.parse(optionsString);
45+
const results = await axiosInstance.request({
46+
url,
47+
method,
48+
cancelToken: cancelToken.current.token,
49+
...optionsObj
50+
});
51+
successCb(results.data);
52+
dispatch(fetch_success(results.data));
53+
}
54+
catch (error) {
55+
failedCb(error);
56+
if (!axios.isCancel(error)) {
57+
dispatch(fetch_failure(error));
58+
}
59+
}
60+
};
61+
fetchData();
62+
return function cleanup() {
63+
if (cancelToken.current) {
64+
cancelToken.current.cancel();
65+
}
66+
};
67+
// eslint-disable-next-line react-hooks/exhaustive-deps
68+
}, deps);
69+
70+
return {
71+
...state,
72+
dispatchFetch: () => {
73+
setInnerTrigger(+new Date());
74+
}
75+
};
76+
}

0 commit comments

Comments
 (0)