init

src/features/core/hooks/use-header-config.ts

@@ -0,0 +1,27 @@
+import { isMatch, useMatches } from "@tanstack/react-router";
+import { HeaderConfig } from "../types/header-config";
+
+export const defaultHeaderConfig: HeaderConfig = {
+  title: 'Starter App',
+  withBackButton: false,
+  collapsed: false,
+}
+
+const useHeaderConfig = () => {
+  const matches = useMatches();
+
+  const matchesWithHeader = matches.filter((match) =>
+    isMatch(match, 'loaderData.header'),
+  )
+
+  const config = matchesWithHeader.reduce((acc, match) => {
+    return {
+      ...acc,
+      ...match?.loaderData?.header,
+    }
+  }, defaultHeaderConfig) as HeaderConfig;
+
+  return config;
+}
+
+export default useHeaderConfig;

src/features/core/hooks/use-links.ts

@@ -0,0 +1,38 @@
+import { GearIcon, HouseIcon, QuestionIcon, ShieldIcon, TrophyIcon, UserCircleIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+
+export const useLinks = (userId: number, roles: string[]) => 
+  useMemo(() => {
+    const links = [
+      {
+        label: 'Home',
+        href: '/',
+        Icon: HouseIcon
+      },
+      {
+        label: 'Tournaments',
+        href: '/tournaments',
+        Icon: TrophyIcon
+      },
+      {
+        label: 'Profile',
+        href: `/profile/${userId}`,
+        Icon: UserCircleIcon
+      },
+      {
+        label: 'Settings',
+        href: '/settings',
+        Icon: GearIcon
+      }
+    ]
+
+    if (roles.includes('Admin')) {
+      links.push({
+        label: 'Admin',
+        href: '/admin',
+        Icon: ShieldIcon
+      })
+    }
+
+    return links;
+  }, [userId, roles]);

src/features/core/hooks/use-refresh-config.ts

@@ -0,0 +1,24 @@
+import { isMatch, useMatches } from "@tanstack/react-router";
+
+export const defaultRefreshConfig: { toRefresh: string[] } = {
+  toRefresh: [],
+}
+
+const useRefreshConfig = () => {
+  const matches = useMatches();
+
+  const matchesWithRefresh = matches.filter((match) =>
+    isMatch(match, 'loaderData.refresh'),
+  )
+
+  const config = matchesWithRefresh.reduce((acc, match) => {
+    return {
+      ...acc,
+      ...match?.loaderData?.refresh,
+    }
+  }, defaultRefreshConfig) as { toRefresh: string[] };
+
+  return config;
+}
+
+export default useRefreshConfig;

src/features/core/hooks/use-visual-viewport-size.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const eventListerOptions = {
+  passive: true,
+};
+
+const useVisualViewportSize = () => {
+  const windowExists = typeof window !== 'undefined';
+  const [windowSize, setWindowSize] = useState({
+    width: windowExists ? window.visualViewport?.width || 0 : 0,
+    height: windowExists ? window.visualViewport?.height || 0 : 0,
+    top: windowExists ? window.visualViewport?.offsetTop || 0 : 0,
+  });
+
+  const setSize = useCallback(() => {
+    if (!windowExists) return;
+    setWindowSize({ width: window.visualViewport?.width || 0, height: window.visualViewport?.height || 0, top: window.visualViewport?.offsetTop || 0 });
+  }, []);
+
+  useEffect(() => {
+    if (!windowExists) return;
+    window.visualViewport?.addEventListener('resize', setSize, eventListerOptions);
+    return () => {
+      window.visualViewport?.removeEventListener('resize', setSize);
+    }
+  }, []);
+
+  return windowSize;
+}
+
+export default useVisualViewportSize;