@ventlio/tanstack-query 0.1.3 → 0.1.5

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.
Files changed (45) hide show
  1. package/dist/constants/index.d.ts +1 -1
  2. package/dist/constants/index.js +1 -1
  3. package/dist/helpers/index.d.ts +1 -1
  4. package/dist/helpers/scrollToTop.d.ts +1 -0
  5. package/dist/helpers/scrollToTop.js +11 -0
  6. package/dist/helpers/scrollToTop.js.map +1 -0
  7. package/dist/index.d.ts +2 -0
  8. package/dist/index.js +10 -0
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +220 -11
  11. package/dist/index.mjs.map +1 -1
  12. package/dist/queries/queries.interface.d.ts +3 -0
  13. package/dist/queries/useDeleteRequest.d.ts +1 -0
  14. package/dist/queries/useDeleteRequest.js +45 -0
  15. package/dist/queries/useDeleteRequest.js.map +1 -0
  16. package/dist/queries/useGetRequest.d.ts +3 -1
  17. package/dist/queries/useGetRequest.js +104 -0
  18. package/dist/queries/useGetRequest.js.map +1 -0
  19. package/dist/queries/usePatchRequest.d.ts +2 -2
  20. package/dist/queries/usePatchRequest.js +46 -0
  21. package/dist/queries/usePatchRequest.js.map +1 -0
  22. package/dist/queries/usePostRequest.d.ts +2 -2
  23. package/dist/queries/usePostRequest.js +48 -0
  24. package/dist/queries/usePostRequest.js.map +1 -0
  25. package/dist/request/axios-instance.js +2 -1
  26. package/dist/request/axios-instance.js.map +1 -1
  27. package/dist/request/buildFormData.d.ts +1 -3
  28. package/dist/request/buildFormData.js +1 -1
  29. package/dist/request/make-request.d.ts +1 -1
  30. package/dist/request/make-request.js +5 -8
  31. package/dist/request/make-request.js.map +1 -1
  32. package/dist/request/request.interface.d.ts +2 -2
  33. package/package.json +4 -3
  34. package/src/constants/index.ts +1 -1
  35. package/src/helpers/index.ts +1 -6
  36. package/src/helpers/scrollToTop.ts +6 -0
  37. package/src/index.ts +2 -0
  38. package/src/queries/queries.interface.ts +10 -0
  39. package/src/queries/useGetRequest.ts +37 -34
  40. package/src/queries/usePatchRequest.ts +3 -3
  41. package/src/queries/usePostRequest.ts +3 -3
  42. package/src/request/axios-instance.ts +2 -1
  43. package/src/request/buildFormData.ts +4 -2
  44. package/src/request/make-request.ts +7 -10
  45. package/src/request/request.interface.ts +2 -2
@@ -1 +1 @@
1
- export declare const API_BASE_URL = "";
1
+ export declare const API_BASE_URL = "https://pokeapi.co/api/v2";
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const API_BASE_URL = '';
3
+ const API_BASE_URL = 'https://pokeapi.co/api/v2';
4
4
 
5
5
  exports.API_BASE_URL = API_BASE_URL;
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- export declare const scrollToTop: () => void;
1
+ export * from './scrollToTop';
@@ -0,0 +1 @@
1
+ export declare const scrollToTop: () => void;
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ const scrollToTop = () => {
4
+ window.scrollTo({
5
+ top: 0,
6
+ behavior: 'smooth',
7
+ });
8
+ };
9
+
10
+ exports.scrollToTop = scrollToTop;
11
+ //# sourceMappingURL=scrollToTop.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToTop.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export * from './constants';
2
+ export * from './helpers';
3
+ export * from './queries';
2
4
  export * from './request';
package/dist/index.js CHANGED
@@ -1,6 +1,11 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./constants/index.js');
4
+ var scrollToTop = require('./helpers/scrollToTop.js');
5
+ var useDeleteRequest = require('./queries/useDeleteRequest.js');
6
+ var useGetRequest = require('./queries/useGetRequest.js');
7
+ var usePatchRequest = require('./queries/usePatchRequest.js');
8
+ var usePostRequest = require('./queries/usePostRequest.js');
4
9
  var axiosInstance = require('./request/axios-instance.js');
5
10
  var buildFormData = require('./request/buildFormData.js');
6
11
  var makeRequest = require('./request/make-request.js');
@@ -10,6 +15,11 @@ var transformer = require('./request/transformer.js');
10
15
 
11
16
 
12
17
  exports.API_BASE_URL = index.API_BASE_URL;
18
+ exports.scrollToTop = scrollToTop.scrollToTop;
19
+ exports.useDeleteRequest = useDeleteRequest.useDeleteRequest;
20
+ exports.useGetRequest = useGetRequest.useGetRequest;
21
+ exports.usePatchRequest = usePatchRequest.usePatchRequest;
22
+ exports.usePostRequest = usePostRequest.usePostRequest;
13
23
  exports.axiosInstance = axiosInstance.axiosInstance;
14
24
  exports.buildFormData = buildFormData.buildFormData;
15
25
  exports.makeRequest = makeRequest.makeRequest;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.mjs CHANGED
@@ -1,10 +1,19 @@
1
+ import { useQuery, useMutation } from '@tanstack/react-query';
2
+ import { useState, startTransition } from 'react';
1
3
  import axios from 'axios';
2
4
 
3
- const API_BASE_URL = '';
5
+ const API_BASE_URL = 'https://pokeapi.co/api/v2';
6
+
7
+ const scrollToTop = () => {
8
+ window.scrollTo({
9
+ top: 0,
10
+ behavior: 'smooth',
11
+ });
12
+ };
4
13
 
5
14
  const axiosInstance = (headers) => {
6
15
  return axios.create({
7
- baseURL: 'https://api.ventlio.com',
16
+ baseURL: API_BASE_URL,
8
17
  timeout: 100000,
9
18
  headers,
10
19
  });
@@ -17,7 +26,7 @@ const buildFormData = (body) => {
17
26
  formData.append(key, body[key]);
18
27
  });
19
28
  body = formData;
20
- return { body };
29
+ return body;
21
30
  };
22
31
 
23
32
  var HttpMethod;
@@ -55,25 +64,23 @@ const successTransformer = (data) => {
55
64
  };
56
65
  };
57
66
 
58
- async function makeRequest({ body, method = HttpMethod.GET, path, bearerToken, formData, }) {
59
- // construct api full url
60
- const apiFullUrl = `${API_BASE_URL}${path}`;
67
+ async function makeRequest({ body, method = HttpMethod.GET, path, bearerToken, isFormData, }) {
61
68
  // configure body
62
- body = formData ? buildFormData(body) : body;
69
+ body = isFormData ? buildFormData(body) : body;
63
70
  // configure request header
64
71
  const headers = {
65
72
  Authorization: `Bearer ${bearerToken}`,
66
73
  };
67
- if (!formData) {
74
+ if (!isFormData) {
68
75
  headers['Content-Type'] = ContentType.APPLICATION_JSON;
69
76
  }
70
77
  try {
71
78
  const axios = axiosInstance(headers);
72
79
  // send request
73
80
  const resp = await axios({
74
- url: apiFullUrl,
81
+ url: path,
75
82
  method,
76
- data: formData ? body : JSON.stringify(body),
83
+ data: body,
77
84
  });
78
85
  // get response json
79
86
  const jsonResp = await resp.data();
@@ -97,5 +104,207 @@ async function makeRequest({ body, method = HttpMethod.GET, path, bearerToken, f
97
104
  }
98
105
  }
99
106
 
100
- export { API_BASE_URL, ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, successTransformer };
107
+ const useDeleteRequest = () => {
108
+ const [requestPath, updateDeletePath] = useState('');
109
+ const [options, setOptions] = useState();
110
+ const authToken = '';
111
+ const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
112
+ setTimeout(async () => {
113
+ const postResponse = await makeRequest({
114
+ path: requestPath,
115
+ bearerToken: authToken,
116
+ method: HttpMethod.DELETE,
117
+ });
118
+ if (postResponse.status) {
119
+ res(postResponse);
120
+ }
121
+ else {
122
+ rej(postResponse);
123
+ }
124
+ }, 200);
125
+ }), { ...options });
126
+ const updatedPathAsync = async (link) => {
127
+ return updateDeletePath(link);
128
+ };
129
+ const setOptionsAsync = async (fetchOptions) => {
130
+ return setOptions(fetchOptions);
131
+ };
132
+ const deleteR = async (link, fetchOptions) => {
133
+ await updatedPathAsync(link);
134
+ await setOptionsAsync(fetchOptions);
135
+ return query.refetch({
136
+ queryKey: [link, {}],
137
+ });
138
+ };
139
+ return { updateDeletePath, deleteR, ...query };
140
+ };
141
+
142
+ const useGetRequest = ({ path, load = false, queryOptions, }) => {
143
+ const [requestPath, updatePath] = useState(path);
144
+ const authToken = '';
145
+ const [options, setOptions] = useState(queryOptions);
146
+ const [page, setPage] = useState(1);
147
+ const sendRequest = async (res, rej) => {
148
+ const postResponse = await makeRequest({
149
+ path: requestPath,
150
+ bearerToken: authToken,
151
+ });
152
+ if (postResponse.status) {
153
+ res(postResponse);
154
+ }
155
+ else {
156
+ rej(postResponse);
157
+ }
158
+ };
159
+ const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
160
+ return sendRequest(res, rej);
161
+ }), {
162
+ enabled: load,
163
+ ...options,
164
+ });
165
+ const nextPage = () => {
166
+ if (query.data?.data.pagination) {
167
+ const pagination = query.data.data.pagination;
168
+ if (pagination.next_page !== pagination.current_page &&
169
+ pagination.next_page > pagination.current_page) {
170
+ updatePath(constructPaginationLink(requestPath, pagination.next_page));
171
+ }
172
+ }
173
+ };
174
+ const prevPage = () => {
175
+ if (query.data?.data.pagination) {
176
+ const pagination = query.data.data.pagination;
177
+ if (pagination.previous_page !== pagination.current_page &&
178
+ pagination.previous_page < pagination.current_page) {
179
+ updatePath(constructPaginationLink(requestPath, pagination.previous_page));
180
+ }
181
+ }
182
+ };
183
+ const constructPaginationLink = (link, pageNumber) => {
184
+ const oldLink = link;
185
+ if (link.includes('?')) {
186
+ if (link.includes('?page=')) {
187
+ // replace current page number with new number
188
+ link = link.replace(/\?page=(\d+)/gim, `?page=${pageNumber}`);
189
+ }
190
+ else if (link.includes('&page=')) {
191
+ link = link.replace(/&page=(\d+)/gim, `&page=${pageNumber}`);
192
+ }
193
+ else {
194
+ link = `${link}&page=${pageNumber}`;
195
+ }
196
+ }
197
+ else {
198
+ link = `${link}?page=${pageNumber}`;
199
+ }
200
+ // only update page when pagination is done
201
+ if (oldLink !== link) {
202
+ setPage(pageNumber);
203
+ }
204
+ return link;
205
+ };
206
+ const gotoPage = (pageNumber) => {
207
+ updatePath(constructPaginationLink(requestPath, pageNumber));
208
+ };
209
+ const updatedPathAsync = async (link) => {
210
+ startTransition(() => {
211
+ updatePath(link);
212
+ });
213
+ };
214
+ const setOptionsAsync = async (fetchOptions) => {
215
+ startTransition(() => {
216
+ setOptions(fetchOptions);
217
+ });
218
+ };
219
+ const get = async (link, fetchOptions) => {
220
+ await setOptionsAsync(fetchOptions);
221
+ await updatedPathAsync(link);
222
+ return query.data;
223
+ };
224
+ return {
225
+ ...query,
226
+ updatePath,
227
+ nextPage,
228
+ prevPage,
229
+ get,
230
+ gotoPage,
231
+ page,
232
+ queryKey: [requestPath, {}],
233
+ };
234
+ };
235
+
236
+ const usePatchRequest = ({ path, isFormData = false, }) => {
237
+ const authToken = '';
238
+ const [resetForm, setResetForm] = useState(false);
239
+ // register post mutation
240
+ const mutation = useMutation((postData) => new Promise((res, rej) => {
241
+ setResetForm(false);
242
+ makeRequest({
243
+ path: path,
244
+ body: postData,
245
+ method: HttpMethod.PATCH,
246
+ bearerToken: authToken,
247
+ isFormData,
248
+ }).then((postResponse) => {
249
+ if (postResponse.status) {
250
+ setResetForm(true);
251
+ // scroll to top after success
252
+ scrollToTop();
253
+ res(postResponse);
254
+ }
255
+ else {
256
+ // scroll to top after error
257
+ window.scrollTo({
258
+ top: 0,
259
+ behavior: 'smooth',
260
+ });
261
+ rej(postResponse);
262
+ }
263
+ });
264
+ }));
265
+ const patch = async (postData, options) => {
266
+ return mutation.mutateAsync(postData, options);
267
+ };
268
+ return { patch, ...mutation, resetForm };
269
+ };
270
+
271
+ const usePostRequest = ({ path, isFormData = false, }) => {
272
+ const authToken = '';
273
+ const [resetForm, setResetForm] = useState(false);
274
+ // register post mutation
275
+ const mutation = useMutation(async (postData) => new Promise((res, rej) => {
276
+ setResetForm(false);
277
+ makeRequest({
278
+ path: path,
279
+ body: postData,
280
+ method: HttpMethod.POST,
281
+ bearerToken: authToken,
282
+ isFormData,
283
+ }).then((postResponse) => {
284
+ if (postResponse.status) {
285
+ setResetForm(true);
286
+ // scroll to top after success
287
+ window.scrollTo({
288
+ top: 0,
289
+ behavior: 'smooth',
290
+ });
291
+ res(postResponse);
292
+ }
293
+ else {
294
+ // scroll to top after error
295
+ window.scrollTo({
296
+ top: 0,
297
+ behavior: 'smooth',
298
+ });
299
+ rej(postResponse);
300
+ }
301
+ });
302
+ }));
303
+ const post = async (postData, options) => {
304
+ return mutation.mutateAsync(postData, options);
305
+ };
306
+ return { post, ...mutation, resetForm };
307
+ };
308
+
309
+ export { API_BASE_URL, ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useGetRequest, usePatchRequest, usePostRequest };
101
310
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,3 +1,5 @@
1
+ import type { UseQueryOptions } from '@tanstack/react-query';
2
+ import type { IRequestError, IRequestSuccess } from '../request';
1
3
  export interface IPagination {
2
4
  current_page: number;
3
5
  next_page: number;
@@ -6,3 +8,4 @@ export interface IPagination {
6
8
  size: number;
7
9
  total: number;
8
10
  }
11
+ export type TanstackQueryOption<TResponse> = UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, Array<any>>;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import type { MutateOptions, QueryObserverResult } from '@tanstack/react-query';
2
3
  import type { IRequestError, IRequestSuccess } from '../request';
3
4
  export declare const useDeleteRequest: <TResponse>() => {
@@ -0,0 +1,45 @@
1
+ 'use strict';
2
+
3
+ var reactQuery = require('@tanstack/react-query');
4
+ var react = require('react');
5
+ require('axios');
6
+ var makeRequest = require('../request/make-request.js');
7
+ var request_enum = require('../request/request.enum.js');
8
+
9
+ const useDeleteRequest = () => {
10
+ const [requestPath, updateDeletePath] = react.useState('');
11
+ const [options, setOptions] = react.useState();
12
+ const authToken = '';
13
+ const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
14
+ setTimeout(async () => {
15
+ const postResponse = await makeRequest.makeRequest({
16
+ path: requestPath,
17
+ bearerToken: authToken,
18
+ method: request_enum.HttpMethod.DELETE,
19
+ });
20
+ if (postResponse.status) {
21
+ res(postResponse);
22
+ }
23
+ else {
24
+ rej(postResponse);
25
+ }
26
+ }, 200);
27
+ }), { ...options });
28
+ const updatedPathAsync = async (link) => {
29
+ return updateDeletePath(link);
30
+ };
31
+ const setOptionsAsync = async (fetchOptions) => {
32
+ return setOptions(fetchOptions);
33
+ };
34
+ const deleteR = async (link, fetchOptions) => {
35
+ await updatedPathAsync(link);
36
+ await setOptionsAsync(fetchOptions);
37
+ return query.refetch({
38
+ queryKey: [link, {}],
39
+ });
40
+ };
41
+ return { updateDeletePath, deleteR, ...query };
42
+ };
43
+
44
+ exports.useDeleteRequest = useDeleteRequest;
45
+ //# sourceMappingURL=useDeleteRequest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,9 +1,11 @@
1
+ /// <reference types="react" />
1
2
  import type { UseQueryOptions } from '@tanstack/react-query';
2
3
  import type { IRequestError, IRequestSuccess } from '../request';
4
+ import type { TanstackQueryOption } from './queries.interface';
3
5
  export declare const useGetRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, }: {
4
6
  path: string;
5
7
  load?: boolean | undefined;
6
- queryOptions?: UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> | undefined;
8
+ queryOptions?: TanstackQueryOption<TResponse> | undefined;
7
9
  }) => {
8
10
  updatePath: import("react").Dispatch<import("react").SetStateAction<string>>;
9
11
  nextPage: () => void;
@@ -0,0 +1,104 @@
1
+ 'use strict';
2
+
3
+ var reactQuery = require('@tanstack/react-query');
4
+ var react = require('react');
5
+ require('axios');
6
+ var makeRequest = require('../request/make-request.js');
7
+ require('../request/request.enum.js');
8
+
9
+ const useGetRequest = ({ path, load = false, queryOptions, }) => {
10
+ const [requestPath, updatePath] = react.useState(path);
11
+ const authToken = '';
12
+ const [options, setOptions] = react.useState(queryOptions);
13
+ const [page, setPage] = react.useState(1);
14
+ const sendRequest = async (res, rej) => {
15
+ const postResponse = await makeRequest.makeRequest({
16
+ path: requestPath,
17
+ bearerToken: authToken,
18
+ });
19
+ if (postResponse.status) {
20
+ res(postResponse);
21
+ }
22
+ else {
23
+ rej(postResponse);
24
+ }
25
+ };
26
+ const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
27
+ return sendRequest(res, rej);
28
+ }), {
29
+ enabled: load,
30
+ ...options,
31
+ });
32
+ const nextPage = () => {
33
+ if (query.data?.data.pagination) {
34
+ const pagination = query.data.data.pagination;
35
+ if (pagination.next_page !== pagination.current_page &&
36
+ pagination.next_page > pagination.current_page) {
37
+ updatePath(constructPaginationLink(requestPath, pagination.next_page));
38
+ }
39
+ }
40
+ };
41
+ const prevPage = () => {
42
+ if (query.data?.data.pagination) {
43
+ const pagination = query.data.data.pagination;
44
+ if (pagination.previous_page !== pagination.current_page &&
45
+ pagination.previous_page < pagination.current_page) {
46
+ updatePath(constructPaginationLink(requestPath, pagination.previous_page));
47
+ }
48
+ }
49
+ };
50
+ const constructPaginationLink = (link, pageNumber) => {
51
+ const oldLink = link;
52
+ if (link.includes('?')) {
53
+ if (link.includes('?page=')) {
54
+ // replace current page number with new number
55
+ link = link.replace(/\?page=(\d+)/gim, `?page=${pageNumber}`);
56
+ }
57
+ else if (link.includes('&page=')) {
58
+ link = link.replace(/&page=(\d+)/gim, `&page=${pageNumber}`);
59
+ }
60
+ else {
61
+ link = `${link}&page=${pageNumber}`;
62
+ }
63
+ }
64
+ else {
65
+ link = `${link}?page=${pageNumber}`;
66
+ }
67
+ // only update page when pagination is done
68
+ if (oldLink !== link) {
69
+ setPage(pageNumber);
70
+ }
71
+ return link;
72
+ };
73
+ const gotoPage = (pageNumber) => {
74
+ updatePath(constructPaginationLink(requestPath, pageNumber));
75
+ };
76
+ const updatedPathAsync = async (link) => {
77
+ react.startTransition(() => {
78
+ updatePath(link);
79
+ });
80
+ };
81
+ const setOptionsAsync = async (fetchOptions) => {
82
+ react.startTransition(() => {
83
+ setOptions(fetchOptions);
84
+ });
85
+ };
86
+ const get = async (link, fetchOptions) => {
87
+ await setOptionsAsync(fetchOptions);
88
+ await updatedPathAsync(link);
89
+ return query.data;
90
+ };
91
+ return {
92
+ ...query,
93
+ updatePath,
94
+ nextPage,
95
+ prevPage,
96
+ get,
97
+ gotoPage,
98
+ page,
99
+ queryKey: [requestPath, {}],
100
+ };
101
+ };
102
+
103
+ exports.useGetRequest = useGetRequest;
104
+ //# sourceMappingURL=useGetRequest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,8 +1,8 @@
1
1
  import type { MutateOptions } from '@tanstack/react-query';
2
2
  import type { IRequestError, IRequestSuccess } from '../request/request.interface';
3
- export declare const usePatchRequest: <TResponse>({ path, formData, }: {
3
+ export declare const usePatchRequest: <TResponse>({ path, isFormData, }: {
4
4
  path: string;
5
- formData?: boolean | undefined;
5
+ isFormData?: boolean | undefined;
6
6
  }) => {
7
7
  resetForm: boolean;
8
8
  data: undefined;
@@ -0,0 +1,46 @@
1
+ 'use strict';
2
+
3
+ var reactQuery = require('@tanstack/react-query');
4
+ var react = require('react');
5
+ var scrollToTop = require('../helpers/scrollToTop.js');
6
+ require('axios');
7
+ var makeRequest = require('../request/make-request.js');
8
+ var request_enum = require('../request/request.enum.js');
9
+
10
+ const usePatchRequest = ({ path, isFormData = false, }) => {
11
+ const authToken = '';
12
+ const [resetForm, setResetForm] = react.useState(false);
13
+ // register post mutation
14
+ const mutation = reactQuery.useMutation((postData) => new Promise((res, rej) => {
15
+ setResetForm(false);
16
+ makeRequest.makeRequest({
17
+ path: path,
18
+ body: postData,
19
+ method: request_enum.HttpMethod.PATCH,
20
+ bearerToken: authToken,
21
+ isFormData,
22
+ }).then((postResponse) => {
23
+ if (postResponse.status) {
24
+ setResetForm(true);
25
+ // scroll to top after success
26
+ scrollToTop.scrollToTop();
27
+ res(postResponse);
28
+ }
29
+ else {
30
+ // scroll to top after error
31
+ window.scrollTo({
32
+ top: 0,
33
+ behavior: 'smooth',
34
+ });
35
+ rej(postResponse);
36
+ }
37
+ });
38
+ }));
39
+ const patch = async (postData, options) => {
40
+ return mutation.mutateAsync(postData, options);
41
+ };
42
+ return { patch, ...mutation, resetForm };
43
+ };
44
+
45
+ exports.usePatchRequest = usePatchRequest;
46
+ //# sourceMappingURL=usePatchRequest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,8 +1,8 @@
1
1
  import type { MutateOptions } from '@tanstack/react-query';
2
2
  import type { IRequestError, IRequestSuccess } from '../request';
3
- export declare const usePostRequest: <TResponse>({ path, formData, }: {
3
+ export declare const usePostRequest: <TResponse>({ path, isFormData, }: {
4
4
  path: string;
5
- formData?: boolean | undefined;
5
+ isFormData?: boolean | undefined;
6
6
  }) => {
7
7
  resetForm: boolean;
8
8
  data: undefined;
@@ -0,0 +1,48 @@
1
+ 'use strict';
2
+
3
+ var reactQuery = require('@tanstack/react-query');
4
+ var react = require('react');
5
+ require('axios');
6
+ var makeRequest = require('../request/make-request.js');
7
+ var request_enum = require('../request/request.enum.js');
8
+
9
+ const usePostRequest = ({ path, isFormData = false, }) => {
10
+ const authToken = '';
11
+ const [resetForm, setResetForm] = react.useState(false);
12
+ // register post mutation
13
+ const mutation = reactQuery.useMutation(async (postData) => new Promise((res, rej) => {
14
+ setResetForm(false);
15
+ makeRequest.makeRequest({
16
+ path: path,
17
+ body: postData,
18
+ method: request_enum.HttpMethod.POST,
19
+ bearerToken: authToken,
20
+ isFormData,
21
+ }).then((postResponse) => {
22
+ if (postResponse.status) {
23
+ setResetForm(true);
24
+ // scroll to top after success
25
+ window.scrollTo({
26
+ top: 0,
27
+ behavior: 'smooth',
28
+ });
29
+ res(postResponse);
30
+ }
31
+ else {
32
+ // scroll to top after error
33
+ window.scrollTo({
34
+ top: 0,
35
+ behavior: 'smooth',
36
+ });
37
+ rej(postResponse);
38
+ }
39
+ });
40
+ }));
41
+ const post = async (postData, options) => {
42
+ return mutation.mutateAsync(postData, options);
43
+ };
44
+ return { post, ...mutation, resetForm };
45
+ };
46
+
47
+ exports.usePostRequest = usePostRequest;
48
+ //# sourceMappingURL=usePostRequest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,10 +1,11 @@
1
1
  'use strict';
2
2
 
3
3
  var axios = require('axios');
4
+ var index = require('../constants/index.js');
4
5
 
5
6
  const axiosInstance = (headers) => {
6
7
  return axios.create({
7
- baseURL: 'https://api.ventlio.com',
8
+ baseURL: index.API_BASE_URL,
8
9
  timeout: 100000,
9
10
  headers,
10
11
  });
@@ -1 +1 @@
1
- {"version":3,"file":"axios-instance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"axios-instance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -1,3 +1 @@
1
- export declare const buildFormData: (body: any) => {
2
- body: any;
3
- };
1
+ export declare const buildFormData: (body: Record<string, any>) => Record<string, any>;
@@ -7,7 +7,7 @@ const buildFormData = (body) => {
7
7
  formData.append(key, body[key]);
8
8
  });
9
9
  body = formData;
10
- return { body };
10
+ return body;
11
11
  };
12
12
 
13
13
  exports.buildFormData = buildFormData;
@@ -1,2 +1,2 @@
1
1
  import type { IMakeRequest } from './request.interface';
2
- export declare function makeRequest<TResponse>({ body, method, path, bearerToken, formData, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;
2
+ export declare function makeRequest<TResponse>({ body, method, path, bearerToken, isFormData, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;
@@ -1,30 +1,27 @@
1
1
  'use strict';
2
2
 
3
- var index = require('../constants/index.js');
4
3
  var axiosInstance = require('./axios-instance.js');
5
4
  var buildFormData = require('./buildFormData.js');
6
5
  var request_enum = require('./request.enum.js');
7
6
  var transformer = require('./transformer.js');
8
7
 
9
- async function makeRequest({ body, method = request_enum.HttpMethod.GET, path, bearerToken, formData, }) {
10
- // construct api full url
11
- const apiFullUrl = `${index.API_BASE_URL}${path}`;
8
+ async function makeRequest({ body, method = request_enum.HttpMethod.GET, path, bearerToken, isFormData, }) {
12
9
  // configure body
13
- body = formData ? buildFormData.buildFormData(body) : body;
10
+ body = isFormData ? buildFormData.buildFormData(body) : body;
14
11
  // configure request header
15
12
  const headers = {
16
13
  Authorization: `Bearer ${bearerToken}`,
17
14
  };
18
- if (!formData) {
15
+ if (!isFormData) {
19
16
  headers['Content-Type'] = request_enum.ContentType.APPLICATION_JSON;
20
17
  }
21
18
  try {
22
19
  const axios = axiosInstance.axiosInstance(headers);
23
20
  // send request
24
21
  const resp = await axios({
25
- url: apiFullUrl,
22
+ url: path,
26
23
  method,
27
- data: formData ? body : JSON.stringify(body),
24
+ data: body,
28
25
  });
29
26
  // get response json
30
27
  const jsonResp = await resp.data();
@@ -1 +1 @@
1
- {"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,10 +1,10 @@
1
1
  import type { HttpMethod } from './request.enum';
2
2
  export interface IMakeRequest {
3
3
  path: string;
4
- body?: BodyInit | null;
4
+ body?: Record<string, any> | null;
5
5
  method?: HttpMethod;
6
6
  bearerToken?: string;
7
- formData?: boolean;
7
+ isFormData?: boolean;
8
8
  }
9
9
  export interface AxiosInstanceOption {
10
10
  bearerToken?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ventlio/tanstack-query",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "repository": {
@@ -14,13 +14,13 @@
14
14
  "url": "https://ventlio.com"
15
15
  },
16
16
  "scripts": {
17
- "build": "rollup --config rollup.config.ts --configPlugin rollup-plugin-typescript2",
17
+ "build": "rimraf dist && rollup --config rollup.config.ts --configPlugin rollup-plugin-typescript2",
18
18
  "build:watch": "yarn build -w"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "@tanstack/react-query": "^4.26.1",
22
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
23
22
  "axios": "^1.3.4",
23
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
24
24
  "react-native": "*"
25
25
  },
26
26
  "peerDependenciesMeta": {
@@ -55,6 +55,7 @@
55
55
  "eslint-plugin-react-hooks": "^4.6.0",
56
56
  "prettier": "^2.8.4",
57
57
  "react": "^18.2.0",
58
+ "rimraf": "^4.4.0",
58
59
  "rollup": "^3.19.1",
59
60
  "rollup-plugin-typescript2": "^0.34.1",
60
61
  "ts-node": "^10.9.1",
@@ -1 +1 @@
1
- export const API_BASE_URL = '';
1
+ export const API_BASE_URL = 'https://pokeapi.co/api/v2';
@@ -1,6 +1 @@
1
- export const scrollToTop = () => {
2
- window.scrollTo({
3
- top: 0,
4
- behavior: 'smooth',
5
- });
6
- };
1
+ export * from './scrollToTop';
@@ -0,0 +1,6 @@
1
+ export const scrollToTop = () => {
2
+ window.scrollTo({
3
+ top: 0,
4
+ behavior: 'smooth',
5
+ });
6
+ };
package/src/index.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export * from './constants';
2
+ export * from './helpers';
3
+ export * from './queries';
2
4
  export * from './request';
@@ -1,3 +1,6 @@
1
+ import type { UseQueryOptions } from '@tanstack/react-query';
2
+ import type { IRequestError, IRequestSuccess } from '../request';
3
+
1
4
  export interface IPagination {
2
5
  current_page: number;
3
6
  next_page: number;
@@ -6,3 +9,10 @@ export interface IPagination {
6
9
  size: number;
7
10
  total: number;
8
11
  }
12
+
13
+ export type TanstackQueryOption<TResponse> = UseQueryOptions<
14
+ IRequestSuccess<TResponse | undefined>,
15
+ IRequestError,
16
+ IRequestSuccess<TResponse | undefined>,
17
+ Array<any>
18
+ >;
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
3
3
  import { startTransition, useState } from 'react';
4
4
  import type { IRequestError, IRequestSuccess } from '../request';
5
5
  import { makeRequest } from '../request';
6
- import type { IPagination } from './queries.interface';
6
+ import type { IPagination, TanstackQueryOption } from './queries.interface';
7
7
 
8
8
  export const useGetRequest = <TResponse extends Record<string, any>>({
9
9
  path,
@@ -12,35 +12,38 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
12
12
  }: {
13
13
  path: string;
14
14
  load?: boolean;
15
- queryOptions?: UseQueryOptions<
16
- IRequestSuccess<TResponse | undefined>,
17
- IRequestError,
18
- IRequestSuccess<TResponse | undefined>,
19
- Array<any>
20
- >;
15
+ queryOptions?: TanstackQueryOption<TResponse>;
21
16
  }) => {
22
17
  const [requestPath, updatePath] = useState<string>(path);
23
18
  const authToken = '';
24
19
  const [options, setOptions] = useState<any>(queryOptions);
25
20
  const [page, setPage] = useState<number>(1);
26
21
 
22
+ const sendRequest = async (
23
+ res: (
24
+ value:
25
+ | IRequestError
26
+ | IRequestSuccess<TResponse>
27
+ | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
28
+ ) => void,
29
+ rej: (reason?: any) => void
30
+ ) => {
31
+ const postResponse = await makeRequest<TResponse>({
32
+ path: requestPath,
33
+ bearerToken: authToken,
34
+ });
35
+ if (postResponse.status) {
36
+ res(postResponse as IRequestSuccess<TResponse>);
37
+ } else {
38
+ rej(postResponse);
39
+ }
40
+ };
41
+
27
42
  const query = useQuery<any, any, IRequestSuccess<TResponse>>(
28
43
  [requestPath, {}],
29
44
  () =>
30
45
  new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
31
- // work on removing this setTimeout, it was added to delay for the requestPath to be updated successfully
32
- // could have used hook for this but will miss the purpose
33
- setTimeout(async () => {
34
- const postResponse = await makeRequest<TResponse>({
35
- path: requestPath,
36
- bearerToken: authToken,
37
- });
38
- if (postResponse.status) {
39
- res(postResponse as IRequestSuccess<TResponse>);
40
- } else {
41
- rej(postResponse);
42
- }
43
- }, 200);
46
+ return sendRequest(res, rej);
44
47
  }),
45
48
  {
46
49
  enabled: load,
@@ -60,6 +63,20 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
60
63
  }
61
64
  };
62
65
 
66
+ const prevPage = () => {
67
+ if (query.data?.data.pagination) {
68
+ const pagination: IPagination = query.data.data.pagination;
69
+ if (
70
+ pagination.previous_page !== pagination.current_page &&
71
+ pagination.previous_page < pagination.current_page
72
+ ) {
73
+ updatePath(
74
+ constructPaginationLink(requestPath, pagination.previous_page)
75
+ );
76
+ }
77
+ }
78
+ };
79
+
63
80
  const constructPaginationLink = (link: string, pageNumber: number) => {
64
81
  const oldLink = link;
65
82
  if (link.includes('?')) {
@@ -82,20 +99,6 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
82
99
  return link;
83
100
  };
84
101
 
85
- const prevPage = () => {
86
- if (query.data?.data.pagination) {
87
- const pagination: IPagination = query.data.data.pagination;
88
- if (
89
- pagination.previous_page !== pagination.current_page &&
90
- pagination.previous_page < pagination.current_page
91
- ) {
92
- updatePath(
93
- constructPaginationLink(requestPath, pagination.previous_page)
94
- );
95
- }
96
- }
97
- };
98
-
99
102
  const gotoPage = (pageNumber: number) => {
100
103
  updatePath(constructPaginationLink(requestPath, pageNumber));
101
104
  };
@@ -11,10 +11,10 @@ import type {
11
11
 
12
12
  export const usePatchRequest = <TResponse>({
13
13
  path,
14
- formData = false,
14
+ isFormData = false,
15
15
  }: {
16
16
  path: string;
17
- formData?: boolean;
17
+ isFormData?: boolean;
18
18
  }) => {
19
19
  const authToken = '';
20
20
  const [resetForm, setResetForm] = useState<boolean>(false);
@@ -30,7 +30,7 @@ export const usePatchRequest = <TResponse>({
30
30
  body: postData,
31
31
  method: HttpMethod.PATCH,
32
32
  bearerToken: authToken,
33
- formData,
33
+ isFormData,
34
34
  }).then((postResponse) => {
35
35
  if (postResponse.status) {
36
36
  setResetForm(true);
@@ -6,10 +6,10 @@ import { HttpMethod, makeRequest } from '../request';
6
6
 
7
7
  export const usePostRequest = <TResponse>({
8
8
  path,
9
- formData = false,
9
+ isFormData = false,
10
10
  }: {
11
11
  path: string;
12
- formData?: boolean;
12
+ isFormData?: boolean;
13
13
  }) => {
14
14
  const authToken = '';
15
15
 
@@ -25,7 +25,7 @@ export const usePostRequest = <TResponse>({
25
25
  body: postData,
26
26
  method: HttpMethod.POST,
27
27
  bearerToken: authToken,
28
- formData,
28
+ isFormData,
29
29
  }).then((postResponse) => {
30
30
  if (postResponse.status) {
31
31
  setResetForm(true);
@@ -1,11 +1,12 @@
1
1
  import type { AxiosInstance, RawAxiosRequestHeaders } from 'axios';
2
2
  import axios from 'axios';
3
+ import { API_BASE_URL } from '../constants';
3
4
 
4
5
  export const axiosInstance = (
5
6
  headers: RawAxiosRequestHeaders
6
7
  ): AxiosInstance => {
7
8
  return axios.create({
8
- baseURL: 'https://api.ventlio.com',
9
+ baseURL: API_BASE_URL,
9
10
  timeout: 100000,
10
11
  headers,
11
12
  });
@@ -1,11 +1,13 @@
1
- export const buildFormData = (body: any) => {
1
+ export const buildFormData = (body: Record<string, any>) => {
2
2
  const formData = new FormData();
3
3
 
4
4
  const bodyKeys = Object.keys(body);
5
+
5
6
  bodyKeys.forEach((key) => {
6
7
  formData.append(key, body[key]);
7
8
  });
9
+
8
10
  body = formData;
9
11
 
10
- return { body };
12
+ return body;
11
13
  };
@@ -1,4 +1,4 @@
1
- import { API_BASE_URL } from '../constants';
1
+ import type { RawAxiosRequestHeaders } from 'axios';
2
2
  import { axiosInstance } from './axios-instance';
3
3
 
4
4
  import { buildFormData } from './buildFormData';
@@ -11,20 +11,17 @@ export async function makeRequest<TResponse>({
11
11
  method = HttpMethod.GET,
12
12
  path,
13
13
  bearerToken,
14
- formData,
14
+ isFormData,
15
15
  }: IMakeRequest) {
16
- // construct api full url
17
- const apiFullUrl = `${API_BASE_URL}${path}`;
18
-
19
16
  // configure body
20
- body = formData ? (buildFormData(body) as any) : body;
17
+ body = isFormData ? buildFormData(body as Record<string, any>) : body;
21
18
 
22
19
  // configure request header
23
- const headers: Record<string, any> = {
20
+ const headers: RawAxiosRequestHeaders = {
24
21
  Authorization: `Bearer ${bearerToken}`,
25
22
  };
26
23
 
27
- if (!formData) {
24
+ if (!isFormData) {
28
25
  headers['Content-Type'] = ContentType.APPLICATION_JSON;
29
26
  }
30
27
 
@@ -33,9 +30,9 @@ export async function makeRequest<TResponse>({
33
30
 
34
31
  // send request
35
32
  const resp = await axios({
36
- url: apiFullUrl,
33
+ url: path,
37
34
  method,
38
- data: formData ? body : JSON.stringify(body),
35
+ data: body,
39
36
  });
40
37
 
41
38
  // get response json
@@ -2,10 +2,10 @@ import type { HttpMethod } from './request.enum';
2
2
 
3
3
  export interface IMakeRequest {
4
4
  path: string;
5
- body?: BodyInit | null;
5
+ body?: Record<string, any> | null;
6
6
  method?: HttpMethod;
7
7
  bearerToken?: string;
8
- formData?: boolean;
8
+ isFormData?: boolean;
9
9
  }
10
10
 
11
11
  export interface AxiosInstanceOption {