fix(app): refresh after unlinking device

Author: chasprowebdev

apps/app/src/app/(app)/[orgId]/people/all/components/MemberRow.tsx

@@ -26,7 +26,6 @@ import {
 import { Label } from '@comp/ui/label';
 import type { Role } from '@db';
 
-import { usePeopleActions } from '@/hooks/use-people-api';
 import { toast } from 'sonner';
 import { MultiRoleCombobox } from './MultiRoleCombobox';
 import { RemoveDeviceAlert } from './RemoveDeviceAlert';
@@ -36,6 +35,7 @@ import type { MemberWithUser } from './TeamMembers';
 interface MemberRowProps {
   member: MemberWithUser;
   onRemove: (memberId: string) => void;
+  onRemoveDevice: (memberId: string) => void;
   onUpdateRole: (memberId: string, roles: Role[]) => void;
   canEdit: boolean;
   isCurrentUserOwner: boolean;
@@ -56,10 +56,9 @@ function getInitials(name?: string | null, email?: string | null): string {
   return '??';
 }
 
-export function MemberRow({ member, onRemove, onUpdateRole, canEdit, isCurrentUserOwner }: MemberRowProps) {
+export function MemberRow({ member, onRemove, onRemoveDevice, onUpdateRole, canEdit, isCurrentUserOwner }: MemberRowProps) {
   const params = useParams<{ orgId: string }>();
   const { orgId } = params;
-  const { unlinkDevice } = usePeopleActions();
 
   const [isRemoveAlertOpen, setIsRemoveAlertOpen] = useState(false);
   const [isRemoveDeviceAlertOpen, setIsRemoveDeviceAlertOpen] = useState(false);
@@ -133,8 +132,7 @@ export function MemberRow({ member, onRemove, onUpdateRole, canEdit, isCurrentUs
   const handleRemoveDeviceClick = async () => {
     try {
       setIsRemovingDevice(true);
-      await unlinkDevice(memberId);
-      toast.success('Device unlinked successfully');
+      await onRemoveDevice(memberId);
       setIsRemoveDeviceAlertOpen(false);
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Failed to unlink device');

apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx

@@ -26,6 +26,7 @@ import type { revokeInvitation } from '../actions/revokeInvitation';
 import type { EmployeeSyncConnectionsData } from '../data/queries';
 import { useEmployeeSync } from '../hooks/useEmployeeSync';
 import { InviteMembersModal } from './InviteMembersModal';
+import { usePeopleActions } from '@/hooks/use-people-api';
 
 // Define prop types using typeof for the actions still used
 interface TeamMembersClientProps {
@@ -64,6 +65,8 @@ export function TeamMembersClient({
   const [roleFilter, setRoleFilter] = useQueryState('role', parseAsString.withDefault('all'));
   const [statusFilter, setStatusFilter] = useQueryState('status', parseAsString.withDefault('all'));
 
+  const { unlinkDevice } = usePeopleActions();
+
   // Add state for the modal
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
 
@@ -190,6 +193,12 @@ export function TeamMembersClient({
     }
   };
 
+  const handleRemoveDevice = async (memberId: string) => {
+    await unlinkDevice(memberId);
+    toast.success('Device unlinked successfully');
+    router.refresh(); // Revalidate data to update UI
+  };
+
   // Update handleUpdateRole to use authClient and add toasts
   const handleUpdateRole = async (memberId: string, roles: Role[]) => {
     const rolesArray = Array.isArray(roles) ? roles : [roles];
@@ -391,6 +400,7 @@ export function TeamMembersClient({
                 key={member.displayId}
                 member={member as MemberWithUser}
                 onRemove={handleRemoveMember}
+                onRemoveDevice={handleRemoveDevice}
                 onUpdateRole={handleUpdateRole}
                 canEdit={canManageMembers}
                 isCurrentUserOwner={isCurrentUserOwner}