@capsitech/react-utilities 0.1.9 → 0.1.11

package/lib/Components/SuspenseRoute.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const isSuspenseComponent = (component) => typeof component === "object" &&
+    component &&
+    component.hasOwnProperty("$$typeof") &&
+    component.hasOwnProperty("_payload") &&
+    component.hasOwnProperty("_init");
+export const SuspenseRoute = ({ children: Component, label = "Loading components...", fallback: FallbackComponent, }) => {
+    if (isSuspenseComponent(Component)) {
+        if (!FallbackComponent)
+            FallbackComponent = SuspenseRouteFallback;
+        return _jsx(React.Suspense, { fallback: _jsx(FallbackComponent, { label: label }), children: _jsx(Component, {}) });
+    }
+    return (_jsx(Component, {}));
+};
+const SuspenseRouteFallback = ({ label = "Loading components..." }) => {
+    return _jsx("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            zIndex: 9999,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        }, children: label });
+};

package/lib/Components/index.js

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

package/lib/Hooks/index.d.ts

@@ -1,4 +1,4 @@
-import { useEffect, MutableRefObject } from 'react';
+import { useEffect } from 'react';
 export * from './useInfiniteScroll';
 export * from './useNetworkState';
 export * from './useShortcuts';
@@ -13,7 +13,7 @@ export declare const useUpdateEffect: typeof useEffect;
  *
  * @param value the value or function to persist
  */
-export declare function useLatestRef<T>(value: T): MutableRefObject<T>;
+export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
 /**
  * useCallbackRef hook
  *

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 /**
  * Infinite scrolling with intersection observer
  * @param scrollRef Reference object for observe bottom boundary

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.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.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.js

@@ -0,0 +1,326 @@
+import Axios from 'axios';
+import { saveAs } from 'file-saver';
+import { stringify } from 'qs';
+export var HttpMethods;
+(function (HttpMethods) {
+    HttpMethods["get"] = "get";
+    HttpMethods["post"] = "post";
+})(HttpMethods || (HttpMethods = {}));
+export var FileDownloadStatus;
+(function (FileDownloadStatus) {
+    FileDownloadStatus["downloading"] = "downloading";
+    FileDownloadStatus["done"] = "done";
+    FileDownloadStatus["error"] = "error";
+})(FileDownloadStatus || (FileDownloadStatus = {}));
+class ApiUtilityBase {
+    config = {};
+    get accessToken() {
+        return this.config.accessToken;
+    }
+    set accessToken(token) {
+        this.config.accessToken = token;
+    }
+    get handleError() {
+        return this.config.handleError || ((error, errors) => { });
+    }
+    set handleError(handler) {
+        this.config.handleError = handler;
+    }
+    /**
+     * Configure the API utility with base URL and other options
+     * @param config Configuration object
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
+    }
+    // private getParams = (params?: any) => {
+    //   if (params) {
+    //     for (const key in params) {
+    //       if (params[key] == null || params[key] === undefined || params[key] === '')
+    //         delete params[key];
+    //     }
+    //   }
+    //   return params;
+    // };
+    getResponse = async (endpoint, params, options) => {
+        return await Axios.get(endpoint, {
+            params,
+            paramsSerializer: {
+                serialize: (p, o) => {
+                    return stringify(params, {
+                        arrayFormat: 'indices',
+                        allowDots: true,
+                        skipNulls: true,
+                    });
+                },
+            },
+            ...this._axiosOptions(options || {}),
+        });
+    };
+    get = async (endpoint, params, throwErrorOn401, options) => {
+        const response = await this.getResponse(endpoint, params, options);
+        const data = this.handleResponse(response, throwErrorOn401);
+        return data;
+    };
+    getResult = async (endpoint, params, throwErrorOn401, options) => {
+        try {
+            const data = await this.get(endpoint, params, undefined, options);
+            if (data.status) {
+                return data.result;
+            }
+            else {
+                this.handleErrorResponse(data.message, data.errors);
+            }
+        }
+        catch (error) {
+            if (error.isAxiosError)
+                this.handleAxiosError(error, throwErrorOn401);
+            else
+                this.handleResponse(error, throwErrorOn401);
+        }
+        return null;
+    };
+    post = async (endpoint, body, contentType, options) => {
+        try {
+            const response = await Axios.post(endpoint, body, this._axiosOptions({ contentType, ...(options || {}) }));
+            const data = this.handleResponse(response);
+            return data;
+        }
+        catch (ex) {
+            if (ex?.isAxiosError) {
+                return this.handleAxiosError(ex);
+            }
+        }
+        return {};
+    };
+    put = async (endpoint, body, contentType, options) => {
+        try {
+            const response = await Axios.put(endpoint, body, this._axiosOptions({ contentType, ...(options || {}) }));
+            const data = this.handleResponse(response);
+            return data;
+        }
+        catch (ex) {
+            if (ex?.isAxiosError) {
+                return this.handleAxiosError(ex);
+            }
+        }
+        return {};
+    };
+    appendFormDataValues = (form, values, preFix) => {
+        if (!preFix || preFix.length <= 0)
+            preFix = '';
+        //check if given object is a string/number/boolean then add directly to the list with prefix
+        if ((typeof values !== 'function' && typeof values !== 'object' && typeof values !== 'symbol') || values instanceof File) {
+            if (values && preFix) {
+                form.append(preFix, values);
+            }
+            return;
+        }
+        for (const key in values) {
+            //prepare a field name
+            const fieldName = `${preFix}${preFix && !preFix.endsWith('.') ? '.' : ''}${key}`;
+            if (values[key] instanceof FileList) {
+                const fileList = values[key];
+                for (let fIndex = 0; fIndex < fileList.length; fIndex++) {
+                    form.append(`${fieldName}[${fIndex}]`, fileList[fIndex]);
+                }
+            }
+            else {
+                if (Array.isArray(values[key])) {
+                    values[key].forEach((el, idx) => {
+                        this.appendFormDataValues(form, el, `${fieldName}[${idx}]`);
+                    });
+                }
+                else {
+                    if (typeof values[key] === 'object') {
+                        this.appendFormDataValues(form, values[key], fieldName);
+                    }
+                    else if (values[key]) {
+                        form.append(fieldName, values[key]);
+                    }
+                }
+            }
+        }
+    };
+    postForm = async (endpoint, params, options) => {
+        let formData = new FormData();
+        if (params instanceof FormData) {
+            formData = params;
+        }
+        else {
+            this.appendFormDataValues(formData, params);
+        }
+        try {
+            const response = await Axios.post(endpoint, formData, this._axiosOptions({ contentType: 'multipart/form-data', ...(options || {}) }));
+            const data = this.handleResponse(response);
+            return data;
+        }
+        catch (ex) {
+            if (ex?.isAxiosError) {
+                return this.handleAxiosError(ex);
+            }
+        }
+        return {};
+    };
+    putForm = async (endpoint, params, options) => {
+        let formData = new FormData();
+        if (params instanceof FormData) {
+            formData = params;
+        }
+        else {
+            this.appendFormDataValues(formData, params);
+        }
+        try {
+            const response = await Axios.putForm(endpoint, formData, this._axiosOptions({ contentType: 'multipart/form-data', ...(options || {}) }));
+            const data = this.handleResponse(response);
+            return data;
+        }
+        catch (ex) {
+            if (ex?.isAxiosError) {
+                return this.handleAxiosError(ex);
+            }
+        }
+        return {};
+    };
+    delete = async (endpoint, contentType, options) => {
+        const response = await Axios.delete(endpoint, this._axiosOptions({ contentType, ...(options || {}) }));
+        const data = this.handleResponse(response);
+        return data;
+    };
+    getFileName = (contentDispositionValue) => {
+        var filename = undefined;
+        if (contentDispositionValue && contentDispositionValue.indexOf('attachment') !== -1) {
+            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+            var matches = filenameRegex.exec(contentDispositionValue);
+            if (matches != null && matches[1]) {
+                filename = matches[1].replace(/['"]/g, '');
+            }
+        }
+        return filename;
+    };
+    downloadFile = async (endpoint, params, method, options) => {
+        let response;
+        const headers = {};
+        // return authorization header with jwt token
+        const token = this.accessToken; // || AuthService.getAuthToken();
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        const axiosOptions = { headers, ...(options || {}) };
+        if (method === HttpMethods.post) {
+            response = Axios.post(endpoint, params, {
+                ...this._axiosOptions(axiosOptions),
+                responseType: 'blob',
+            });
+        }
+        else {
+            response = Axios.get(endpoint, {
+                params,
+                paramsSerializer: {
+                    serialize: (p, o) => {
+                        return stringify(params, {
+                            arrayFormat: 'indices',
+                            allowDots: true,
+                            skipNulls: true,
+                        });
+                    },
+                },
+                ...this._axiosOptions(axiosOptions),
+                responseType: 'blob',
+            });
+        }
+        try {
+            const result_1 = await response;
+            //extract file name from Content-Disposition header
+            const fileName = this.getFileName(result_1.headers.get('Content-Disposition'));
+            //invoke 'Save As' dialog
+            saveAs(result_1.data, fileName);
+            return { status: FileDownloadStatus.done };
+        }
+        catch (error) {
+            if (error.isAxiosError) {
+                this.handleResponse(error.response);
+            }
+            else
+                this.handleResponse(error);
+            if (error.response) {
+                return {
+                    status: FileDownloadStatus.error,
+                    error: error.response.status,
+                };
+            }
+            else {
+                return { status: FileDownloadStatus.error, error: error.message };
+            }
+        }
+    };
+    getAuthHeader = (contentType) => {
+        const headers = {
+            'Content-Type': contentType || 'application/json',
+            Accept: 'application/json',
+        };
+        // return authorization header with jwt token
+        const token = this.accessToken; //||AuthService.getAuthToken();
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        return headers;
+    };
+    handleResponse = (response, throwErrorOn401) => {
+        if (!response) {
+            if (this.handleError)
+                this.handleError('No response from the server, please try after some time.');
+        }
+        else if ([401, 403].indexOf(response.status) !== -1) {
+            if (throwErrorOn401) {
+                throw response;
+            }
+            else {
+                console.error('401 Unauthorized or 403 Forbidden response returned from api');
+                // // auto logout if 401 Unauthorized or 403 Forbidden response returned from api
+                // AuthService.logout();
+                // window.location.reload();
+            }
+        }
+        return response?.data;
+    };
+    handleAxiosError = (error, throwErrorOn401) => {
+        if (throwErrorOn401 && error.response?.status === 401)
+            throw error;
+        else if (error.response?.status === 400) {
+            const data = error.response.data;
+            if (data && data.errors) {
+                const arr = [];
+                for (const key in data.errors) {
+                    if (data.errors[key] && data.errors[key].length > 0) {
+                        arr.push(data.errors[key][0]);
+                    }
+                }
+                return {
+                    result: null,
+                    status: false,
+                    message: arr.length > 0 ? arr[0] : '',
+                    errors: arr,
+                };
+            }
+        }
+        return {};
+    };
+    handleErrorResponse = (message, errors) => {
+        if (this.handleError)
+            this.handleError(message, errors);
+    };
+    _axiosOptions = (options) => {
+        const { contentType, headers, ...rest } = options || {};
+        return {
+            headers: headers || this.getAuthHeader(contentType),
+            baseURL: this.getBaseUrl(),
+            ...rest,
+        };
+    };
+    getBaseUrl = () => {
+        // Priority: 1. Configured baseURL, 2. Environment variable, 3. undefined
+        return this.config.baseURL || process.env.REACT_APP_API_URL || (typeof window !== 'undefined' && window.__API_BASE_URL__);
+    };
+}
+export const ApiUtility = new ApiUtilityBase();