project setup

hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+import { debounce } from "lodash";
+
+export const useDebounce = <T>(value: T, delay = 300): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = debounce(() => setDebouncedValue(value), delay);
+
+    handler();
+    return () => {
+      handler.cancel();
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

hooks/useDocumentTitle.ts

@@ -0,0 +1,35 @@
+import { usePathname } from "expo-router";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+
+export const useDocumentTitle = () => {
+  const pathname = usePathname();
+
+  const getSectionFromPath = (path: string): string => {
+    if (path.includes("/dashboard") || path === "/(tabs)" || path === "/") {
+      return "Dashboard";
+    } else if (path.includes("/accounts")) {
+      return "Accounts";
+    } else if (path.includes("/logs")) {
+      return "Logs";
+    } else if (path.includes("/reports")) {
+      return "Reports";
+    } else if (path.includes("/data-protection")) {
+      return "Data Protection";
+    } else if (path.includes("/settings")) {
+      return "Settings";
+    } else {
+      return "Project Athena";
+    }
+  };
+
+  const currentSection = getSectionFromPath(pathname);
+
+  useEffect(() => {
+    if (Platform.OS === "web") {
+      document.title = `${currentSection} | Project Athena`;
+    }
+  }, [currentSection, pathname]);
+
+  return currentSection;
+};

hooks/useRoleAccess.ts

@@ -0,0 +1,26 @@
+import { useAuthContext } from "@/auth/AuthContext";
+import { RoleEnum } from "@/constants/roleEnum";
+
+export const useRoleAccess = () => {
+  const { user } = useAuthContext();
+  const currentRole = user?.role;
+
+  const isUser = currentRole === RoleEnum.USER;
+  const isAdmin =
+    currentRole === RoleEnum.ADMIN || currentRole === RoleEnum.MANAGER;
+  const isManager = currentRole === RoleEnum.MANAGER;
+
+  return {
+    currentRole,
+    isUser,
+    isAdmin,
+    isManager,
+    hasAccess: (level: RoleEnum) => {
+      const hierarchy = [RoleEnum.USER, RoleEnum.ADMIN, RoleEnum.MANAGER];
+      return (
+        currentRole !== undefined &&
+        hierarchy.indexOf(currentRole) >= hierarchy.indexOf(level)
+      );
+    },
+  };
+};

hooks/useScreenSizeListener.ts

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { Dimensions } from "react-native";
+
+import { useAppDispatch } from "@/store/hooks";
+import { setScreenSize } from "@/store/screen/screenSizeSlice";
+
+export const useScreenSizeListener = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const { width, height } = Dimensions.get("window");
+    dispatch(setScreenSize({ width, height }));
+
+    const onChange = ({
+      window,
+    }: {
+      window: { width: number; height: number };
+    }) => {
+      dispatch(setScreenSize({ width: window.width, height: window.height }));
+    };
+
+    const subscription = Dimensions.addEventListener("change", onChange);
+
+    return () => subscription.remove();
+  }, [dispatch]);
+};
+
+export const ScreenSizeListenerWrapper = () => {
+  useScreenSizeListener();
+  return null;
+};