chore: update hooks sections for platform docs (#19726)
* export custom hooks to create event types * update hooks page * separate hooks into their own files
This commit is contained in:
Rajiv Sahal authored and 
GitHub committed
1 parent
6fc3ca539b
commit
83b6b7caf9
7 files changed
+481
-307
No files matched your search
+10
-1
@@ -202,7 +202,16 @@
|
||||
"platform/atoms/conferencing-apps"
|
||||
]
|
||||
},
|
||||
"platform/hooks",
|
||||
{
|
||||
"group": "Hooks",
|
||||
"icon": "brackets-curly",
|
||||
"pages": [
|
||||
"platform/bookings-hooks",
|
||||
"platform/event-types-hooks",
|
||||
"platform/calendars-hooks",
|
||||
"platform/user-or-team-related-hooks"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Guides",
|
||||
"icon": "book",
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: Bookings hooks
|
||||
description: Overview of all the hooks associated with bookings.
|
||||
---
|
||||
|
||||
Optimize your development workflow using our custom hooks. Our custom hooks are designed to simplify the integration of the Cal.com API into your products. With these hooks, you can effortlessly manage state, handle side effects, and optimize performance, allowing you to focus on building exceptional user experiences without the hassle of complex API interactions.
|
||||
|
||||
Below is a list of hooks you can find that are associated with bookings:
|
||||
|
||||
### 1. `useBookings`
|
||||
|
||||
The useBookings hook returns an array of all the booking data, allowing you to filter bookings by status, such as ***upcoming,*** ***recurring***, ***past,*** ***cancelled,*** or ***unconfirmed.*** It also supports pagination through the take and skip parameters. Additionally, various properties can be passed to useBookings, which can be referenced in the [following](https://github.com/calcom/cal.com/blob/307b2946a2cb6dcdb32dbee6c4f448e8a01c4285/packages/platform/types/bookings/2024-08-13/inputs/get-bookings.input.ts#L32) documentation for detailed information.
|
||||
|
||||
Below code snippet shows how to use the useBookings hook to fetch bookings for a specific user.
|
||||
|
||||
```js
|
||||
import { useBookings } from "@calcom/atoms";
|
||||
|
||||
export default function Bookings() {
|
||||
const { isLoading: isLoadingUpcomingBookings, data: upcomingBookings } = useBookings({
|
||||
take: 50,
|
||||
skip: 0,
|
||||
status: ["upcoming"],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Upcoming bookings</h1>
|
||||
{isLoadingUpcomingBookings && <p>Loading...</p>}
|
||||
{!isLoadingUpcomingBookings && !upcomingBookings && <p>No upcoming bookings found</p>}
|
||||
{!isLoading &&
|
||||
upcomingBookings &&
|
||||
(Boolean(upcomingBookings?.length)) &&
|
||||
[...upcomingBookings].map((booking) => {
|
||||
return (
|
||||
<div key={booking.id}><h1>{booking.title}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `useBooking`
|
||||
|
||||
The useBooking hook returns detailed information about a single booking. Simply provide the booking's unique identifier ***(bookingUid)*** as a parameter to fetch its associated data.
|
||||
|
||||
Below code snippet shows how to use the useBooking hook to fetch a specific booking for a user.
|
||||
|
||||
```js
|
||||
import { useBooking } from "@calcom/atoms";
|
||||
|
||||
export default function Booking() {
|
||||
const { isLoading: isLoadingBooking, data: booking } = useBooking("nChHoxEm1GXVPzi7TNAuWc");
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingBooking && <p>Loading...</p>}
|
||||
{!isLoadingBooking && !booking && <p>No booking found</p>}
|
||||
{!isLoading &&
|
||||
!!booking &&
|
||||
return (
|
||||
<div>Title: {booking.title}</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `useCancelBooking`
|
||||
|
||||
The useCancelBooking hook allows you to cancel a booking. This hook returns a mutation function that handles the cancellation process. To cancel a booking, you'll need to provide at least the booking's unique identifier ***(uid).*** While the uid is the only mandatory parameter, you can enhance the cancellation process by including optional parameters such as ***cancellationReason*** to specify why the booking is being canceled, and ***allRemainingBookings*** to specify whether to cancel all future recurring bookings.
|
||||
|
||||
Below code snippet shows how to use the useCancelBooking hook to cancel a booking for a user.
|
||||
|
||||
```js
|
||||
import { useCancelBooking } from "@calcom/atoms";
|
||||
|
||||
export default function CancelBooking() {
|
||||
const { mutate: cancelBooking } = useCancelBooking({
|
||||
onSuccess: () => {
|
||||
console.log("Booking canceled successfully!")
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => {
|
||||
cancelBooking({
|
||||
uid: "6L6ADNpVHwLX25V8wXKsBr",
|
||||
cancellationReason: "User request",
|
||||
allRemainingBookings: true,
|
||||
})
|
||||
}}>
|
||||
Cancel booking
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Calendars hooks
|
||||
description: Overview of all the hooks associated with calendars.
|
||||
---
|
||||
|
||||
### 1. `useConnectedCalendars`
|
||||
|
||||
The useConnectedCalendars returns an object containing all connected calendars of a user, and the destination calendar. It is useful in managing multiple calendar integrations. Each connected calendar entry contains essential properties such as the credentialId, externalId and integration which should be an object, which can be used in the hooks to add and remove selected calendars.
|
||||
|
||||
Below code snippet shows how to use the useConnectedCalendars hook to fetch calendars for a user.
|
||||
|
||||
```js
|
||||
import { useConnectedCalendars } from "@calcom/atoms";
|
||||
|
||||
export default function ConnectedCalendars() {
|
||||
const { isLoading: isLoadingConnectedCalendars, data: userCalendars } = useConnectedCalendars({});
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingConnectedCalendars && <p>Loading...</p>}
|
||||
{!isLoadingConnectedCalendars && !userCalendars && <p>No connected calendars</p>}
|
||||
{!isLoadingConnectedCalendars &&
|
||||
userCalendars &&
|
||||
(Boolean(userCalendars?connectedCalendars?.length)) &&
|
||||
userCalendars?connectedCalendars?.map((calendar) => {
|
||||
return (
|
||||
<div key={calendar.credentialId}><h1>Calendar type: {calendar.integration.name}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `useAddSelectedCalendar`
|
||||
|
||||
The useAddSelectedCalendar lets you add a calendar to check for conflicts to prevent double bookings. This hook returns a mutation function that handles the addition process. The mutation function accepts an object with the following properties: ***credentialId*** which is the credential id of the calendar to add, ***integration*** which is the name of the integration, and ***externalId*** which is the external id of the calendar. In order to obtain those credentials, you can use the ***useConnectedCalendars*** hook.
|
||||
|
||||
Below code snippet shows how to use the useAddSelectedCalendar hook to add a specific calendar to check for conflicts.
|
||||
|
||||
```js
|
||||
import { useAddSelectedCalendar } from "@calcom/atoms";
|
||||
|
||||
export default function AddSelectedCalendar() {
|
||||
const { mutate: addSelectedCalendar } = useAddSelectedCalendar({
|
||||
onSuccess: () => {
|
||||
console.log("Selected calendar added successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error adding selected calendar");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => {
|
||||
addSelectedCalendar({
|
||||
credentialId: 123,
|
||||
integration: "google_calendar",
|
||||
externalId: "613f23c27149a2796f2c155bfe79203a135@group.calendar.google.com",
|
||||
})
|
||||
}}>
|
||||
Add selected calendar
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `useRemoveSelectedCalendar`
|
||||
|
||||
The useRemoveSelectedCalendar lets you remove a calendar to check for conflicts to prevent double bookings. This hook returns a mutation function that handles the addition process. The mutation function accepts an object with the following properties: ***credentialId*** which is the credential id of the calendar to add, ***integration*** which is the name of the integration, and ***externalId*** which is the external id of the calendar. In order to obtain those credentials, you can use the ***useConnectedCalendars*** hook.
|
||||
|
||||
Below code snippet shows how to use the useRemoveSelectedCalendar hook to remove a specific calendar to check for conflicts.
|
||||
|
||||
```js
|
||||
import { useRemoveSelectedCalendar } from "@calcom/atoms";
|
||||
|
||||
export default function RemoveSelectedCalendar() {
|
||||
const { mutate: removeSelectedCalendar } = useRemoveSelectedCalendar({
|
||||
onSuccess: () => {
|
||||
console.log("Selected calendar removed successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error removing selected calendar");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => {
|
||||
removeSelectedCalendar({
|
||||
credentialId: 987,
|
||||
integration: "office365_calendar",
|
||||
externalId: "AQMkADAwATM3AADfEpy7w2EpEOi_xwYa7A_cQcACgtJE7RnHEeyisVq2Eq2ENs2gAAAhFDAAAA",
|
||||
})
|
||||
}}>
|
||||
Remove selected calendar
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. `useDeleteCalendarCredentials`
|
||||
|
||||
The useDeleteCalendarCredentials hook allows you to delete a users calendar credentials. This hook returns a mutation function which handles the deletion process. The mutation function accepts an object with the following properties: ***id*** which is the credential id, and ***calendar*** is the name of the calendar which can be either google, office365 or apple.
|
||||
|
||||
Below code snippet shows how to use the useDeleteCalendarCredentials hook to manage deletion of calendar credentials.
|
||||
|
||||
```js
|
||||
import { useDeleteCalendarCredentials } from "@calcom/atoms";
|
||||
|
||||
export default function DeleteUserCalendar() {
|
||||
const { mutate: deleteCalendarCredentials } = useDeleteCalendarCredentials({
|
||||
onSuccess: () => {
|
||||
console.log("Calendar credentials deleted successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error deleting calendar credentials");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={async () => {
|
||||
await deleteCalendarCredentials({
|
||||
calendar: "google",
|
||||
id: 123,
|
||||
})
|
||||
}}>
|
||||
Delete calendar
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: Event types hooks
|
||||
description: Overview of all the hooks associated with event types.
|
||||
---
|
||||
|
||||
<Note>In order to create a team event type, you need to have an Essentials plan or above. Additionally, you also need to be a team admin or owner.</Note>
|
||||
|
||||
### 1. `useEventTypes`
|
||||
|
||||
The useEventTypes returns all event types associated with a user. Simply provide a username to fetch all their available event types. This hook is useful when you need to display or manage a user's entire collection of event configurations.
|
||||
|
||||
Below code snippet shows how to use the useEventTypes hook to fetch the event types of a specific user.
|
||||
|
||||
```js
|
||||
import { useEventTypes } from "@calcom/atoms";
|
||||
|
||||
export default function EventTypes({ username }: { username: string }) {
|
||||
const { isLoading: isLoadingEvents, data: eventTypes, refetch } = useEventTypes(username);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingEvents && <p>Loading...</p>}
|
||||
{!isLoadingEvents && !eventTypes && <p>No event types found</p>}
|
||||
{!isLoadingEvents &&
|
||||
eventTypes &&
|
||||
(Boolean(eventTypes?.length)) &&
|
||||
eventTypes?.map((event) => {
|
||||
return (
|
||||
<div key={event.id}><h1>Event: {event.slug}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `useTeamEventTypes`
|
||||
|
||||
The useTeamEventTypes returns all event types associated with a team. Simply provide the team id to fetch all their available event types. This hook is useful when you need to display or manage a team's entire collection of event configurations.
|
||||
|
||||
Below code snippet shows how to use the useTeamEventTypes hook to fetch the event types of a team.
|
||||
|
||||
```js
|
||||
import { useTeamEventTypes } from "@calcom/atoms";
|
||||
|
||||
export default function TeamEventTypes({ id }: { id: number }) {
|
||||
const { isLoading: isLoadingTeamEvents, data: teamEventTypes, refetch: refetchTeamEvents } = useTeamEventTypes(id);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingTeamEvents && <p>Loading...</p>}
|
||||
{!isLoadingTeamEvents && !teamEventTypes && <p>No team events found</p>}
|
||||
{!isLoadingTeamEvents &&
|
||||
teamEventTypes &&
|
||||
(Boolean(teamEventTypes?.length)) &&
|
||||
teamEventTypes?.map((event) => {
|
||||
return (
|
||||
<div key={event.id}><h1>Team event: {event.slug}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `useEventTypeById`
|
||||
|
||||
The useEventTypeById returns data for a specific event type, provided you pass in the correct event type id. This hook is useful when you need to display or manage a specific event type.
|
||||
|
||||
Below code snippet shows how to use the useEventTypeById hook to fetch a specific event type.
|
||||
|
||||
```js
|
||||
import { useEventTypeById } from "@calcom/atoms";
|
||||
|
||||
export default function EventType({ id }: { id: number }) {
|
||||
const { isLoading: isLoadingEventType, data: eventType } = useEventTypeById(id);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingEventType && <p>Loading...</p>}
|
||||
{!isLoadingEventType && !eventType && <p>No event type found</p>}
|
||||
{!isLoadingEventType &&
|
||||
!!eventType &&
|
||||
return (
|
||||
<div>Title: {eventType.slug}</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. `useCreateEventType`
|
||||
|
||||
The useCreateEventType hook allows you to create a new event type. This hook returns a mutation function that handles the event type creation process. The mutation function accepts an object with the following properties: ***lengthInMinutes*** which is the length of the event in minutes, ***title*** which is the title of the event, ***slug*** which is the slug of the event, and ***description*** which is the description of the event.
|
||||
|
||||
Below code snippet shows how to use the useCreateEventType hook to setup an event type.
|
||||
|
||||
```js
|
||||
import { useCreateEventType } from "@calcom/atoms";
|
||||
|
||||
export default function CreateEventType() {
|
||||
const { mutate: createEventType, isPending } = useCreateEventType({
|
||||
onSuccess: () => {
|
||||
console.log("Event type created successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error creating event type");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
disabled={isPending}
|
||||
onClick={() => {
|
||||
createEventType({
|
||||
lengthInMinutes: 15,
|
||||
title: "Coffee chat",
|
||||
slug: "coffee-chat",
|
||||
description: "Quick chat about coffee and life in general!",
|
||||
})
|
||||
}}>
|
||||
Create event type
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 5. `useCreateTeamEventType`
|
||||
|
||||
The useCreateTeamEventType hook allows you to create a new team event type. This hook returns a mutation function that handles the event type creation process. The mutation function accepts an object with the following properties: ***lengthInMinutes*** which is the length of the event in minutes, ***title*** which is the title of the event, ***slug*** which is the slug of the event, ***description*** which is the description of the event, schedulingType which can be either ***COLLECTIVE***, ***ROUND_ROBIN*** or ***MANAGED***, ***hosts*** which is an array of hosts for the event and the ***teamId*** which is the id of the team.
|
||||
|
||||
Below code snippet shows how to use the useCreateTeamEventType hook to setup a team event type.
|
||||
|
||||
```js
|
||||
import { useCreateTeamEventType } from "@calcom/atoms";
|
||||
|
||||
export default function CreateTeamEventType() {
|
||||
const { mutate: createTeamEventType, isPending } = useCreateTeamEventType({
|
||||
onSuccess: () => {
|
||||
console.log("Event type created successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error creating event type");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
disabled={isPending}
|
||||
onClick={() => {
|
||||
createTeamEventType({
|
||||
lengthInMinutes: 30,
|
||||
title: "Daily standup",
|
||||
slug: "daily-standup",
|
||||
description: "Daily standup for the team",
|
||||
schedulingType: "COLLECTIVE",
|
||||
hosts: [{"userId": 1456}, {"userId": 2357}],
|
||||
teamId: 1234,
|
||||
})
|
||||
}}>
|
||||
Create team event type
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -1,306 +0,0 @@
|
||||
---
|
||||
title: Hooks
|
||||
description: Optimize your development workflow using our custom hooks.
|
||||
"icon": "brackets-curly"
|
||||
---
|
||||
|
||||
Our custom hooks are designed to simplify the integration of the Cal.com API into your products. With these hooks, you can effortlessly manage state, handle side effects, and optimize performance, allowing you to focus on building exceptional user experiences without the hassle of complex API interactions.
|
||||
|
||||
Below are hooks you can use to interact with the Cal.com API:
|
||||
|
||||
### 1. `useBookings`
|
||||
|
||||
The useBookings hook returns an array of all the booking data, allowing you to filter bookings by status, such as ***upcoming,*** ***recurring***, ***past,*** ***cancelled,*** or ***unconfirmed.*** It also supports pagination through the take and skip parameters. Additionally, various properties can be passed to useBookings, which can be referenced in the [following](https://github.com/calcom/cal.com/blob/307b2946a2cb6dcdb32dbee6c4f448e8a01c4285/packages/platform/types/bookings/2024-08-13/inputs/get-bookings.input.ts#L32) documentation for detailed information.
|
||||
|
||||
Below code snippet shows how to use the useBookings hook to fetch bookings for a specific user.
|
||||
|
||||
```js
|
||||
import { useBookings } from "@calcom/atoms";
|
||||
|
||||
export default function Bookings() {
|
||||
const { isLoading: isLoadingUpcomingBookings, data: upcomingBookings } = useBookings({
|
||||
take: 50,
|
||||
skip: 0,
|
||||
status: ["upcoming"],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Upcoming bookings</h1>
|
||||
{isLoadingUpcomingBookings && <p>Loading...</p>}
|
||||
{!isLoadingUpcomingBookings && !upcomingBookings && <p>No upcoming bookings found</p>}
|
||||
{!isLoading &&
|
||||
upcomingBookings &&
|
||||
(Boolean(upcomingBookings?.length)) &&
|
||||
[...upcomingBookings].map((booking) => {
|
||||
return (
|
||||
<div key={booking.id}><h1>{booking.title}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `useBooking`
|
||||
|
||||
The useBooking hook returns detailed information about a single booking. Simply provide the booking's unique identifier ***(bookingUid)*** as a parameter to fetch its associated data.
|
||||
|
||||
Below code snippet shows how to use the useBooking hook to fetch a specific booking for a user.
|
||||
|
||||
```js
|
||||
import { useBooking } from "@calcom/atoms";
|
||||
|
||||
export default function Booking() {
|
||||
const { isLoading: isLoadingBooking, data: booking } = useBooking("nChHoxEm1GXVPzi7TNAuWc");
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingBooking && <p>Loading...</p>}
|
||||
{!isLoadingBooking && !booking && <p>No booking found</p>}
|
||||
{!isLoading &&
|
||||
!!booking &&
|
||||
return (
|
||||
<div>Title: {booking.title}</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `useCancelBooking`
|
||||
|
||||
The useCancelBooking hook allows you to cancel a booking. This hook returns a mutation function that handles the cancellation process. To cancel a booking, you'll need to provide at least the booking's unique identifier ***(uid).*** While the uid is the only mandatory parameter, you can enhance the cancellation process by including optional parameters such as ***cancellationReason*** to specify why the booking is being canceled, and ***allRemainingBookings*** to specify whether to cancel all future recurring bookings.
|
||||
|
||||
Below code snippet shows how to use the useCancelBooking hook to cancel a booking for a user.
|
||||
|
||||
```js
|
||||
import { useCancelBooking } from "@calcom/atoms";
|
||||
|
||||
export default function CancelBooking() {
|
||||
const { mutate: cancelBooking } = useCancelBooking({
|
||||
onSuccess: () => {
|
||||
console.log("Booking canceled successfully!")
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => {
|
||||
cancelBooking({
|
||||
uid: "6L6ADNpVHwLX25V8wXKsBr",
|
||||
cancellationReason: "User request",
|
||||
allRemainingBookings: true,
|
||||
})
|
||||
}}>
|
||||
Cancel booking
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. `useEventTypes`
|
||||
|
||||
The useEventTypes returns all event types associated with a user. Simply provide a username to fetch all their available event types. This hook is useful when you need to display or manage a user's entire collection of event configurations.
|
||||
|
||||
Below code snippet shows how to use the useEventTypes hook to fetch the event types of a specific user.
|
||||
|
||||
```js
|
||||
import { useEventTypes } from "@calcom/atoms";
|
||||
|
||||
export default function EventTypes({ username }: { username: string }) {
|
||||
const { isLoading: isLoadingEvents, data: eventTypes, refetch } = useEventTypes(username);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingEvents && <p>Loading...</p>}
|
||||
{!isLoadingEvents && !eventTypes && <p>No event types found</p>}
|
||||
{!isLoadingEvents &&
|
||||
eventTypes &&
|
||||
(Boolean(eventTypes?.length)) &&
|
||||
eventTypes?.map((event) => {
|
||||
return (
|
||||
<div key={event.id}><h1>Event: {event.slug}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 5. `useTeamEventTypes`
|
||||
|
||||
The useTeamEventTypes returns all event types associated with a team. Simply provide the team id to fetch all their available event types. This hook is useful when you need to display or manage a team's entire collection of event configurations.
|
||||
|
||||
Below code snippet shows how to use the useTeamEventTypes hook to fetch the event types of a team.
|
||||
|
||||
```js
|
||||
import { useTeamEventTypes } from "@calcom/atoms";
|
||||
|
||||
export default function TeamEventTypes({ id }: { id: number }) {
|
||||
const { isLoading: isLoadingTeamEvents, data: teamEventTypes, refetch: refetchTeamEvents } = useTeamEventTypes(id);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingTeamEvents && <p>Loading...</p>}
|
||||
{!isLoadingTeamEvents && !teamEventTypes && <p>No team events found</p>}
|
||||
{!isLoadingTeamEvents &&
|
||||
teamEventTypes &&
|
||||
(Boolean(teamEventTypes?.length)) &&
|
||||
teamEventTypes?.map((event) => {
|
||||
return (
|
||||
<div key={event.id}><h1>Team event: {event.slug}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. `useEventTypeById`
|
||||
|
||||
The useEventTypeById returns data for a specific event type, provided you pass in the correct event type id. This hook is useful when you need to display or manage a specific event type.
|
||||
|
||||
Below code snippet shows how to use the useEventTypeById hook to fetch a specific event type.
|
||||
|
||||
```js
|
||||
import { useEventTypeById } from "@calcom/atoms";
|
||||
|
||||
export default function EventType({ id }: { id: number }) {
|
||||
const { isLoading: isLoadingEventType, data: eventType } = useEventTypeById(id);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingEventType && <p>Loading...</p>}
|
||||
{!isLoadingEventType && !eventType && <p>No event type found</p>}
|
||||
{!isLoadingEventType &&
|
||||
!!eventType &&
|
||||
return (
|
||||
<div>Title: {eventType.slug}</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 7. `useConnectedCalendars`
|
||||
|
||||
The useConnectedCalendars returns an object containing all connected calendars of a user, and the destination calendar. It is useful in managing multiple calendar integrations. Each connected calendar entry contains essential properties such as the credentialId, externalId and integration which should be an object, which can be used in the hooks to add and remove selected calendars.
|
||||
|
||||
Below code snippet shows how to use the useConnectedCalendars hook to fetch calendars for a user.
|
||||
|
||||
```js
|
||||
import { useConnectedCalendars } from "@calcom/atoms";
|
||||
|
||||
export default function ConnectedCalendars() {
|
||||
const { isLoading: isLoadingConnectedCalendars, data: userCalendars } = useConnectedCalendars({});
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingConnectedCalendars && <p>Loading...</p>}
|
||||
{!isLoadingConnectedCalendars && !userCalendars && <p>No connected calendars</p>}
|
||||
{!isLoadingConnectedCalendars &&
|
||||
userCalendars &&
|
||||
(Boolean(userCalendars?connectedCalendars?.length)) &&
|
||||
userCalendars?connectedCalendars?.map((calendar) => {
|
||||
return (
|
||||
<div key={calendar.credentialId}><h1>Calendar type: {calendar.integration.name}</h1></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 8. `useDeleteCalendarCredentials`
|
||||
|
||||
The useDeleteCalendarCredentials hook allows you to delete a users calendar credentials. This hook returns a mutation function which handles the deletion process. The mutation function accepts an object with the following properties: ***id*** which is the credential id, and ***calendar*** is the name of the calendar which can be either google, office365 or apple.
|
||||
|
||||
Below code snippet shows how to use the useDeleteCalendarCredentials hook to manage deletion of calendar credentials.
|
||||
|
||||
```js
|
||||
import { useDeleteCalendarCredentials } from "@calcom/atoms";
|
||||
|
||||
export default function DeleteUserCalendar() {
|
||||
const { mutate: deleteCalendarCredentials } = useDeleteCalendarCredentials({
|
||||
onSuccess: () => {
|
||||
console.log("Calendar credentials deleted successfully!");
|
||||
},
|
||||
onError: () => {
|
||||
console.log("Error deleting calendar credentials");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={async () => {
|
||||
await deleteCalendarCredentials({
|
||||
calendar: "google",
|
||||
id: 123,
|
||||
})
|
||||
}}>
|
||||
Delete calendar
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 9. `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>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 10. `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>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -31,3 +31,6 @@ export { ConferencingAppsViewPlatformWrapper as ConferencingAppsSettings } from
|
||||
export { StripeConnect } from "./connect/stripe/StripeConnect";
|
||||
export { CreateEventTypePlatformWrapper as CreateEventType } from "./event-types/wrappers/CreateEventTypePlatformWrapper";
|
||||
export { PaymentForm } from "./event-types/payments/PaymentForm";
|
||||
|
||||
export { useCreateEventType } from "./hooks/event-types/private/useCreateEventType";
|
||||
export { useCreateTeamEventType } from "./hooks/event-types/private/useCreateTeamEventType";
|
||||
Reference in new issue
Block a user