@capsitech/react-utilities 0.1.2

package/README.md

@@ -0,0 +1,3 @@
+# `Capsitech.ReactUtilities`
+
+A set of javascript utility methods

package/lib/Hooks/index.d.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+export * from './useInfiniteScroll';
+export * from './useNetworkState';
+export * from './useShortcuts';
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export declare const useUpdateEffect: typeof useEffect;
+/**
+ * React hook to persist any value between renders,
+ * but keeps it up-to-date if it changes.
+ *
+ * @param value the value or function to persist
+ */
+export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
+/**
+ * useCallbackRef hook
+ *
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders
+ * ..when passed as a prop or avoid re-executing effects when passed as a dependency
+ *
+ * @param callback The callback to write to a ref object
+ */
+export declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;
+/**
+ * useFirstRenderState hook
+ *
+ * Returns "true" if component is just mounted (first render), else "false".
+ */
+export declare const useFirstRenderState: () => boolean;
+/**
+ * React Hook that provides a declarative `setInterval`
+ *
+ * @param callback the callback to execute at interval
+ * @param delay the `setInterval` delay (in ms)
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+/**
+ * React hook that provides a declarative `setTimeout`
+ *
+ * @param callback the callback to run after specified delay
+ * @param delay the delay (in ms)
+ */
+export declare function useTimeout(callback: Function, delay: number | null): void;

package/lib/Hooks/index.js

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef } from 'react';
+export * from './useInfiniteScroll';
+export * from './useNetworkState';
+export * from './useShortcuts';
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export const useUpdateEffect = (effect, deps) => {
+    const mounted = useRef(false);
+    useEffect(() => {
+        if (mounted.current) {
+            return effect();
+        }
+        mounted.current = true;
+        return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return mounted.current;
+};
+/**
+ * React hook to persist any value between renders,
+ * but keeps it up-to-date if it changes.
+ *
+ * @param value the value or function to persist
+ */
+export function useLatestRef(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}
+/**
+ * useCallbackRef hook
+ *
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders
+ * ..when passed as a prop or avoid re-executing effects when passed as a dependency
+ *
+ * @param callback The callback to write to a ref object
+ */
+export const useCallbackRef = (callback) => {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    return useCallback(((...args) => {
+        return callbackRef.current?.(...args);
+    }), []);
+};
+/**
+ * useFirstRenderState hook
+ *
+ * Returns "true" if component is just mounted (first render), else "false".
+ */
+export const useFirstRenderState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+/**
+ * React Hook that provides a declarative `setInterval`
+ *
+ * @param callback the callback to execute at interval
+ * @param delay the `setInterval` delay (in ms)
+ */
+export function useInterval(callback, delay) {
+    const savedCallback = useLatestRef(callback);
+    useEffect(() => {
+        const tick = () => {
+            savedCallback.current?.();
+        };
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay, savedCallback]);
+}
+/**
+ * React hook that provides a declarative `setTimeout`
+ *
+ * @param callback the callback to run after specified delay
+ * @param delay the delay (in ms)
+ */
+export function useTimeout(callback, delay) {
+    const savedCallback = useLatestRef(callback);
+    useEffect(() => {
+        if (delay == null)
+            return;
+        const timeoutId = setTimeout(() => {
+            savedCallback.current?.();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [delay, savedCallback]);
+}

package/lib/Hooks/useInfiniteScroll.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Infinite scrolling with intersection observer
+ * @param scrollRef Reference object for observe bottom boundary
+ * @param dispatch Trigger an action that updates the page number
+ */
+export declare const useInfiniteScroll: (scrollRef: React.MutableRefObject<any>, dispatch: any) => void;

package/lib/Hooks/useInfiniteScroll.js

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * Infinite scrolling with intersection observer
+ * @param scrollRef Reference object for observe bottom boundary
+ * @param dispatch Trigger an action that updates the page number
+ */
+export const useInfiniteScroll = (scrollRef, dispatch) => {
+    const scrollObserver = React.useCallback((node) => {
+        new IntersectionObserver((entries) => {
+            entries.forEach((en) => {
+                if (en.intersectionRatio > 0) {
+                    dispatch({ type: 'next-page' });
+                }
+            });
+        }).observe(node);
+    }, [dispatch]);
+    React.useEffect(() => {
+        if (scrollRef.current) {
+            scrollObserver(scrollRef.current);
+        }
+    }, [scrollObserver, scrollRef]);
+};

package/lib/Hooks/useNetworkState.d.ts

@@ -0,0 +1,67 @@
+export interface INetworkInformation extends EventTarget {
+    readonly downlink: number;
+    readonly downlinkMax: number;
+    readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
+    readonly rtt: number;
+    readonly saveData: boolean;
+    readonly type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
+    onChange: (event: Event) => void;
+}
+export interface IUseNetworkState {
+    /**
+     * @desc Whether browser connected to the network or not.
+     */
+    online: boolean | undefined;
+    /**
+     * @desc Previous value of `online` property. Helps to identify if browser
+     * just connected or lost connection.
+     */
+    previous: boolean | undefined;
+    /**
+     * @desc The {Date} object pointing to the moment when state change occurred.
+     */
+    since: Date | undefined;
+    /**
+     * @desc Effective bandwidth estimate in megabits per second, rounded to the
+     * nearest multiple of 25 kilobits per seconds.
+     */
+    downlink: INetworkInformation['downlink'] | undefined;
+    /**
+     * @desc Maximum downlink speed, in megabits per second (Mbps), for the
+     * underlying connection technology
+     */
+    downlinkMax: INetworkInformation['downlinkMax'] | undefined;
+    /**
+     * @desc Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
+     * This value is determined using a combination of recently observed round-trip time
+     * and downlink values.
+     */
+    effectiveType: INetworkInformation['effectiveType'] | undefined;
+    /**
+     * @desc Estimated effective round-trip time of the current connection, rounded
+     * to the nearest multiple of 25 milliseconds
+     */
+    rtt: INetworkInformation['rtt'] | undefined;
+    /**
+     * @desc {true} if the user has set a reduced data usage option on the user agent.
+     */
+    saveData: INetworkInformation['saveData'] | undefined;
+    /**
+     * @desc The type of connection a device is using to communicate with the network.
+     * It will be one of the following values:
+     *  - bluetooth
+     *  - cellular
+     *  - ethernet
+     *  - none
+     *  - wifi
+     *  - wimax
+     *  - other
+     *  - unknown
+     */
+    type: INetworkInformation['type'] | undefined;
+}
+export declare const isBrowser: boolean;
+export declare const isNavigator: boolean;
+export type IHookStateInitialSetter<S> = () => S;
+export type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
+export declare function useNetworkState(initialState?: IHookStateInitAction<IUseNetworkState>): IUseNetworkState;

package/lib/Hooks/useNetworkState.js

@@ -0,0 +1,41 @@
+import React from 'react';
+export const isBrowser = typeof window !== 'undefined';
+export const isNavigator = typeof navigator !== 'undefined';
+const nav = isNavigator ? navigator : undefined;
+const conn = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
+function getConnectionState(previousState) {
+    const online = nav?.onLine;
+    const previousOnline = previousState?.online;
+    return {
+        online,
+        previous: previousOnline,
+        since: online !== previousOnline ? new Date() : previousState?.since,
+        downlink: conn?.downlink,
+        downlinkMax: conn?.downlinkMax,
+        effectiveType: conn?.effectiveType,
+        rtt: conn?.rtt,
+        saveData: conn?.saveData,
+        type: conn?.type,
+    };
+}
+export function useNetworkState(initialState) {
+    const [state, setState] = React.useState(initialState ?? getConnectionState);
+    React.useEffect(() => {
+        const handleStateChange = () => {
+            setState(getConnectionState);
+        };
+        window.addEventListener('online', handleStateChange, { passive: true });
+        window.addEventListener('offline', handleStateChange, { passive: true });
+        if (conn) {
+            window.addEventListener('change', handleStateChange, { passive: true });
+        }
+        return () => {
+            window.removeEventListener('online', handleStateChange);
+            window.removeEventListener('offline', handleStateChange);
+            if (conn) {
+                window.removeEventListener('change', handleStateChange);
+            }
+        };
+    }, []);
+    return state;
+}

package/lib/Hooks/useShortcuts.d.ts

@@ -0,0 +1,4 @@
+export declare const useShortcuts: (shortcutKeys: string[] | string, callback: (keys: string) => void, options?: {
+    overrideSystem: boolean;
+}) => void;
+export declare function disabledEventPropagation(e: KeyboardEvent): void;

package/lib/Hooks/useShortcuts.js

@@ -0,0 +1,91 @@
+import React from 'react';
+const blacklistedTargets = ['INPUT', 'TEXTAREA', 'SELECT'];
+const keysReducer = (state, action) => {
+    switch (action.type) {
+        case 'set-key-down':
+            const keydownState = { ...state, [action.key]: true };
+            return keydownState;
+        case 'set-key-up':
+            const keyUpState = { ...state, [action.key]: false };
+            return keyUpState;
+        case 'reset-keys':
+            const resetState = { ...action.data };
+            return resetState;
+        default:
+            return state;
+    }
+};
+export const useShortcuts = (shortcutKeys, callback, options) => {
+    if (!Array.isArray(shortcutKeys))
+        throw new Error('The first parameter to `useShortcuts` must be an ordered array of `KeyboardEvent.key` strings.');
+    if (!shortcutKeys.length)
+        throw new Error('The first parameter to `useShortcuts` must contain atleast one `KeyboardEvent.key` string.');
+    if (!callback || typeof callback !== 'function')
+        throw new Error('The second parameter to `useShortcuts` must be a function that will be envoked when the keys are pressed.');
+    const { overrideSystem } = options || {};
+    const initalKeyMapping = shortcutKeys.reduce((currentKeys, key) => {
+        currentKeys[key.toLowerCase()] = false;
+        return currentKeys;
+    }, {});
+    const [keys, setKeys] = React.useReducer(keysReducer, initalKeyMapping);
+    const keydownListener = React.useCallback((assignedKey) => (keydownEvent) => {
+        const loweredKey = assignedKey.toLowerCase();
+        if (keydownEvent.repeat)
+            return;
+        if (blacklistedTargets.includes(keydownEvent.target.tagName))
+            return;
+        if (loweredKey !== keydownEvent.key.toLowerCase())
+            return;
+        if (keys[loweredKey] === undefined)
+            return;
+        if (overrideSystem) {
+            keydownEvent.preventDefault();
+            disabledEventPropagation(keydownEvent);
+        }
+        setKeys({ type: 'set-key-down', key: loweredKey });
+        return false;
+    }, [keys, overrideSystem]);
+    const keyupListener = React.useCallback((assignedKey) => (keyupEvent) => {
+        const raisedKey = assignedKey.toLowerCase();
+        if (blacklistedTargets.includes(keyupEvent.target.tagName))
+            return;
+        if (keyupEvent.key.toLowerCase() !== raisedKey)
+            return;
+        if (keys[raisedKey] === undefined)
+            return;
+        if (overrideSystem) {
+            keyupEvent.preventDefault();
+            disabledEventPropagation(keyupEvent);
+        }
+        setKeys({ type: 'set-key-up', key: raisedKey });
+        return false;
+    }, [keys, overrideSystem]);
+    React.useEffect(() => {
+        //console.log('keys', keys);
+        if (!Object.values(keys).filter((value) => !value).length) {
+            callback(keys);
+            setKeys({ type: 'reset-keys', data: initalKeyMapping });
+        }
+        else {
+            setKeys({ type: '' });
+        }
+    }, [callback, keys]);
+    React.useEffect(() => {
+        shortcutKeys.forEach((k) => window.addEventListener('keydown', keydownListener(k)));
+        return () => shortcutKeys.forEach((k) => window.removeEventListener('keydown', keydownListener(k)));
+    }, []);
+    React.useEffect(() => {
+        shortcutKeys.forEach((k) => window.addEventListener('keyup', keyupListener(k)));
+        return () => shortcutKeys.forEach((k) => window.removeEventListener('keyup', keyupListener(k)));
+    }, []);
+};
+export function disabledEventPropagation(e) {
+    if (e) {
+        if (e.stopPropagation) {
+            e.stopPropagation();
+        }
+        else if (window.event) {
+            window.event.cancelBubble = true;
+        }
+    }
+}

package/lib/Utilities/ApiUtility.axios.d.ts

@@ -0,0 +1,60 @@
+import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
+export interface IApiResponse<T = any> {
+    status: boolean;
+    result: T;
+    message?: string;
+    errors?: {
+        number: number;
+        message: string;
+        suggestion: string;
+        exception: any;
+    }[];
+}
+export interface IApiListResult<T = any> {
+    totalRecords: number;
+    items: T[];
+    moreRecords?: boolean;
+    continuationToken?: string;
+}
+export interface IApiListResultWithTotal<TItem = any, TTotal = any> extends IApiListResult<TItem> {
+    total: TTotal;
+}
+export declare enum HttpMethods {
+    get = "get",
+    post = "post"
+}
+export declare enum FileDownloadStatus {
+    downloading = "downloading",
+    done = "done",
+    error = "error"
+}
+export type DownloadCallback = (status: FileDownloadStatus, error?: any) => void;
+export interface IAxiosRequestConfigWithoutParams extends Omit<AxiosRequestConfig, 'params' | 'paramsSerializer'> {
+    contentType?: string;
+}
+declare class ApiUtilityBase {
+    accessToken?: string;
+    handleError: (error: string, errors?: any) => void;
+    getResponse: <T = any>(endpoint: string, params?: any, options?: IAxiosRequestConfigWithoutParams) => Promise<AxiosResponse<T, any>>;
+    get: <T = IApiResponse<any>>(endpoint: string, params?: any, throwErrorOn401?: boolean, options?: IAxiosRequestConfigWithoutParams) => Promise<T>;
+    getResult: <T = any>(endpoint: string, params?: any, throwErrorOn401?: boolean, options?: IAxiosRequestConfigWithoutParams) => Promise<T | null>;
+    post: <T = IApiResponse<any>>(endpoint: string, body: any, contentType?: string, options?: IAxiosRequestConfigWithoutParams) => Promise<T>;
+    put: <T = IApiResponse<any>>(endpoint: string, body: any, contentType?: string, options?: IAxiosRequestConfigWithoutParams) => Promise<T>;
+    appendFormDataValues: (form: FormData, values: any, preFix?: string) => void;
+    postForm: <T = IApiResponse<any>>(endpoint: string, params: any, options?: IAxiosRequestConfigWithoutParams) => Promise<IApiResponse<any> | T>;
+    putForm: <T = IApiResponse<any>>(endpoint: string, params: any, options?: IAxiosRequestConfigWithoutParams) => Promise<IApiResponse<any> | T>;
+    delete: <T = IApiResponse<any>>(endpoint: string, contentType?: string, options?: IAxiosRequestConfigWithoutParams) => Promise<T>;
+    private getFileName;
+    downloadFile: (endpoint: string, params?: any, method?: HttpMethods, options?: IAxiosRequestConfigWithoutParams) => Promise<{
+        status: FileDownloadStatus;
+        error?: any;
+    }>;
+    getAuthHeader: (contentType?: string) => any;
+    handleResponse: <T = IApiResponse<any>>(response: AxiosResponse<T, any>, throwErrorOn401?: boolean) => T;
+    handleAxiosError: <T = IApiResponse<any>>(error: AxiosError, throwErrorOn401?: boolean) => T;
+    handleErrorResponse: (message: any, errors?: any) => void;
+    _axiosOptions: (options?: IAxiosRequestConfigWithoutParams) => AxiosRequestConfig;
+    getBaseUrl: () => string | undefined;
+}
+export declare const ApiUtility: ApiUtilityBase;
+export {};