maintenance

src/utility/custom-hooks.ts

@@ -0,0 +1,105 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {useState, useEffect, useRef, Dispatch, SetStateAction, RefObject} from 'react';
+import {DirectionType, ITableSort} from 'interfaces/tableProps';
+import AuthService from 'services/Authentication.service';
+
+const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+export const useCurrentWidth = (): number => {
+  const [width, setWidth] = useState(getWidth());
+
+  useEffect(() => {
+    const resizeListener = () => setWidth(getWidth());
+
+    window.addEventListener('resize', resizeListener);
+
+    return () => window.removeEventListener('resize', resizeListener);
+  }, []);
+
+  return width;
+};
+
+export const useComponentVisible = (
+  initialIsVisible: boolean
+): {
+  ref: RefObject<HTMLDivElement>;
+  isComponentVisible: boolean;
+  setIsComponentVisible: Dispatch<SetStateAction<boolean>>;
+} => {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+  const ref = useRef(null);
+  const handleClickOutside = () => {
+    setIsComponentVisible(false);
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, []);
+
+  return {
+    ref,
+    isComponentVisible,
+    setIsComponentVisible
+  };
+};
+
+export const useHeightResize = (heightOffset: number): [number] => {
+  const [height, setHeight] = useState(window.innerHeight - heightOffset);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setHeight(window.innerHeight - heightOffset);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line
+  }, []);
+
+  return [height];
+};
+
+export const useSearch = (propsSearchValue?: string): [string, Dispatch<SetStateAction<string>>] => {
+  const [searchValue, setSearchValue] = useState<string | undefined>(propsSearchValue);
+
+  useEffect(() => {
+    setSearchValue(propsSearchValue);
+  }, [propsSearchValue, setSearchValue]);
+
+  return [searchValue, setSearchValue];
+};
+
+export const useSort = ({sortColumn, sortDirection}: Partial<ITableSort>): [ITableSort, Dispatch<SetStateAction<ITableSort>>] => {
+  const [sortData, setSortData] = useState<ITableSort | null>(null);
+
+  useEffect(() => {
+    if ((sortColumn && !sortData) || sortColumn !== sortData?.sortColumn || sortDirection !== sortData?.sortDirection) {
+      const newSortDirection = sortDirection || sortData?.sortDirection || DirectionType.Asc;
+      const newSortColumn = sortColumn || sortData?.sortColumn;
+
+      setSortData({
+        sortDirection: newSortDirection,
+        sortColumn: newSortColumn ?? ''
+      });
+    }
+  }, [sortColumn, sortDirection, sortData, setSortData]);
+
+  return [sortData, setSortData];
+};
+
+export const useLoginStatus = (applicationId: string): [boolean] => {
+  const [isLoggedIn, setLoginStatus] = useState(false);
+
+  useEffect(() => {
+    AuthService.hasLoginToken().then((response: boolean) => setLoginStatus(response));
+  }, [applicationId]);
+
+  return [isLoggedIn];
+};