@trackunit/react-graphql-hooks 0.0.1-alpha-1820203754.0 → 0.0.1

package/index.cjs.js

@@ -6,6 +6,7 @@ require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var sharedUtils = require('@trackunit/shared-utils');
 var ApolloClient = require('@apollo/client');
+var reactTable = require('@trackunit/react-table');
 var react = require('react');
 
 function _interopNamespace(e) {
@@ -93,60 +94,6 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
         .filter(sharedUtils.truthy);
 };
 
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-const useRelayPagination = (props = { pageSize: 50 }) => {
-    const [variables, setVariables] = react.useState({ first: props.pageSize });
-    const [pageInfo, setPageInfo] = react.useState();
-    const [isLoading, setIsLoading] = react.useState(false);
-    const nextPage = react.useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
-            setVariables({
-                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
-                first: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
-    const previousPage = react.useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
-            setVariables({
-                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
-                last: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
-    const reset = react.useCallback(() => {
-        setVariables({
-            last: undefined,
-            before: undefined,
-            after: undefined,
-            first: props.pageSize,
-        });
-        if (props.onReset) {
-            props.onReset();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.onReset, props.pageSize]);
-    return react.useMemo(() => {
-        return {
-            variables,
-            table: {
-                nextPage,
-                previousPage,
-                isLoading,
-                setIsLoading,
-                reset,
-                pageInfo: pageInfo === null ? undefined : pageInfo,
-                setPageInfo,
-            },
-        };
-    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
-};
-
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -205,7 +152,7 @@ const usePaginationQuery = (document, props) => {
     const onReset = react.useCallback(() => {
         setResetTrigger(prev => prev + 1);
     }, []);
-    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = useRelayPagination({
+    const { table: { setIsLoading, isLoading, setPageInfo, pageInfo, reset, nextPage, previousPage }, variables: { first, after }, } = reactTable.useRelayPagination({
         pageSize: props.pageSize || 50,
         onReset,
     });
@@ -280,4 +227,3 @@ setupLibraryTranslations();
 
 exports.unionEdgesByNodeKey = unionEdgesByNodeKey;
 exports.usePaginationQuery = usePaginationQuery;
-exports.useRelayPagination = useRelayPagination;

package/index.esm.js

@@ -2,7 +2,8 @@ import 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { truthy } from '@trackunit/shared-utils';
 import * as ApolloClient from '@apollo/client';
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useRelayPagination } from '@trackunit/react-table';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 
 var defaultTranslations = {
 	
@@ -69,60 +70,6 @@ const unionEdgesByNodeKey = (key, previousEdges, newEdges) => {
         .filter(truthy);
 };
 
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-const useRelayPagination = (props = { pageSize: 50 }) => {
-    const [variables, setVariables] = useState({ first: props.pageSize });
-    const [pageInfo, setPageInfo] = useState();
-    const [isLoading, setIsLoading] = useState(false);
-    const nextPage = useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
-            setVariables({
-                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
-                first: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
-    const previousPage = useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
-            setVariables({
-                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
-                last: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
-    const reset = useCallback(() => {
-        setVariables({
-            last: undefined,
-            before: undefined,
-            after: undefined,
-            first: props.pageSize,
-        });
-        if (props.onReset) {
-            props.onReset();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.onReset, props.pageSize]);
-    return useMemo(() => {
-        return {
-            variables,
-            table: {
-                nextPage,
-                previousPage,
-                isLoading,
-                setIsLoading,
-                reset,
-                pageInfo: pageInfo === null ? undefined : pageInfo,
-                setPageInfo,
-            },
-        };
-    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
-};
-
 /**
  * This hook is used to fetch data from a GraphQL query and support pagination, it will help maintain the data and the pagination.
  *
@@ -254,4 +201,4 @@ const usePaginationQuery = (document, props) => {
  */
 setupLibraryTranslations();
 
-export { unionEdgesByNodeKey, usePaginationQuery, useRelayPagination };
+export { unionEdgesByNodeKey, usePaginationQuery };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-graphql-hooks",
-  "version": "0.0.1-alpha-1820203754.0",
+  "version": "0.0.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,8 @@
     "@apollo/client": "^3.7.10",
     "react": "^18.2.0",
     "@trackunit/i18n-library-translation": "*",
-    "@trackunit/shared-utils": "*"
+    "@trackunit/shared-utils": "*",
+    "@trackunit/react-table": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./unionEdgesByNodeKey";
 export * from "./usePaginationQuery";
-export * from "./useRelayPagination";

package/src/usePaginationQuery.d.ts

@@ -1,5 +1,5 @@
 import * as ApolloClient from "@apollo/client";
-import { RelayPageInfo, RelayTableSupport } from "./useRelayPagination";
+import { RelayPageInfo, RelayTableSupport } from "@trackunit/react-table";
 /**
  * This type is used to return the data from the query, the pagination object and the last fetched data.
  */

package/src/useRelayPagination.d.ts

@@ -1,41 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-export interface RelayPaginationProps {
-    pageSize?: number;
-    onReset?: () => void;
-}
-export interface RelayPageInfo {
-    count?: number | null;
-    endCursor?: string | null;
-    hasNextPage?: boolean;
-    hasPreviousPage?: boolean;
-    startCursor?: string | null;
-}
-export interface RelayPagination {
-    nextPage: () => void;
-    previousPage: () => void;
-    pageInfo?: RelayPageInfo;
-    isLoading: boolean;
-}
-export interface RelayPaginationQueryVariables {
-    first?: number | null;
-    last?: number | null;
-    before?: string | null;
-    after?: string | null;
-}
-export interface RelayTableSupport extends RelayPagination {
-    isLoading: boolean;
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
-    reset: () => void;
-    setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
-}
-export interface RelayPaginationSupport {
-    variables: RelayPaginationQueryVariables;
-    table: RelayTableSupport;
-}
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;