@xyo-network/react-shared 2.55.1 → 2.55.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/usePromise.js +31 -72
- package/dist/cjs/hooks/usePromise.js.map +1 -1
- package/dist/docs.json +302 -306
- package/dist/esm/hooks/usePromise.js +34 -73
- package/dist/esm/hooks/usePromise.js.map +1 -1
- package/dist/types/hooks/usePromise.d.ts +1 -2
- package/dist/types/hooks/usePromise.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/hooks/usePromise.ts +29 -82
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Inspired from https://github.com/bsonntag/react-use-promise
|
|
2
|
-
import { useEffect, useMemo,
|
|
2
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
export var State;
|
|
4
4
|
(function (State) {
|
|
5
5
|
State["pending"] = "pending";
|
|
@@ -10,92 +10,53 @@ export var State;
|
|
|
10
10
|
* usePromise -
|
|
11
11
|
*/
|
|
12
12
|
export const usePromise = (promise, dependencies = [], debug = undefined) => {
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const reducer = (_state, action) => {
|
|
19
|
-
switch (action.type) {
|
|
20
|
-
case State.pending:
|
|
21
|
-
return defaultState;
|
|
22
|
-
case State.resolved:
|
|
23
|
-
return {
|
|
24
|
-
error: undefined,
|
|
25
|
-
result: action.payload,
|
|
26
|
-
state: State.resolved,
|
|
27
|
-
};
|
|
28
|
-
case State.rejected:
|
|
29
|
-
return {
|
|
30
|
-
error: action.error,
|
|
31
|
-
result: undefined,
|
|
32
|
-
state: State.rejected,
|
|
33
|
-
};
|
|
34
|
-
default:
|
|
35
|
-
throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`);
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState);
|
|
13
|
+
const [result, setResult] = useState();
|
|
14
|
+
const [error, setError] = useState();
|
|
15
|
+
const [state, setState] = useState(State.pending);
|
|
16
|
+
if (debug)
|
|
17
|
+
console.log(`usePromise [${debug}]: started [${typeof promise}]`);
|
|
39
18
|
const promiseMemo = useMemo(() => {
|
|
40
19
|
try {
|
|
20
|
+
if (debug)
|
|
21
|
+
console.log(`usePromise [${debug}]: re-memo [${typeof promise}]`);
|
|
22
|
+
setState(State.pending);
|
|
41
23
|
return promise?.();
|
|
42
24
|
}
|
|
43
25
|
catch (e) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
26
|
+
if (debug)
|
|
27
|
+
console.log(`usePromise [${debug}]: useMemo rejection [${typeof promise}]`);
|
|
28
|
+
setResult(undefined);
|
|
29
|
+
setError(e);
|
|
30
|
+
setState(State.rejected);
|
|
49
31
|
}
|
|
50
32
|
}, dependencies);
|
|
51
33
|
if (debug)
|
|
52
|
-
console.
|
|
34
|
+
console.log(`usePromise [${debug}] Main Function`);
|
|
53
35
|
useEffect(() => {
|
|
54
|
-
dispatch({ type: State.pending });
|
|
55
36
|
if (debug)
|
|
56
|
-
console.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
.then((payload) => {
|
|
60
|
-
if (debug)
|
|
61
|
-
console.debug(`usePromise [${debug}] then`);
|
|
62
|
-
dispatch({
|
|
63
|
-
error: undefined,
|
|
64
|
-
payload,
|
|
65
|
-
type: State.resolved,
|
|
66
|
-
});
|
|
67
|
-
})
|
|
68
|
-
.catch((error) => {
|
|
69
|
-
if (debug)
|
|
70
|
-
console.debug(`usePromise [${debug}] catch`);
|
|
71
|
-
dispatch({
|
|
72
|
-
error: error,
|
|
73
|
-
payload: undefined,
|
|
74
|
-
type: State.rejected,
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
else if (promiseMemo) {
|
|
79
|
-
dispatch({
|
|
80
|
-
error: undefined,
|
|
81
|
-
payload: promiseMemo,
|
|
82
|
-
type: State.resolved,
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
37
|
+
console.log(`usePromise [${debug}] useEffect`);
|
|
38
|
+
promiseMemo
|
|
39
|
+
?.then((payload) => {
|
|
86
40
|
if (debug)
|
|
87
|
-
console.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
41
|
+
console.log(`usePromise [${debug}] then`);
|
|
42
|
+
setResult(payload);
|
|
43
|
+
setError(undefined);
|
|
44
|
+
setState(State.resolved);
|
|
45
|
+
})
|
|
46
|
+
.catch((e) => {
|
|
47
|
+
const error = e;
|
|
48
|
+
console.error(`usePromise: ${error.message}`);
|
|
49
|
+
setResult(undefined);
|
|
50
|
+
setError(error);
|
|
51
|
+
setState(State.rejected);
|
|
52
|
+
});
|
|
94
53
|
return () => {
|
|
95
54
|
if (debug)
|
|
96
|
-
console.
|
|
55
|
+
console.log(`usePromise [${debug}] useEffect callback`);
|
|
97
56
|
};
|
|
98
|
-
}, [promiseMemo]);
|
|
57
|
+
}, [...dependencies, promiseMemo]);
|
|
58
|
+
if (debug)
|
|
59
|
+
console.log(`usePromise [${debug}] returning ${JSON.stringify([result, error, state], null, 2)}`);
|
|
99
60
|
return [result, error, state];
|
|
100
61
|
};
|
|
101
62
|
//# sourceMappingURL=usePromise.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAAA,8DAA8D;
|
|
1
|
+
{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Promisable } from '@xyo-network/promise';
|
|
2
1
|
import { DependencyList } from 'react';
|
|
3
2
|
export declare enum State {
|
|
4
3
|
pending = "pending",
|
|
@@ -8,5 +7,5 @@ export declare enum State {
|
|
|
8
7
|
/**
|
|
9
8
|
* usePromise -
|
|
10
9
|
*/
|
|
11
|
-
export declare const usePromise: <TResult>(promise: () =>
|
|
10
|
+
export declare const usePromise: <TResult>(promise: () => Promise<TResult> | undefined, dependencies?: DependencyList, debug?: string | undefined) => [TResult | undefined, Error | undefined, State | undefined];
|
|
12
11
|
//# sourceMappingURL=usePromise.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePromise.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"usePromise.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePromise.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAgC,MAAM,OAAO,CAAA;AAEpE,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,gGAGd,MAAM,GAAG,SAAS,gEA6C1B,CAAA"}
|
package/package.json
CHANGED
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"@xylabs/react-flexbox": "^2.17.3",
|
|
17
17
|
"@xylabs/react-link": "^2.17.3",
|
|
18
18
|
"@xylabs/react-shared": "^2.17.3",
|
|
19
|
-
"@xyo-network/core": "^2.63.
|
|
20
|
-
"@xyo-network/payload-model": "^2.63.
|
|
21
|
-
"@xyo-network/promise": "^2.63.
|
|
22
|
-
"@xyo-network/react-event": "^2.55.
|
|
19
|
+
"@xyo-network/core": "^2.63.2",
|
|
20
|
+
"@xyo-network/payload-model": "^2.63.2",
|
|
21
|
+
"@xyo-network/promise": "^2.63.2",
|
|
22
|
+
"@xyo-network/react-event": "^2.55.3"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@storybook/react": "^7.0.23",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
},
|
|
81
81
|
"sideEffects": false,
|
|
82
82
|
"types": "dist/types/index.d.ts",
|
|
83
|
-
"version": "2.55.
|
|
83
|
+
"version": "2.55.3"
|
|
84
84
|
}
|
package/src/hooks/usePromise.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Inspired from https://github.com/bsonntag/react-use-promise
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import { DependencyList, Reducer, useEffect, useMemo, useReducer } from 'react'
|
|
3
|
+
import { DependencyList, useEffect, useMemo, useState } from 'react'
|
|
5
4
|
|
|
6
5
|
export enum State {
|
|
7
6
|
pending = 'pending',
|
|
@@ -9,107 +8,55 @@ export enum State {
|
|
|
9
8
|
resolved = 'resolved',
|
|
10
9
|
}
|
|
11
10
|
|
|
12
|
-
interface PromiseState<T = void> {
|
|
13
|
-
error?: Error
|
|
14
|
-
result?: T
|
|
15
|
-
state?: State
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
type Action<T> = { error?: Error; payload?: T; type: State }
|
|
19
|
-
|
|
20
11
|
/**
|
|
21
12
|
* usePromise -
|
|
22
13
|
*/
|
|
23
14
|
export const usePromise = <TResult>(
|
|
24
|
-
promise: () =>
|
|
15
|
+
promise: () => Promise<TResult> | undefined,
|
|
25
16
|
dependencies: DependencyList = [],
|
|
26
17
|
debug: string | undefined = undefined,
|
|
27
18
|
): [TResult | undefined, Error | undefined, State | undefined] => {
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
state: State.pending,
|
|
32
|
-
}
|
|
19
|
+
const [result, setResult] = useState<TResult>()
|
|
20
|
+
const [error, setError] = useState<Error>()
|
|
21
|
+
const [state, setState] = useState<State>(State.pending)
|
|
33
22
|
|
|
34
|
-
|
|
35
|
-
switch (action.type) {
|
|
36
|
-
case State.pending:
|
|
37
|
-
return defaultState
|
|
38
|
-
|
|
39
|
-
case State.resolved:
|
|
40
|
-
return {
|
|
41
|
-
error: undefined,
|
|
42
|
-
result: action.payload,
|
|
43
|
-
state: State.resolved,
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
case State.rejected:
|
|
47
|
-
return {
|
|
48
|
-
error: action.error,
|
|
49
|
-
result: undefined,
|
|
50
|
-
state: State.rejected,
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
default:
|
|
54
|
-
throw Error(`Error parsing action ${JSON.stringify(action, null, 2)}`)
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const [{ error, result, state }, dispatch] = useReducer(reducer, defaultState)
|
|
23
|
+
if (debug) console.log(`usePromise [${debug}]: started [${typeof promise}]`)
|
|
59
24
|
|
|
60
25
|
const promiseMemo = useMemo(() => {
|
|
61
26
|
try {
|
|
27
|
+
if (debug) console.log(`usePromise [${debug}]: re-memo [${typeof promise}]`)
|
|
28
|
+
setState(State.pending)
|
|
62
29
|
return promise?.()
|
|
63
30
|
} catch (e) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
})
|
|
31
|
+
if (debug) console.log(`usePromise [${debug}]: useMemo rejection [${typeof promise}]`)
|
|
32
|
+
setResult(undefined)
|
|
33
|
+
setError(e as Error)
|
|
34
|
+
setState(State.rejected)
|
|
69
35
|
}
|
|
70
36
|
}, dependencies)
|
|
71
37
|
|
|
72
|
-
if (debug) console.
|
|
38
|
+
if (debug) console.log(`usePromise [${debug}] Main Function`)
|
|
73
39
|
|
|
74
40
|
useEffect(() => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
error: undefined,
|
|
83
|
-
payload,
|
|
84
|
-
type: State.resolved,
|
|
85
|
-
})
|
|
86
|
-
})
|
|
87
|
-
.catch((error) => {
|
|
88
|
-
if (debug) console.debug(`usePromise [${debug}] catch`)
|
|
89
|
-
dispatch({
|
|
90
|
-
error: error as Error,
|
|
91
|
-
payload: undefined,
|
|
92
|
-
type: State.rejected,
|
|
93
|
-
})
|
|
94
|
-
})
|
|
95
|
-
} else if (promiseMemo) {
|
|
96
|
-
dispatch({
|
|
97
|
-
error: undefined,
|
|
98
|
-
payload: promiseMemo,
|
|
99
|
-
type: State.resolved,
|
|
41
|
+
if (debug) console.log(`usePromise [${debug}] useEffect`)
|
|
42
|
+
promiseMemo
|
|
43
|
+
?.then((payload) => {
|
|
44
|
+
if (debug) console.log(`usePromise [${debug}] then`)
|
|
45
|
+
setResult(payload)
|
|
46
|
+
setError(undefined)
|
|
47
|
+
setState(State.resolved)
|
|
100
48
|
})
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
49
|
+
.catch((e) => {
|
|
50
|
+
const error = e as Error
|
|
51
|
+
console.error(`usePromise: ${error.message}`)
|
|
52
|
+
setResult(undefined)
|
|
53
|
+
setError(error)
|
|
54
|
+
setState(State.rejected)
|
|
107
55
|
})
|
|
108
|
-
}
|
|
109
56
|
return () => {
|
|
110
|
-
if (debug) console.
|
|
57
|
+
if (debug) console.log(`usePromise [${debug}] useEffect callback`)
|
|
111
58
|
}
|
|
112
|
-
}, [promiseMemo])
|
|
113
|
-
|
|
59
|
+
}, [...dependencies, promiseMemo])
|
|
60
|
+
if (debug) console.log(`usePromise [${debug}] returning ${JSON.stringify([result, error, state], null, 2)}`)
|
|
114
61
|
return [result, error, state]
|
|
115
62
|
}
|