@greatapps/greatauth-ui 0.3.17 → 0.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.17",
+  "version": "0.3.19",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/app-header.tsx

@@ -25,6 +25,7 @@ export function AppHeader({ config }: AppHeaderProps) {
   const pathname = usePathname();
   const segments = pathname.split("/").filter(Boolean);
 
+  const routeLabelsJson = JSON.stringify(config.routeLabels);
   const breadcrumbs = useMemo(() => {
     const items: { label: string; href: string }[] = [];
     for (let i = 0; i < segments.length; i++) {
@@ -35,7 +36,7 @@ export function AppHeader({ config }: AppHeaderProps) {
       }
     }
     return items;
-  }, [segments, config.routeLabels]);
+  }, [segments, routeLabelsJson]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const isLast = (i: number) => i === breadcrumbs.length - 1;
   const showEllipsis = breadcrumbs.length > 2;

package/src/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import { ChevronsUpDown, ChevronRight, LogOut } from "lucide-react";
@@ -50,7 +50,7 @@ function getUserInitials(name: string, email: string): string {
   return parts[0][0].toUpperCase();
 }
 
-function SimpleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
+const SimpleMenuItem = memo(function SimpleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
   const isActive = item.isActive ?? pathname.startsWith(item.href);
   const Icon = item.icon;
 
@@ -69,9 +69,9 @@ function SimpleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }
       </SidebarMenuButton>
     </SidebarMenuItem>
   );
-}
+});
 
-function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
+const CollapsibleMenuItem = memo(function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: string }) {
   const Icon = item.icon;
   const isParentActive = pathname.startsWith(item.href);
   const isChildActive = item.children?.some((child) =>
@@ -82,8 +82,8 @@ function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: str
   const [open, setOpen] = useState(isActive);
 
   useEffect(() => {
-    if (isActive) setOpen(true);
-  }, [isActive]);
+    if (open !== isActive) setOpen(isActive);
+  }, [isActive]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="group/collapsible">
@@ -113,7 +113,7 @@ function CollapsibleMenuItem({ item, pathname }: { item: MenuItem; pathname: str
       </SidebarMenuItem>
     </Collapsible>
   );
-}
+});
 
 export function AppSidebar({ config }: AppSidebarProps) {
   const pathname = usePathname();

package/src/components/users/users-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { GauthUser, GauthUserHookConfig } from "../../types/users";
 import { useUsers, useDeleteUser, useResetPassword } from "../../hooks/use-users";
@@ -165,10 +165,13 @@ export function UsersPage({ config, renderPhones }: UsersPageProps) {
     );
   }, [users, search]);
 
-  const columns = useColumns(
-    (u) => { setEditUser(u); setFormOpen(true); },
-    (id) => setDeleteId(id),
-    (u) => setResetUser(u),
+  const onEdit = useCallback((u: GauthUser) => { setEditUser(u); setFormOpen(true); }, []);
+  const onDelete = useCallback((id: number) => setDeleteId(id), []);
+  const onResetPassword = useCallback((u: GauthUser) => setResetUser(u), []);
+
+  const columns = useMemo(
+    () => useColumns(onEdit, onDelete, onResetPassword),
+    [onEdit, onDelete, onResetPassword],
   );
 
   function handleDelete() {

package/src/hooks/use-auth.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { useSession } from "../auth/auth-client";
 
 interface JwtClaimsConfig {
@@ -28,49 +29,53 @@ export function createUseAuth(config?: UseAuthConfig) {
   return function useAuth() {
     const { data: sessionData, isPending, error } = useSession();
 
-    const session = sessionData?.session ?? null;
-    const user = sessionData?.user ?? null;
+    const result = useMemo(() => {
+      const session = sessionData?.session ?? null;
+      const user = sessionData?.user ?? null;
 
-    const sessionObj = session as Record<string, unknown> | null;
-    const userObj = user as Record<string, unknown> | null;
+      const sessionObj = session as Record<string, unknown> | null;
+      const userObj = user as Record<string, unknown> | null;
 
-    // Read from session first (per-login, isolated per app), fallback to user record (backward compat)
-    const gauthToken = (sessionObj?.gauthToken ?? userObj?.gauthToken ?? null) as string | null;
-    const idAccount = (sessionObj?.idAccount ?? userObj?.idAccount ?? null) as string | null;
-    const gauthProfile = (sessionObj?.gauthProfile ?? userObj?.gauthProfile ?? null) as Record<string, unknown> | null;
+      // Read from session first (per-login, isolated per app), fallback to user record (backward compat)
+      const gauthToken = (sessionObj?.gauthToken ?? userObj?.gauthToken ?? null) as string | null;
+      const idAccount = (sessionObj?.idAccount ?? userObj?.idAccount ?? null) as string | null;
+      const gauthProfile = (sessionObj?.gauthProfile ?? userObj?.gauthProfile ?? null) as Record<string, unknown> | null;
 
-    const result: Record<string, unknown> = {
-      session,
-      user,
-      gauthToken,
-      idAccount,
-      gauthProfile,
-      isLoading: isPending,
-      isAuthenticated: !!session && !!user,
-      error: error ?? null,
-    };
+      const res: Record<string, unknown> = {
+        session,
+        user,
+        gauthToken,
+        idAccount,
+        gauthProfile,
+        isLoading: isPending,
+        isAuthenticated: !!session && !!user,
+        error: error ?? null,
+      };
 
-    if (config?.jwtClaims && gauthToken) {
-      const payload = decodeJwtPayload(gauthToken);
-      if (payload) {
-        for (const [jwtKey, fieldName] of Object.entries(config.jwtClaims)) {
-          result[fieldName] = payload[jwtKey] ?? null;
+      if (config?.jwtClaims && gauthToken) {
+        const payload = decodeJwtPayload(gauthToken);
+        if (payload) {
+          for (const [jwtKey, fieldName] of Object.entries(config.jwtClaims)) {
+            res[fieldName] = payload[jwtKey] ?? null;
+          }
         }
       }
-    }
 
-    if (config?.accountIdOverride) {
-      const overriddenId = config.accountIdOverride(user as Record<string, unknown> | null);
-      if (overriddenId !== null) {
-        result.idAccount = overriddenId;
+      if (config?.accountIdOverride) {
+        const overriddenId = config.accountIdOverride(user as Record<string, unknown> | null);
+        if (overriddenId !== null) {
+          res.idAccount = overriddenId;
+        }
       }
-    }
 
-    if (config?.extraUserFields && user) {
-      for (const field of config.extraUserFields) {
-        result[field] = (user as Record<string, unknown>)[field] ?? null;
+      if (config?.extraUserFields && user) {
+        for (const field of config.extraUserFields) {
+          res[field] = (user as Record<string, unknown>)[field] ?? null;
+        }
       }
-    }
+
+      return res;
+    }, [sessionData, isPending, error]);
 
     return result;
   };

package/src/hooks/use-mobile.ts

@@ -3,17 +3,19 @@
 import { useEffect, useState } from "react";
 
 const MOBILE_BREAKPOINT = 768;
+const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
 
   useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(MOBILE_QUERY);
     const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     mql.addEventListener("change", onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     return () => mql.removeEventListener("change", onChange);
   }, []);
 
-  return !!isMobile;
+  return isMobile;
 }

package/src/hooks/use-users.ts

@@ -29,7 +29,7 @@ async function request<T>(url: string, token: string, options?: RequestInit): Pr
 
 export function useUsers(config: GauthUserHookConfig, params?: Record<string, string>) {
   return useQuery({
-    queryKey: ["greatauth", "users", config.accountId, params],
+    queryKey: ["greatauth", "users", config.accountId, JSON.stringify(params)],
     queryFn: () => {
       const qs = params ? "?" + new URLSearchParams(params).toString() : "";
       return request<GauthUser[]>(buildUrl(config, `users${qs}`), config.token!);