1. useMe
The useMe returns the current managed user’s info. This hook is useful when you need to display a managed user’s details.
Below code snippet shows how to use the useMe hook to fetch user details.
import { useMe } from "@calcom/atoms";
export default function UserDetails() {
const { data: userData, isLoading: isLoadingUser } = useMe();
return (
<>
{isLoadingUser && <p>Loading...</p>}
{!isLoadingUser && !userData && <p>No user found</p>}
{!isLoadingUser &&
!!userData &&
return (
<div>Username: {userData.username}</div>
)
}
</>
);
}
2. useTeams
The useTeams returns all teams info. This hook is useful when you need to display or manage a user’s entire collection of teams.
Below code snippet shows how to use the useTeams hook to fetch team details.
import { useTeams } from "@calcom/atoms";
export default function UserTeams() {
const { data: teams, isLoading: isLoadingTeams } = useTeams();
return (
<>
{isLoadingTeams && <p>Loading...</p>}
{!isLoadingTeams && !teams && <p>No teams found</p>}
{!isLoadingTeams &&
teams &&
(Boolean(teams?.length)) &&
teams?.map((team) => {
return (
<div key={team.id}><h1>Team name: {team.name}</h1></div>
);
})}
</>
);
}