@ventlio/tanstack-query 0.1.2 → 0.1.4

package/src/queries/useGetRequest.ts

@@ -0,0 +1,143 @@
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { startTransition, useState } from 'react';
+import type { IRequestError, IRequestSuccess } from '../request';
+import { makeRequest } from '../request';
+import type { IPagination, TanstackQueryOption } from './queries.interface';
+
+export const useGetRequest = <TResponse extends Record<string, any>>({
+  path,
+  load = false,
+  queryOptions,
+}: {
+  path: string;
+  load?: boolean;
+  queryOptions?: TanstackQueryOption<TResponse>;
+}) => {
+  const [requestPath, updatePath] = useState<string>(path);
+  const authToken = '';
+  const [options, setOptions] = useState<any>(queryOptions);
+  const [page, setPage] = useState<number>(1);
+
+  const sendRequest = async (
+    res: (
+      value:
+        | IRequestError
+        | IRequestSuccess<TResponse>
+        | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
+    ) => void,
+    rej: (reason?: any) => void
+  ) => {
+    const postResponse = await makeRequest<TResponse>({
+      path: requestPath,
+      bearerToken: authToken,
+    });
+    if (postResponse.status) {
+      res(postResponse as IRequestSuccess<TResponse>);
+    } else {
+      rej(postResponse);
+    }
+  };
+
+  const query = useQuery<any, any, IRequestSuccess<TResponse>>(
+    [requestPath, {}],
+    () =>
+      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
+        return sendRequest(res, rej);
+      }),
+    {
+      enabled: load,
+      ...options,
+    }
+  );
+
+  const nextPage = () => {
+    if (query.data?.data.pagination) {
+      const pagination: IPagination = 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: IPagination = 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: string, pageNumber: number) => {
+    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: number) => {
+    updatePath(constructPaginationLink(requestPath, pageNumber));
+  };
+
+  const updatedPathAsync = async (link: string) => {
+    startTransition(() => {
+      updatePath(link);
+    });
+  };
+
+  const setOptionsAsync = async (fetchOptions: any) => {
+    startTransition(() => {
+      setOptions(fetchOptions);
+    });
+  };
+
+  const get = async (
+    link: string,
+    fetchOptions?: UseQueryOptions<
+      IRequestSuccess<TResponse | undefined>,
+      IRequestError,
+      IRequestSuccess<TResponse | undefined>,
+      Array<any>
+    >
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    await setOptionsAsync(fetchOptions);
+    await updatedPathAsync(link);
+
+    return query.data;
+  };
+
+  return {
+    ...query,
+    updatePath,
+    nextPage,
+    prevPage,
+    get,
+    gotoPage,
+    page,
+    queryKey: [requestPath, {}],
+  };
+};

package/src/queries/usePatchRequest.ts

@@ -0,0 +1,61 @@
+import type { MutateOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { scrollToTop } from '../helpers';
+import { HttpMethod, makeRequest } from '../request';
+
+import type {
+  IRequestError,
+  IRequestSuccess,
+} from '../request/request.interface';
+
+export const usePatchRequest = <TResponse>({
+  path,
+  isFormData = false,
+}: {
+  path: string;
+  isFormData?: boolean;
+}) => {
+  const authToken = '';
+  const [resetForm, setResetForm] = useState<boolean>(false);
+
+  // register post mutation
+  const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
+    (postData: any) =>
+      new Promise<IRequestSuccess<TResponse>>((res, rej) => {
+        setResetForm(false);
+
+        makeRequest<TResponse>({
+          path: path,
+          body: postData,
+          method: HttpMethod.PATCH,
+          bearerToken: authToken,
+          isFormData,
+        }).then((postResponse) => {
+          if (postResponse.status) {
+            setResetForm(true);
+            // scroll to top after success
+            scrollToTop();
+            res(postResponse as IRequestSuccess<TResponse>);
+          } else {
+            // scroll to top after error
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth',
+            });
+            rej(postResponse);
+          }
+        });
+      })
+  );
+  const patch = async (
+    postData: any,
+    options?:
+      | MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
+      | undefined
+  ): Promise<IRequestSuccess<TResponse>> => {
+    return mutation.mutateAsync(postData, options);
+  };
+
+  return { patch, ...mutation, resetForm };
+};

package/src/queries/usePostRequest.ts

@@ -0,0 +1,59 @@
+import type { MutateOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import type { IRequestError, IRequestSuccess } from '../request';
+import { HttpMethod, makeRequest } from '../request';
+
+export const usePostRequest = <TResponse>({
+  path,
+  isFormData = false,
+}: {
+  path: string;
+  isFormData?: boolean;
+}) => {
+  const authToken = '';
+
+  const [resetForm, setResetForm] = useState<boolean>(false);
+
+  // register post mutation
+  const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
+    async (postData: any) =>
+      new Promise<IRequestSuccess<TResponse>>((res, rej) => {
+        setResetForm(false);
+        makeRequest<TResponse>({
+          path: path,
+          body: postData,
+          method: 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 as IRequestSuccess<TResponse>);
+          } else {
+            // scroll to top after error
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth',
+            });
+            rej(postResponse);
+          }
+        });
+      })
+  );
+  const post = async (
+    postData: any,
+    options?:
+      | MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
+      | undefined
+  ): Promise<IRequestSuccess<TResponse>> => {
+    return mutation.mutateAsync(postData, options);
+  };
+
+  return { post, ...mutation, resetForm };
+};

package/src/request/buildFormData.ts

@@ -1,11 +1,13 @@
-export const buildFormData = (body: any) => {
+export const buildFormData = (body: Record<string, any>) => {
   const formData = new FormData();
 
   const bodyKeys = Object.keys(body);
+
   bodyKeys.forEach((key) => {
     formData.append(key, body[key]);
   });
+
   body = formData;
 
-  return { body };
+  return body;
 };

package/src/request/make-request.ts

@@ -1,4 +1,4 @@
-import { API_BASE_URL } from '../constants';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { axiosInstance } from './axios-instance';
 
 import { buildFormData } from './buildFormData';
@@ -11,20 +11,17 @@ export async function makeRequest<TResponse>({
   method = HttpMethod.GET,
   path,
   bearerToken,
-  formData,
+  isFormData,
 }: IMakeRequest) {
-  // construct api full url
-  const apiFullUrl = `${API_BASE_URL}${path}`;
-
   // configure body
-  body = formData ? (buildFormData(body) as any) : body;
+  body = isFormData ? buildFormData(body as Record<string, any>) : body;
 
   // configure request header
-  const headers: Record<string, any> = {
+  const headers: RawAxiosRequestHeaders = {
     Authorization: `Bearer ${bearerToken}`,
   };
 
-  if (!formData) {
+  if (!isFormData) {
     headers['Content-Type'] = ContentType.APPLICATION_JSON;
   }
 
@@ -33,9 +30,9 @@ export async function makeRequest<TResponse>({
 
     //   send request
     const resp = await axios({
-      url: apiFullUrl,
+      url: path,
       method,
-      data: formData ? body : JSON.stringify(body),
+      data: body,
     });
 
     // get response json

package/src/request/request.interface.ts

@@ -2,10 +2,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 {

package/dist/useMyHook.d.ts

@@ -1 +0,0 @@
-export declare const useMyHook: () => [string, (newValue: string) => void];

package/dist/useMyHook.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-const useMyHook = () => {
-    const [value, setValue] = react.useState('');
-    const updateValue = (newValue) => {
-        setValue(newValue);
-    };
-    return [value, updateValue];
-};
-
-exports.useMyHook = useMyHook;
-//# sourceMappingURL=useMyHook.js.map

package/dist/useMyHook.js.map

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

package/src/useMyHook.ts

@@ -1,11 +0,0 @@
-import { useState } from 'react';
-
-export const useMyHook = (): [string, (newValue: string) => void] => {
-  const [value, setValue] = useState('');
-
-  const updateValue = (newValue: string) => {
-    setValue(newValue);
-  };
-
-  return [value, updateValue];
-};