1
2// Example: React (client) — Calls your own API route at /api/v1/time-slots/demo
3
4import { useState } from "react";
5
6async function createTimeSlots(body: CreateTimeSlotPayload[]): Promise<ApiSlot[]> {
7  const res = await fetch("/api/v1/time-slots/demo", {
8    method: "POST",
9    headers: { "Content-Type": "application/json" },
10    body: JSON.stringify(body),
11  });
12
13  if (!res.ok) {
14    const text = await res.text().catch(() => "");
15    throw new Error(`API error (${res.status}): ${text || res.statusText}`);
16  }
17
18  const json = (await res.json()) as { message: ApiSlot[] };
19  return json.message;
20}
21
22export function MyScheduler() {
23  const [created, setCreated] = useState<ApiSlot[]>([]);
24  const handleCreateSlots = async () => {
25    const now = Math.floor(Date.now() / 1000);
26    const payload: CreateTimeSlotPayload[] = [
27      {
28        startTime: now + 3600,
29        endTime: now + 7200,
30        timezone: "America/New_York",
31        durationMin: 30,
32        publicView: true,
33        booked: false,
34        success: true,
35      },
36    ];
37    try {
38      const result = await createTimeSlots(payload);
39      setCreated(result);
40      console.log("Slots created:", result);
41    } catch (e) {
42      console.error(e);
43    }
44  };
45
46  return <button onClick={handleCreateSlots}>Create Demo Slots</button>;
47}
48
49/* ----------------- Types (kept below for clarity) ----------------- */
50
51export type CreateTimeSlotPayload = {
52  startTime: number; // Unix seconds
53  endTime: number;   // Unix seconds
54  timezone: string;  // IANA TZ
55  durationMin: number;
56  publicView: boolean;
57  booked: boolean;
58  success: boolean;
59};
60
61export type ApiSlot = {
62  publicUID: string;
63  startTime: number;
64  endTime: number;
65  // ...additional fields
66};
67