frontend/app/components/Call.js

"use client";

import { useDaily } from "@daily-co/daily-react";
import { useCallback, useEffect, useState } from "react";
import CreateRoom from "../components/CreateRoom";
import Join from "../components/Joining";
import { apiUrl } from "../utils";
import App from "./App";

const STATE_IDLE = "idle";
const STATE_JOINING = "joining";
const STATE_JOINED = "joined";
const STATE_LEFT = "left";
const BOT_STATE_STARTING = "bot_starting";
const BOT_STATE_STARTED = "bot_started";

export default function Call() {
  const daily = useDaily();
  const [callState, setCallState] = useState(STATE_IDLE);
  const [roomUrl, setRoomUrl] = useState();
  const [botState, setBotState] = useState(BOT_STATE_STARTING);

  function leave() {
    setCallState(STATE_LEFT), daily.leave();
  }

  const start = useCallback(async () => {
    const resp = await fetch(`${apiUrl}/start`, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ room_url: roomUrl }),
    });

    const data = await resp.json();

    //@TODO error handle here

    setBotState(BOT_STATE_STARTED);

    return data;
  }, [roomUrl]);

  useEffect(() => {
    if (callState !== STATE_JOINED || botState === BOT_STATE_STARTED) return;
    start();
  }, [callState, botState, start]);

  if (callState === STATE_IDLE) {
    return (
      <CreateRoom
        onCreateRoom={(roomUrl) => {
          setRoomUrl(roomUrl);
          setCallState(STATE_JOINING);
        }}
      />
    );
  }

  if (callState === STATE_JOINING) {
    return <Join roomUrl={roomUrl} onJoin={() => setCallState(STATE_JOINED)} />;
  }

  if (callState === STATE_LEFT) {
    return <div>Left</div>;
  }
  // Main call loop
  return <App onLeave={() => leave()} />;
}