Rajiv Sahal
83b6b7caf9
* export custom hooks to create event types * update hooks page * separate hooks into their own files
60 lines
1.5 KiB
Plaintext
60 lines
1.5 KiB
Plaintext
---
|
|
title: User / Teams hooks
|
|
description: Overview of all the hooks associated with managed users or teams.
|
|
---
|
|
|
|
### 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.
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
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>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
``` |