@andre1502/react-utilities 0.9.6 → 1.0.1

package/src/Hooks/useWebSocket.ts

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from 'react';
+
+type WebSocketRef = WebSocket | null;
+
+interface WebSocketOutput {
+  isConnected: boolean;
+  isError: boolean;
+  connect: (url: string) => void;
+  messages: string[];
+  clearMessages: () => void;
+}
+
+const useWebSocket = (): WebSocketOutput => {
+  const pingInterval = 30000; // Default ping every 30 seconds
+  const [url, setUrl] = useState('');
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [messages, setMessages] = useState<string[]>([]);
+  const socketRef = useRef<WebSocketRef>(null);
+  const heartbeatIntervalRef = useRef<number>(undefined);
+
+  const connect = (newUrl: string) => {
+    if (newUrl && url !== newUrl) {
+      setUrl(newUrl);
+    }
+  };
+
+  const clearMessages = () => {
+    setMessages([]);
+  };
+
+  // Connect WebSocket after login
+  useEffect(() => {
+    if (url) {
+      // Open WebSocket connection
+      if (socketRef.current === null) {
+        socketRef.current = new WebSocket(url);
+      } else if (socketRef.current.url !== url) {
+        socketRef.current.close();
+        socketRef.current = new WebSocket(url);
+      }
+
+      socketRef.current.onopen = (event: Event) => {
+        // console.log('WebSocket onopen', 'event', event);
+
+        setIsError(false);
+        setIsConnected(true);
+
+        heartbeatIntervalRef.current = window.setInterval(() => {
+          if (socketRef.current?.readyState === WebSocket.OPEN) {
+            socketRef.current?.send('ping');
+          }
+        }, pingInterval);
+      };
+
+      socketRef.current.onmessage = (event: MessageEvent) => {
+        console.log('WebSocket onmessage', 'event.data', event.data);
+
+        if (event.data === 'ping') {
+          socketRef.current?.send('pong');
+          return;
+        }
+
+        setTimeout(() => {
+          setMessages((prev) => {
+            if (!prev.includes(event.data)) {
+              prev.push(event.data);
+            }
+
+            return prev;
+          });
+        }, 1000);
+      };
+
+      socketRef.current.onerror = (error: Event) => {
+        console.error('WebSocket onerror:', 'error', error);
+
+        setIsError(true);
+        setIsConnected(false);
+      };
+
+      socketRef.current.onclose = (event: CloseEvent) => {
+        // console.log('WebSocket onclose', 'event', event);
+
+        if (event.wasClean) {
+          // console.log(
+          //   `[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`,
+          // );
+        } else {
+          // e.g. server process killed or network down, event.code is usually 1006 in this case
+          console.warn(
+            `[close] Connection died, code=${event.code} reason=${event.reason}`,
+          );
+
+          setIsError(true);
+        }
+
+        setIsConnected(false);
+      };
+    }
+
+    // Cleanup on unmount or logout
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.close();
+      }
+
+      clearInterval(heartbeatIntervalRef.current);
+    };
+  }, [url]);
+
+  return { isConnected, isError, connect, messages, clearMessages };
+};
+
+export default useWebSocket;

package/src/I18n/I18n.ts

@@ -3,10 +3,7 @@ import ChainedBackend from 'i18next-chained-backend';
 import HttpBackend from 'i18next-http-backend';
 import LocalStorageBackend from 'i18next-localstorage-backend';
 import ResourcesToBackend from 'i18next-resources-to-backend';
-
-const getV = (divider: number): number => {
-  return Math.floor(Date.now() / divider);
-};
+import { getV } from '../utils';
 
 export interface InitI18nProps {
   initReactI18next: ThirdPartyModule;
@@ -116,6 +113,11 @@ const initI18n = ({
         bindI18nStore: 'added', // this way, when the HttpBackend delivers new translations (thanks to refreshAndUpdateStore), the UI gets updated
       },
     };
+  } else {
+    config = {
+      ...config,
+      resources: resources,
+    };
   }
 
   if (!i18next.isInitialized) {

package/src/Sentry/ReactNative.ts

@@ -1,7 +1,4 @@
-import {
-  captureConsoleIntegration,
-  httpClientIntegration,
-} from '@sentry/integrations';
+import { captureConsoleIntegration } from '@sentry/core';
 import * as Sentry from '@sentry/react-native';
 import { InitOptionsRN } from '../interfaces/Sentry/InitOptionsRN';
 import { StringRegexArr } from '../types/Sentry/OptionType';
@@ -36,7 +33,7 @@ const initSentry = (options: InitOptionsRN): void => {
     options?.httpClientIntegrationOptions?.failedRequestTargets
   ) {
     integrations.push(
-      httpClientIntegration({
+      Sentry.httpClientIntegration({
         failedRequestStatusCodes:
           options.httpClientIntegrationOptions.failedRequestStatusCodes,
         failedRequestTargets:

package/src/Utils/Array.ts

@@ -0,0 +1,23 @@
+export const padArrayStart = (
+  array: string[],
+  targetLength: number,
+  padValue: string,
+): string[] => {
+  const padding = Array(Math.max(targetLength - array.length, 0)).fill(
+    padValue,
+  );
+  return [...padding, ...array];
+};
+
+export const sliceFromEnd = (
+  array: string[],
+  positionFromEnd: number,
+): string[] => {
+  if (positionFromEnd <= 0) return []; // If position is 0 or negative, return an empty array
+
+  return array.slice(-positionFromEnd);
+};
+
+export const joinWithoutFalsy = (array: string[], separator = ','): string => {
+  return array.filter(Boolean).join(separator);
+};

package/src/Utils/Pagination.ts

@@ -0,0 +1,42 @@
+export const getItemRow = (index: number, page?: number, pageSize?: number) => {
+  page = page ?? 0;
+
+  if (page > 0) {
+    page = page - 1;
+  }
+
+  return (pageSize ?? 0) * page + index + 1;
+};
+
+export const getNextPage = (
+  page?: number,
+  pageSize?: number,
+  totalRecords?: number,
+): number | undefined => {
+  let totalPage = 0;
+
+  page = (page ?? 0) + 1;
+
+  if (pageSize && totalRecords) {
+    totalPage = Math.ceil(totalRecords / pageSize);
+  }
+
+  if (page > totalPage) {
+    page = undefined;
+  }
+
+  return page;
+};
+
+export const getTotalPages = (
+  pageSize?: number,
+  totalRecords?: number,
+): number => {
+  let totalPage = 0;
+
+  if (pageSize && totalRecords) {
+    totalPage = Math.ceil(totalRecords / pageSize);
+  }
+
+  return totalPage || 1;
+};

package/src/Utils/Utils.ts

@@ -0,0 +1,75 @@
+export const getV = (divider: number): number => {
+  return Math.floor(Date.now() / divider);
+};
+
+// pad value with zero
+export const padNumber = (value: number, padded: string | undefined = '0') => {
+  return (padded + Math.floor(value)).slice(-2);
+};
+
+export const getLastPathName = (pathName: string) => {
+  const tmpPathName = pathName.split('/');
+
+  return tmpPathName[tmpPathName.length - 1] || 'bet';
+};
+
+export function parseQueryString(fullString: string): {
+  originValue: string;
+} & Record<string, string> {
+  const [originValue, queryString] = fullString.split('?');
+  const params: { [key: string]: string } = {};
+
+  if (queryString) {
+    queryString.split('&').forEach((param) => {
+      const [key, value] = param.split('=');
+      params[key] = value;
+    });
+  }
+
+  return { originValue, ...params };
+}
+
+export const getUniquePermutations = (
+  array: string[],
+  length: number,
+): string[][] => {
+  if (length === 1) return array.map((item) => [item]);
+
+  const permutations = new Set<string>(); // Use Set to prevent duplicates
+  for (let i = 0; i < array.length; i++) {
+    const current = array[i];
+    const remaining = array.slice(0, i).concat(array.slice(i + 1));
+    const subPermutations = getUniquePermutations(remaining, length - 1);
+    subPermutations.forEach((perm) => {
+      permutations.add([current, ...perm].join(',')); // Join to ensure uniqueness
+    });
+  }
+
+  // Convert back to array format
+  return [...permutations].map((perm) => perm.split(','));
+};
+
+export const getKeyByValue = <T>(
+  object: Record<string, T>,
+  value: T,
+): string | undefined => {
+  return Object.keys(object).find((key) => object[key] === value);
+};
+
+export const autoBlur = () => {
+  setTimeout(() => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }, 0);
+};
+
+export const isValidHttpUrl = (url: string) => {
+  try {
+    const newUrl = new URL(url);
+
+    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
+  } catch (err) {
+    return false;
+  }
+};

package/src/enums/DeviceEnum.ts

@@ -0,0 +1,4 @@
+export enum DeviceEnum {
+  PC = 'pc',
+  MOBILE = 'mobile',
+}

package/src/hooks.ts

@@ -0,0 +1,11 @@
+import useDevice from './Hooks/useDevice';
+import useSEStore from './Hooks/useSEStore';
+import useSound from './Hooks/useSound';
+import useWebSocket from './Hooks/useWebSocket';
+
+export * from './Hooks/useDevice';
+export * from './Hooks/useSEStore';
+export * from './Hooks/useSound';
+export * from './Hooks/useWebSocket';
+
+export { useDevice, useSEStore, useSound, useWebSocket };

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from './format';
+export * from './hooks';
 export * from './i18n';
 export * from './sentry';
+export * from './utils';

package/src/utils.ts

@@ -0,0 +1,3 @@
+export * from './Utils/Array';
+export * from './Utils/Pagination';
+export * from './Utils/Utils';