@ventlio/tanstack-query 0.1.2 → 0.1.4

package/dist/queries/useGetRequest.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+require('axios');
+var makeRequest = require('../request/make-request.js');
+require('../request/request.enum.js');
+
+const useGetRequest = ({ path, load = false, queryOptions, }) => {
+    const [requestPath, updatePath] = react.useState(path);
+    const authToken = '';
+    const [options, setOptions] = react.useState(queryOptions);
+    const [page, setPage] = react.useState(1);
+    const sendRequest = async (res, rej) => {
+        const postResponse = await makeRequest.makeRequest({
+            path: requestPath,
+            bearerToken: authToken,
+        });
+        if (postResponse.status) {
+            res(postResponse);
+        }
+        else {
+            rej(postResponse);
+        }
+    };
+    const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
+        return sendRequest(res, rej);
+    }), {
+        enabled: load,
+        ...options,
+    });
+    const nextPage = () => {
+        if (query.data?.data.pagination) {
+            const pagination = query.data.data.pagination;
+            if (pagination.next_page !== pagination.current_page &&
+                pagination.next_page > pagination.current_page) {
+                updatePath(constructPaginationLink(requestPath, pagination.next_page));
+            }
+        }
+    };
+    const prevPage = () => {
+        if (query.data?.data.pagination) {
+            const pagination = query.data.data.pagination;
+            if (pagination.previous_page !== pagination.current_page &&
+                pagination.previous_page < pagination.current_page) {
+                updatePath(constructPaginationLink(requestPath, pagination.previous_page));
+            }
+        }
+    };
+    const constructPaginationLink = (link, pageNumber) => {
+        const oldLink = link;
+        if (link.includes('?')) {
+            if (link.includes('?page=')) {
+                // replace current page number with new number
+                link = link.replace(/\?page=(\d+)/gim, `?page=${pageNumber}`);
+            }
+            else if (link.includes('&page=')) {
+                link = link.replace(/&page=(\d+)/gim, `&page=${pageNumber}`);
+            }
+            else {
+                link = `${link}&page=${pageNumber}`;
+            }
+        }
+        else {
+            link = `${link}?page=${pageNumber}`;
+        }
+        // only update page when pagination is done
+        if (oldLink !== link) {
+            setPage(pageNumber);
+        }
+        return link;
+    };
+    const gotoPage = (pageNumber) => {
+        updatePath(constructPaginationLink(requestPath, pageNumber));
+    };
+    const updatedPathAsync = async (link) => {
+        react.startTransition(() => {
+            updatePath(link);
+        });
+    };
+    const setOptionsAsync = async (fetchOptions) => {
+        react.startTransition(() => {
+            setOptions(fetchOptions);
+        });
+    };
+    const get = async (link, fetchOptions) => {
+        await setOptionsAsync(fetchOptions);
+        await updatedPathAsync(link);
+        return query.data;
+    };
+    return {
+        ...query,
+        updatePath,
+        nextPage,
+        prevPage,
+        get,
+        gotoPage,
+        page,
+        queryKey: [requestPath, {}],
+    };
+};
+
+exports.useGetRequest = useGetRequest;
+//# sourceMappingURL=useGetRequest.js.map

package/dist/queries/useGetRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/queries/usePatchRequest.d.ts

@@ -0,0 +1,78 @@
+import type { MutateOptions } from '@tanstack/react-query';
+import type { IRequestError, IRequestSuccess } from '../request/request.interface';
+export declare const usePatchRequest: <TResponse>({ path, isFormData, }: {
+    path: string;
+    isFormData?: boolean | undefined;
+}) => {
+    resetForm: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: true;
+    isLoading: false;
+    isSuccess: false;
+    status: "idle";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    patch: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: true;
+    isSuccess: false;
+    status: "loading";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    patch: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: undefined;
+    error: IRequestError;
+    isError: true;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: false;
+    status: "error";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    patch: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: IRequestSuccess<TResponse>;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: true;
+    status: "success";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    patch: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+};

package/dist/queries/usePatchRequest.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+var scrollToTop = require('../helpers/scrollToTop.js');
+require('axios');
+var makeRequest = require('../request/make-request.js');
+var request_enum = require('../request/request.enum.js');
+
+const usePatchRequest = ({ path, isFormData = false, }) => {
+    const authToken = '';
+    const [resetForm, setResetForm] = react.useState(false);
+    // register post mutation
+    const mutation = reactQuery.useMutation((postData) => new Promise((res, rej) => {
+        setResetForm(false);
+        makeRequest.makeRequest({
+            path: path,
+            body: postData,
+            method: request_enum.HttpMethod.PATCH,
+            bearerToken: authToken,
+            isFormData,
+        }).then((postResponse) => {
+            if (postResponse.status) {
+                setResetForm(true);
+                // scroll to top after success
+                scrollToTop.scrollToTop();
+                res(postResponse);
+            }
+            else {
+                // scroll to top after error
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth',
+                });
+                rej(postResponse);
+            }
+        });
+    }));
+    const patch = async (postData, options) => {
+        return mutation.mutateAsync(postData, options);
+    };
+    return { patch, ...mutation, resetForm };
+};
+
+exports.usePatchRequest = usePatchRequest;
+//# sourceMappingURL=usePatchRequest.js.map

package/dist/queries/usePatchRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/queries/usePostRequest.d.ts

@@ -0,0 +1,78 @@
+import type { MutateOptions } from '@tanstack/react-query';
+import type { IRequestError, IRequestSuccess } from '../request';
+export declare const usePostRequest: <TResponse>({ path, isFormData, }: {
+    path: string;
+    isFormData?: boolean | undefined;
+}) => {
+    resetForm: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: true;
+    isLoading: false;
+    isSuccess: false;
+    status: "idle";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    post: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: true;
+    isSuccess: false;
+    status: "loading";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    post: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: undefined;
+    error: IRequestError;
+    isError: true;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: false;
+    status: "error";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    post: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+} | {
+    resetForm: boolean;
+    data: IRequestSuccess<TResponse>;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: true;
+    status: "success";
+    mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    failureReason: IRequestError | null;
+    isPaused: boolean;
+    variables: void | undefined;
+    mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
+    post: (postData: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+};

package/dist/queries/usePostRequest.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var react = require('react');
+require('axios');
+var makeRequest = require('../request/make-request.js');
+var request_enum = require('../request/request.enum.js');
+
+const usePostRequest = ({ path, isFormData = false, }) => {
+    const authToken = '';
+    const [resetForm, setResetForm] = react.useState(false);
+    // register post mutation
+    const mutation = reactQuery.useMutation(async (postData) => new Promise((res, rej) => {
+        setResetForm(false);
+        makeRequest.makeRequest({
+            path: path,
+            body: postData,
+            method: request_enum.HttpMethod.POST,
+            bearerToken: authToken,
+            isFormData,
+        }).then((postResponse) => {
+            if (postResponse.status) {
+                setResetForm(true);
+                // scroll to top after success
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth',
+                });
+                res(postResponse);
+            }
+            else {
+                // scroll to top after error
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth',
+                });
+                rej(postResponse);
+            }
+        });
+    }));
+    const post = async (postData, options) => {
+        return mutation.mutateAsync(postData, options);
+    };
+    return { post, ...mutation, resetForm };
+};
+
+exports.usePostRequest = usePostRequest;
+//# sourceMappingURL=usePostRequest.js.map

package/dist/queries/usePostRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/request/buildFormData.d.ts

@@ -1,3 +1 @@
-export declare const buildFormData: (body: any) => {
-    body: any;
-};
+export declare const buildFormData: (body: Record<string, any>) => Record<string, any>;

package/dist/request/buildFormData.js

@@ -7,7 +7,7 @@ const buildFormData = (body) => {
         formData.append(key, body[key]);
     });
     body = formData;
-    return { body };
+    return body;
 };
 
 exports.buildFormData = buildFormData;

package/dist/request/make-request.d.ts

@@ -1,2 +1,2 @@
 import type { IMakeRequest } from './request.interface';
-export declare function makeRequest<TResponse>({ body, method, path, bearerToken, formData, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;
+export declare function makeRequest<TResponse>({ body, method, path, bearerToken, isFormData, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;

package/dist/request/make-request.js

@@ -1,30 +1,27 @@
 'use strict';
 
-var index = require('../constants/index.js');
 var axiosInstance = require('./axios-instance.js');
 var buildFormData = require('./buildFormData.js');
 var request_enum = require('./request.enum.js');
 var transformer = require('./transformer.js');
 
-async function makeRequest({ body, method = request_enum.HttpMethod.GET, path, bearerToken, formData, }) {
-    // construct api full url
-    const apiFullUrl = `${index.API_BASE_URL}${path}`;
+async function makeRequest({ body, method = request_enum.HttpMethod.GET, path, bearerToken, isFormData, }) {
     // configure body
-    body = formData ? buildFormData.buildFormData(body) : body;
+    body = isFormData ? buildFormData.buildFormData(body) : body;
     // configure request header
     const headers = {
         Authorization: `Bearer ${bearerToken}`,
     };
-    if (!formData) {
+    if (!isFormData) {
         headers['Content-Type'] = request_enum.ContentType.APPLICATION_JSON;
     }
     try {
         const axios = axiosInstance.axiosInstance(headers);
         //   send request
         const resp = await axios({
-            url: apiFullUrl,
+            url: path,
             method,
-            data: formData ? body : JSON.stringify(body),
+            data: body,
         });
         // get response json
         const jsonResp = await resp.data();

package/dist/request/make-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/request/request.interface.d.ts

@@ -1,10 +1,10 @@
 import type { HttpMethod } from './request.enum';
 export interface IMakeRequest {
     path: string;
-    body?: BodyInit | null;
+    body?: Record<string, any> | null;
     method?: HttpMethod;
     bearerToken?: string;
-    formData?: boolean;
+    isFormData?: boolean;
 }
 export interface AxiosInstanceOption {
     bearerToken?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "main": "dist/index.js",
   "repository": {
@@ -14,13 +14,13 @@
     "url": "https://ventlio.com"
   },
   "scripts": {
-    "build": "rollup --config rollup.config.ts --configPlugin rollup-plugin-typescript2",
+    "build": "rimraf dist && rollup --config rollup.config.ts --configPlugin rollup-plugin-typescript2",
     "build:watch": "yarn build -w"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4.26.1",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "axios": "^1.3.4",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "*"
   },
   "peerDependenciesMeta": {
@@ -55,6 +55,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
+    "rimraf": "^4.4.0",
     "rollup": "^3.19.1",
     "rollup-plugin-typescript2": "^0.34.1",
     "ts-node": "^10.9.1",
@@ -62,11 +63,7 @@
     "typescript": "^4.9.5"
   },
   "files": [
-    "dist/app/*",
     "dist/**/*",
     "src"
-  ],
-  "dependencies": {
-    "rmf": "^2.0.0"
-  }
+  ]
 }

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './scrollToTop';

package/src/helpers/scrollToTop.ts

@@ -0,0 +1,6 @@
+export const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './constants';
+export * from './helpers';
+export * from './queries';
 export * from './request';
-export * from './useMyHook';

package/src/queries/index.ts

@@ -0,0 +1,4 @@
+export * from './useDeleteRequest';
+export * from './useGetRequest';
+export * from './usePatchRequest';
+export * from './usePostRequest';

package/src/queries/queries.interface.ts

@@ -0,0 +1,18 @@
+import type { UseQueryOptions } from '@tanstack/react-query';
+import type { IRequestError, IRequestSuccess } from '../request';
+
+export interface IPagination {
+  current_page: number;
+  next_page: number;
+  page_count: number;
+  previous_page: number;
+  size: number;
+  total: number;
+}
+
+export type TanstackQueryOption<TResponse> = UseQueryOptions<
+  IRequestSuccess<TResponse | undefined>,
+  IRequestError,
+  IRequestSuccess<TResponse | undefined>,
+  Array<any>
+>;

package/src/queries/useDeleteRequest.ts

@@ -0,0 +1,52 @@
+import type { MutateOptions, QueryObserverResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import type { IRequestError, IRequestSuccess } from '../request';
+import { HttpMethod, makeRequest } from '../request';
+
+export const useDeleteRequest = <TResponse>() => {
+  const [requestPath, updateDeletePath] = useState<string>('');
+  const [options, setOptions] = useState<any>();
+  const authToken = '';
+  const query = useQuery<any, any, IRequestSuccess<TResponse>>(
+    [requestPath, {}],
+    () =>
+      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
+        setTimeout(async () => {
+          const postResponse = await makeRequest<TResponse>({
+            path: requestPath,
+            bearerToken: authToken,
+            method: HttpMethod.DELETE,
+          });
+          if (postResponse.status) {
+            res(postResponse as IRequestSuccess<TResponse>);
+          } else {
+            rej(postResponse);
+          }
+        }, 200);
+      }),
+    { ...options }
+  );
+
+  const updatedPathAsync = async (link: string) => {
+    return updateDeletePath(link);
+  };
+
+  const setOptionsAsync = async (fetchOptions: any) => {
+    return setOptions(fetchOptions);
+  };
+  const deleteR = async (
+    link: string,
+    fetchOptions?:
+      | MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
+      | undefined
+  ): Promise<QueryObserverResult<IRequestSuccess<TResponse>, any>> => {
+    await updatedPathAsync(link);
+    await setOptionsAsync(fetchOptions);
+
+    return query.refetch<TResponse>({
+      queryKey: [link, {}],
+    });
+  };
+  return { updateDeletePath, deleteR, ...query };
+};