@adaskothebeast/axios-interceptor 3.0.0 → 4.0.1
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/README.md +407 -370
- package/package.json +3 -3
- package/src/lib/axios-instance-manager.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,370 +1,407 @@
|
|
|
1
|
-
# Date interceptors
|
|
2
|
-
|
|
3
|
-
## What problem does this set of libraries solve?
|
|
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
|
-
|
|
152
|
-
import
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
In
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
In
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
1
|
+
# Date interceptors
|
|
2
|
+
|
|
3
|
+
## What problem does this set of libraries solve?
|
|
4
|
+
|
|
5
|
+
Working with dates and durations in JSON can be cumbersome and error-prone due to the lack of a standard format for date-time serialization. JSON, by its nature, does not have a specific data type for dates or durations. As a result, dates are usually serialized as strings, which then require additional parsing to be used as date objects in your application. This can lead to various issues, such as incorrect time zone conversions, invalid date formats, and the cumbersome handling of duration calculations.
|
|
6
|
+
|
|
7
|
+
This library addresses these challenges by providing a robust solution for converting date and duration strings from JSON payloads into native Date objects and Duration objects, respectively. By doing so, it enables developers to work with date and duration data more naturally and efficiently in their applications, without having to deal with the intricacies of manual string parsing and conversion. This conversion is not just limited to top-level fields; this library is designed to walk through deep object compositions and arrays, ensuring that every date and duration string, no matter where it is nested within your data structure, is converted accurately.
|
|
8
|
+
|
|
9
|
+
### Key Features
|
|
10
|
+
|
|
11
|
+
- **Deep Object and Array Traversal**: This library is capable of navigating through complex data structures, converting every date and duration string found in objects and arrays. This feature is particularly useful for applications dealing with deeply nested JSON data, where manual conversion would be tedious and error-prone.
|
|
12
|
+
- **Automatic Conversion**: Automatically converts date strings from JSON into JavaScript Date objects, making it easier to work with dates without manual parsing.
|
|
13
|
+
- **Duration Handling**: Converts duration strings into Duration objects, allowing for straightforward duration calculations and manipulations.
|
|
14
|
+
- **Time Zone Awareness**: Ensures that date conversions take into account time zone differences, preventing common errors related to time zone handling.
|
|
15
|
+
- **Flexible Format Support**: Supports multiple date and duration string formats, providing flexibility to work with various JSON structures and conventions.
|
|
16
|
+
- **Easy Integration**: Designed to be easily integrated into any JavaScript or TypeScript project, enhancing date and duration handling with minimal setup.
|
|
17
|
+
|
|
18
|
+
## Value for Developers
|
|
19
|
+
|
|
20
|
+
This library significantly simplifies the handling of dates and durations in JavaScript applications, especially those that consume JSON data from APIs or external sources. By abstracting away the complexity of parsing and converting date and duration strings, it allows developers to focus on the core logic of their applications, leading to cleaner, more maintainable code. Additionally, the library's support for various formats and time zones ensures that it can be used in a wide range of applications, from simple projects to complex, data-intensive applications.
|
|
21
|
+
|
|
22
|
+
## Badges
|
|
23
|
+
|
|
24
|
+
[](https://www.codefactor.io/repository/github/adaskothebeast/date-interceptors)
|
|
25
|
+
[](https://img.shields.io/azure-devops/build/AdaskoTheBeAsT/date-interceptors/23)
|
|
26
|
+

|
|
27
|
+

|
|
28
|
+
[](https://sonarcloud.io/dashboard?id=AdaskoTheBeAsT_date-interceptors)
|
|
29
|
+

|
|
30
|
+

|
|
31
|
+

|
|
32
|
+

|
|
33
|
+

|
|
34
|
+

|
|
35
|
+

|
|
36
|
+

|
|
37
|
+

|
|
38
|
+

|
|
39
|
+

|
|
40
|
+

|
|
41
|
+

|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## Which libraries are supported?
|
|
45
|
+
|
|
46
|
+
Helpers are prepared for following libraries:
|
|
47
|
+
|
|
48
|
+
- pure js Date object
|
|
49
|
+
- [date-fns](https://date-fns.org/) - Date and Duration objects
|
|
50
|
+
- [Day.js](https://day.js.org/) - Dayjs and Duration object
|
|
51
|
+
- [js-joda](https://js-joda.github.io/js-joda/) - ZonedDateTime object
|
|
52
|
+
- [luxon](https://moment.github.io/luxon/#/?id=luxon) - DateTime and Duration object
|
|
53
|
+
- [moment.js](https://momentjs.com/) - Moment and Duration object
|
|
54
|
+
|
|
55
|
+
## What frameworks are supported?
|
|
56
|
+
|
|
57
|
+
- [Angular](https://angular.io/) in form of [interceptor](https://angular.io/guide/http#intercepting-requests-and-responses) named ```HierarchicalDateHttpInterceptor```
|
|
58
|
+
- [react](https://reactjs.org/) all api call libraries are supported - special case for [rtk-query](https://redux-toolkit.js.org/rtk-query/overview) is solved in form of hook ```useAdjustUseQueryHookResultWithHierarchicalDateConverter```
|
|
59
|
+
|
|
60
|
+
## Installation dependant of date library
|
|
61
|
+
|
|
62
|
+
Based on your needs, install one of the following packages:
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
import { hierarchicalConvertToDateFns } from '@adaskothebeast/hierarchical-convert-to-date-fns';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
import { hierarchicalConvertToDayjs } from '@adaskothebeast/hierarchical-convert-to-dayjs';
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
import { hierarchicalConvertToJsJoda } from '@adaskothebeast/hierarchical-convert-to-js-joda';
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
import { hierarchicalConvertToLuxon } from '@adaskothebeast/hierarchical-convert-to-luxon';
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
import { hierarchicalConvertToMoment } from '@adaskothebeast/hierarchical-convert-to-moment';
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Installation dependant of framework
|
|
89
|
+
|
|
90
|
+
Additionally in some cases you need to install framework specific package:
|
|
91
|
+
|
|
92
|
+
### Angular
|
|
93
|
+
|
|
94
|
+
In your application's root module, import library module and symbol and provide the `hierarchicalConvertToDate` or other function using the HIERARCHICAL_DATE_ADJUST_FUNCTION token:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { AngularDateHttpInterceptorModule, HIERARCHICAL_DATE_ADJUST_FUNCTION } from '@adaskothebeast/angular-date-http-interceptor';
|
|
98
|
+
|
|
99
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
100
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
101
|
+
|
|
102
|
+
@NgModule({
|
|
103
|
+
imports: [
|
|
104
|
+
// ...
|
|
105
|
+
AngularDateHttpInterceptorModule,
|
|
106
|
+
],
|
|
107
|
+
providers: [
|
|
108
|
+
{ provide: HIERARCHICAL_DATE_ADJUST_FUNCTION, useValue: hierarchicalConvertToDate },
|
|
109
|
+
// other providers...
|
|
110
|
+
]
|
|
111
|
+
})
|
|
112
|
+
export class AppModule { }
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
In this setup, Angular's dependency injection system will provide the `hierarchicalConvertToDate` function to the `HierarchicalDateHttpInterceptor` when it's instantiated, even though the function is provided in the application's module and the interceptor is provided in the library module. This is because Angular's DI system is hierarchical and can inject dependencies from parent injectors into child injectors.
|
|
116
|
+
|
|
117
|
+
### React
|
|
118
|
+
|
|
119
|
+
In case of react there are multiple libraries that can be used for api calls. For one of it there is special hook prepared:
|
|
120
|
+
|
|
121
|
+
#### rtk-query
|
|
122
|
+
|
|
123
|
+
Hook `useAdjustUseQueryHookResultWithHierarchicalDateConverter` must be called within a React component or another custom hook, and the `useQueryFunction` argument it receives should be a hook that has already been invoked.
|
|
124
|
+
|
|
125
|
+
You would then use it in a component like this:
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import { useAdjustUseQueryHookResultWithHierarchicalDateConverter} from '@adaskothebeast/react-date-query-hook';
|
|
129
|
+
|
|
130
|
+
const MyComponent: React.FC = () => {
|
|
131
|
+
const useQueryResult = useQueryFunction(arg, options); // <-- Call your hook here
|
|
132
|
+
const adjustedQueryResult = useAdjustUseQueryHookResultWithHierarchicalDateConverter(useQueryResult); // <-- Pass the result to your custom hook
|
|
133
|
+
|
|
134
|
+
// Rest of your component...
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
This would adhere to the rules of Hooks, as the hook is being called at the top level of a React function component, not inside a callback or other function.
|
|
139
|
+
|
|
140
|
+
#### redux-query-react
|
|
141
|
+
|
|
142
|
+
To create a custom React hook that uses the `hierarchicalConvertToDate` function in combination with Redux Query, we first need to define how `redux-query` is set up in your application. For simplicity, let's assume that you are using `useRequest` or `useMutation` hooks provided by `redux-query-react`.
|
|
143
|
+
|
|
144
|
+
We can create a custom hook named `useParsedRequest` that takes the same parameters as `useRequest` and uses `hierarchicalConvertToDate` to parse any date strings in the response data into `Date` objects.
|
|
145
|
+
|
|
146
|
+
Here's a possible implementation in TypeScript:
|
|
147
|
+
|
|
148
|
+
```ts
|
|
149
|
+
import { useRequest, RequestConfig } from 'redux-query-react';
|
|
150
|
+
import { useMemo } from 'react';
|
|
151
|
+
|
|
152
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
153
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
154
|
+
|
|
155
|
+
export function useParsedRequest(config: RequestConfig) {
|
|
156
|
+
const { url, ...restConfig } = config;
|
|
157
|
+
|
|
158
|
+
const transformedConfig: RequestConfig = useMemo(() => ({
|
|
159
|
+
...restConfig,
|
|
160
|
+
url,
|
|
161
|
+
transform: (data: any) => {
|
|
162
|
+
hierarchicalConvertToDate(data);
|
|
163
|
+
return restConfig.transform ? restConfig.transform(data) : data;
|
|
164
|
+
},
|
|
165
|
+
}), [url, restConfig]);
|
|
166
|
+
|
|
167
|
+
return useRequest(transformedConfig);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
In this example, we first destructure the `config` parameter to separate the `url` and `restConfig`. This is because we'll only be changing the `transform` function and we want to make sure our `useMemo` dependency array doesn't change too often.
|
|
173
|
+
|
|
174
|
+
We then define `transformedConfig` using `useMemo` to create a new config object that includes our `hierarchicalConvertToDate` call inside the `transform` function. We're still calling the original transform function if it was provided.
|
|
175
|
+
|
|
176
|
+
Finally, we call `useRequest` with our `transformedConfig` and return the result.
|
|
177
|
+
|
|
178
|
+
You can use `useParsedRequest` just like you would use `useRequest`, but the response data will be passed through `hierarchicalConvertToDate` before being returned.
|
|
179
|
+
|
|
180
|
+
Remember to adjust the import paths and the `hierarchicalConvertToDate` function to match your project structure and requirements.
|
|
181
|
+
|
|
182
|
+
#### react-query
|
|
183
|
+
|
|
184
|
+
To use the `hierarchicalConvertToDate` function within the context of `react-query`, you can incorporate it within the fetcher function that you pass to `react-query`'s `useQuery` hook.
|
|
185
|
+
|
|
186
|
+
Here's a sample implementation:
|
|
187
|
+
|
|
188
|
+
```ts
|
|
189
|
+
import { useQuery } from 'react-query';
|
|
190
|
+
|
|
191
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
192
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
193
|
+
|
|
194
|
+
// Fetcher function that retrieves data and applies date parsing
|
|
195
|
+
async function fetcher(url: string) {
|
|
196
|
+
const response = await fetch(url);
|
|
197
|
+
const data = await response.json();
|
|
198
|
+
hierarchicalConvertToDate(data);
|
|
199
|
+
return data;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
function MyComponent() {
|
|
203
|
+
const { data, isLoading, error } = useQuery('myKey', () => fetcher('/api/my-endpoint'));
|
|
204
|
+
|
|
205
|
+
if (isLoading) {
|
|
206
|
+
return <div>Loading...</div>;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
if (error) {
|
|
210
|
+
return <div>Error occurred</div>;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
return (
|
|
214
|
+
<div>
|
|
215
|
+
{/* Render data here */}
|
|
216
|
+
</div>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
In the code above, we defined an asynchronous `fetcher` function that retrieves data from an API endpoint, applies the `hierarchicalConvertToDate` function to the retrieved data, and then returns the parsed data. This `fetcher` function is then passed to the `useQuery` hook from `react-query`. The results (data, loading state, and error state) are then used in `MyComponent` to display the appropriate UI based on the state of the data fetch.
|
|
223
|
+
|
|
224
|
+
#### redux-saga
|
|
225
|
+
|
|
226
|
+
In order to perform this task with `redux-saga`, you would need to define a saga that fetches the data, parses the dates, and then dispatches a success action with the parsed data as its payload.
|
|
227
|
+
|
|
228
|
+
Here's a general example of how you could structure this:
|
|
229
|
+
|
|
230
|
+
```ts
|
|
231
|
+
import { call, put, takeEvery } from 'redux-saga/effects';
|
|
232
|
+
import axios from 'axios';
|
|
233
|
+
|
|
234
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
235
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
236
|
+
|
|
237
|
+
// Saga worker
|
|
238
|
+
function* fetchData(action) {
|
|
239
|
+
try {
|
|
240
|
+
const response = yield call(axios.get, action.payload.url);
|
|
241
|
+
hierarchicalConvertToDate(response.data);
|
|
242
|
+
yield put({ type: 'FETCH_SUCCEEDED', payload: response.data });
|
|
243
|
+
} catch (e) {
|
|
244
|
+
yield put({ type: 'FETCH_FAILED', message: e.message });
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// Saga watcher
|
|
249
|
+
function* watchFetchData() {
|
|
250
|
+
yield takeEvery('FETCH_REQUESTED', fetchData);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
// Export the saga (single or root)
|
|
254
|
+
export default function* rootSaga() {
|
|
255
|
+
yield all([watchFetchData()]);
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
This code consists of two parts. The `fetchData` generator function (the "worker" saga) performs the asynchronous fetch operation when a `FETCH_REQUESTED` action is dispatched. It then uses the `call` effect to perform the API call with `axios.get`, applies the `hierarchicalConvertToDate` function to the response data, and then dispatches a `FETCH_SUCCEEDED` action with the parsed data. If an error occurs during this process, it dispatches a `FETCH_FAILED` action with the error message.
|
|
260
|
+
|
|
261
|
+
The `watchFetchData` generator function (the "watcher" saga) waits for `FETCH_REQUESTED` actions to be dispatched, and then triggers the `fetchData` worker saga each time this happens.
|
|
262
|
+
|
|
263
|
+
In your React component, you would dispatch a `FETCH_REQUESTED` action to initiate this process. For example:
|
|
264
|
+
|
|
265
|
+
```ts
|
|
266
|
+
import { useDispatch } from 'react-redux';
|
|
267
|
+
|
|
268
|
+
function MyComponent() {
|
|
269
|
+
const dispatch = useDispatch();
|
|
270
|
+
|
|
271
|
+
const fetchData = () => {
|
|
272
|
+
dispatch({ type: 'FETCH_REQUESTED', payload: { url: '/api/my-endpoint' } });
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
// Call fetchData() at the appropriate time (e.g. in a useEffect or in response to user interaction)
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Remember to integrate the saga with your store using the `redux-saga` middleware. The exact setup will depend on your application structure and configuration.
|
|
280
|
+
|
|
281
|
+
Please adjust the code according to your requirements.
|
|
282
|
+
|
|
283
|
+
#### SWR
|
|
284
|
+
|
|
285
|
+
In order to use the `hierarchicalConvertToDate` function within the context of `swr` (Stale While Revalidate), you can incorporate it within the `fetcher` function that you pass to `swr`'s useSWR hook.
|
|
286
|
+
|
|
287
|
+
Here's a sample implementation:
|
|
288
|
+
|
|
289
|
+
```ts
|
|
290
|
+
import useSWR from 'swr';
|
|
291
|
+
|
|
292
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
293
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
294
|
+
|
|
295
|
+
// Fetcher function that retrieves data and applies date parsing
|
|
296
|
+
async function fetcher(url: string) {
|
|
297
|
+
const response = await fetch(url);
|
|
298
|
+
const data = await response.json();
|
|
299
|
+
hierarchicalConvertToDate(data);
|
|
300
|
+
return data;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
function MyComponent() {
|
|
304
|
+
const { data, error } = useSWR('/api/my-endpoint', fetcher);
|
|
305
|
+
|
|
306
|
+
if (error) {
|
|
307
|
+
return <div>Error occurred</div>;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
if (!data) {
|
|
311
|
+
return <div>Loading...</div>;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
return (
|
|
315
|
+
<div>
|
|
316
|
+
{/* Render data here */}
|
|
317
|
+
</div>
|
|
318
|
+
);
|
|
319
|
+
}
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
In the code above, we defined an asynchronous `fetcher` function that retrieves data from an API endpoint, applies the `hierarchicalConvertToDate` function to the retrieved data, and then returns the parsed data. This `fetcher` function is then passed to the `useSWR` hook from `swr`. The results (data and error state) are then used in `MyComponent` to display the appropriate UI based on the state of the data fetch.
|
|
323
|
+
|
|
324
|
+
Please adjust the code according to your project structure and requirements.
|
|
325
|
+
|
|
326
|
+
#### redux-thunk
|
|
327
|
+
|
|
328
|
+
When using `redux-thunk`, you'll dispatch a function (the "thunk") that performs the asynchronous request and dispatches actions to represent the lifecycle of the request.
|
|
329
|
+
|
|
330
|
+
We'll create a function which represents the asynchronous operation:
|
|
331
|
+
|
|
332
|
+
```ts
|
|
333
|
+
// Adjust this import as needed - this will import adjustment function for pure js Date object
|
|
334
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
function fetchApiData(url: string) {
|
|
338
|
+
return async function(dispatch: Function) {
|
|
339
|
+
dispatch({ type: 'FETCH_DATA_REQUEST' });
|
|
340
|
+
|
|
341
|
+
try {
|
|
342
|
+
const response = await fetch(url);
|
|
343
|
+
const data = await response.json();
|
|
344
|
+
|
|
345
|
+
hierarchicalConvertToDate(data); // Apply the date adjustment
|
|
346
|
+
|
|
347
|
+
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
|
|
348
|
+
} catch (error) {
|
|
349
|
+
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
|
|
350
|
+
}
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
In this function, `FETCH_DATA_REQUEST`, `FETCH_DATA_SUCCESS`, and `FETCH_DATA_FAILURE` are action types that your reducer should handle.
|
|
356
|
+
|
|
357
|
+
In your component, you can dispatch this function like so:
|
|
358
|
+
|
|
359
|
+
```ts
|
|
360
|
+
import { useDispatch } from 'react-redux';
|
|
361
|
+
|
|
362
|
+
function MyComponent() {
|
|
363
|
+
const dispatch = useDispatch();
|
|
364
|
+
|
|
365
|
+
useEffect(() => {
|
|
366
|
+
dispatch(fetchApiData('/api/my-endpoint'));
|
|
367
|
+
}, [dispatch]);
|
|
368
|
+
|
|
369
|
+
// Rest of your component here...
|
|
370
|
+
}
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
This will initiate the fetch when your component mounts and dispatch either a success or failure action when the fetch completes, allowing you to store the fetched data (or any error that occurred) in your Redux state.
|
|
374
|
+
|
|
375
|
+
Please adjust the code according to your requirements and project structure.
|
|
376
|
+
|
|
377
|
+
### Axios with AxiosInstanceManager
|
|
378
|
+
|
|
379
|
+
The AxiosInstanceManager class simplifies the process of using Axios with the `hierarchicalConvertToDate` function. By utilizing this class, you can easily create and use a centralized Axios instance with a response interceptor that automatically processes response data.
|
|
380
|
+
|
|
381
|
+
Here's how to use AxiosInstanceManager:
|
|
382
|
+
|
|
383
|
+
```ts
|
|
384
|
+
import { AxiosInstanceManager } from '@adaskothebeast/axios-interceptor';
|
|
385
|
+
import { hierarchicalConvertToDate } from '@adaskothebeast/hierarchical-convert-to-date';
|
|
386
|
+
|
|
387
|
+
// Create an Axios instance using AxiosInstanceManager
|
|
388
|
+
const instance = AxiosInstanceManager.createInstance(hierarchicalConvertToDate);
|
|
389
|
+
|
|
390
|
+
async function fetchApiData() {
|
|
391
|
+
try {
|
|
392
|
+
const response = await instance.get('/api/my-endpoint');
|
|
393
|
+
console.log(response.data);
|
|
394
|
+
} catch (error) {
|
|
395
|
+
console.error(error);
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
fetchApiData();
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
In the code above:
|
|
403
|
+
|
|
404
|
+
- The createInstance method of AxiosInstanceManager is used to create and configure an Axios instance. This instance is configured with a response interceptor that applies hierarchicalConvertToDate to response.data. This conversion function processes any date strings in the response data into JavaScript Date objects (or in case of other libs proper class for given date lib).
|
|
405
|
+
- The fetchApiData function demonstrates using the configured Axios instance to make a GET request. The response data, with date strings already converted into Date (or in case of other libs proper class for given date lib) objects, is logged to the console. Errors from the request are caught and logged.
|
|
406
|
+
|
|
407
|
+
This approach encapsulates the Axios configuration, making your code cleaner and more maintainable. Remember to adjust imports and function calls as per your project's file structure and requirements.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adaskothebeast/axios-interceptor",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Adam Pluciński <adaskothebeast@gmail.com> (https://github.com/adaskothebeast)",
|
|
6
6
|
"repository": {
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
},
|
|
13
13
|
"homepage": "https://github.com/AdaskoTheBeAsT/date-interceptors",
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"axios": "1.
|
|
15
|
+
"axios": "1.7.2",
|
|
16
16
|
"tslib": "^2.6.2"
|
|
17
17
|
},
|
|
18
18
|
"main": "./src/index.js",
|
|
19
19
|
"type": "commonjs"
|
|
20
|
-
}
|
|
20
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axios-instance-manager.js","sourceRoot":"","sources":["../../../../../libs/axios-interceptor/src/lib/axios-instance-manager.ts"],"names":[],"mappings":";;;AAAA,iCAA6C;AAE7C;;GAEG;AACH,MAAa,oBAAoB;IAG/B;;;;OAIG;IACI,MAAM,CAAC,cAAc,CAC1B,aAAsC;QAEtC,IAAI,IAAI,CAAC,cAAc,EAAE;
|
|
1
|
+
{"version":3,"file":"axios-instance-manager.js","sourceRoot":"","sources":["../../../../../libs/axios-interceptor/src/lib/axios-instance-manager.ts"],"names":[],"mappings":";;;AAAA,iCAA6C;AAE7C;;GAEG;AACH,MAAa,oBAAoB;IAG/B;;;;OAIG;IACI,MAAM,CAAC,cAAc,CAC1B,aAAsC;QAEtC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC7B,CAAC;QAED,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,EAAE,CAAC;QAEhC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAChC,CAAC,QAAQ,EAAE,EAAE;YACX,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAE7B,OAAO,QAAQ,CAAC;QAClB,CAAC,EACD,CAAC,KAAK,EAAE,EAAE;YACR,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QAE/B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;;OAIG;IACI,MAAM,CAAC,sCAAsC,CAClD,kBAA+C;QAE/C,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC7B,CAAC;QAED,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,EAAE,CAAC;QAEhC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAChC,CAAC,QAAQ,EAAE,EAAE;YACX,KAAK,MAAM,aAAa,IAAI,kBAAkB,EAAE,CAAC;gBAC/C,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YAED,OAAO,QAAQ,CAAC;QAClB,CAAC,EACD,CAAC,KAAK,EAAE,EAAE;YACR,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QAE/B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,aAAa;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;;AAtEH,oDAuEC;AAtEgB,mCAAc,GAAyB,IAAI,CAAC"}
|