You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Booking Availability: Implementation and Data Flow
2
+
3
+
### Overview
4
+
5
+
This document summarizes the end-to-end implementation of the hourly availability feature for venues, covering both frontend and backend components, the data flow between them, potential flaws, and a sample output.
6
+
7
+
---
8
+
9
+
## Frontend Implementation
10
+
11
+
### 1. `useAvailableTimes` Hook
12
+
13
+
```ts
14
+
exportinterfaceAvailableTimesVariables {
15
+
venueID:number|string;
16
+
/** Full RFC3339 timestamp in Kathmandu timezone. */
17
+
date:string; // e.g. `2025-06-28T00:00:00+05:45`
18
+
}
19
+
20
+
exportconst useAvailableTimes =createQuery<
21
+
AvailableTimesResponse,
22
+
AvailableTimesVariables,
23
+
AxiosError<APIError>
24
+
>({
25
+
queryKey: ["venues", "available-times"],
26
+
fetcher: ({ venueID, date }) =>
27
+
client.get(`/venues/${venueID}/available-times`, { params: { date } }).then((res) =>res.data),
28
+
staleTime: 40_000,
29
+
refetchInterval: 30_000,
30
+
});
31
+
```
32
+
33
+
- Fetches availability slots by passing `date` as full ISO timestamp in Kathmandu time.
34
+
- Caching and refetch intervals configured for responsiveness.
0 commit comments