1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import { action, computed, makeObservable, observable } from 'mobx';
// eslint-disable-next-line no-use-before-define
type Hook = (request: Request) => void;
export default class Request {
static readonly _hooks: Hook[] = [];
static registerHook(hook: Hook) {
Request._hooks.push(hook);
}
@observable result: any = null;
@observable error: any = null;
@observable isExecuting = false;
@observable isError = false;
@observable wasExecuted = false;
promise: any = Promise;
protected api: any = {};
method = '';
protected isWaitingForResponse = false;
protected currentApiCall: any = null;
retry = () => this.reload();
reset = () => this._reset();
constructor(api, method) {
makeObservable(this);
this.api = api;
this.method = method;
}
@action _reset(): this {
this.error = null;
this.result = null;
this.isExecuting = false;
this.isError = false;
this.wasExecuted = false;
this.isWaitingForResponse = false;
this.promise = Promise;
return this;
}
execute(...callArgs: any[]): this {
// Do not continue if this request is already loading
if (this.isWaitingForResponse) return this;
if (!this.api[this.method]) {
throw new Error(
`Missing method <${this.method}> on api object:`,
this.api,
);
}
// This timeout is necessary to avoid warnings from mobx
// regarding triggering actions as side-effect of getters
setTimeout(
action(() => {
this.isExecuting = true;
}),
0,
);
// Issue api call & save it as promise that is handled to update the results of the operation
this.promise = new Promise((resolve, reject) => {
this.api[this.method](...callArgs)
.then(result => {
setTimeout(
action(() => {
this.error = null;
this.result = result;
if (this.currentApiCall) this.currentApiCall.result = result;
this.isExecuting = false;
this.isError = false;
this.wasExecuted = true;
this.isWaitingForResponse = false;
this._triggerHooks();
resolve(result);
}),
1,
);
return result;
})
.catch(
action(error => {
setTimeout(
action(() => {
this.error = error;
this.isExecuting = false;
this.isError = true;
this.wasExecuted = true;
this.isWaitingForResponse = false;
this._triggerHooks();
reject(error);
}),
1,
);
}),
);
});
this.isWaitingForResponse = true;
this.currentApiCall = { args: callArgs, result: null };
return this;
}
reload(): this {
const args = this.currentApiCall ? this.currentApiCall.args : [];
this.error = null;
return this.execute(...args);
}
@computed get isExecutingFirstTime(): boolean {
return !this.wasExecuted && this.isExecuting;
}
/* eslint-disable unicorn/no-thenable */
then(...args: any[]) {
if (!this.promise)
throw new Error(
'You have to call Request::execute before you can access it as promise',
);
return this.promise.then(...args);
}
catch(...args: any[]) {
if (!this.promise)
throw new Error(
'You have to call Request::execute before you can access it as promise',
);
return this.promise.catch(...args);
}
_triggerHooks(): void {
for (const hook of Request._hooks) {
hook(this);
}
}
}
|
