element-call/src/ConferenceCallManagerHooks.js

import { useCallback, useEffect, useState } from "react";
import { ConferenceCallManager } from "./ConferenceCallManager";

export function useConferenceCallManager(homeserverUrl) {
  const [{ loading, authenticated, manager, error }, setState] = useState({
    loading: true,
    authenticated: false,
    manager: undefined,
    error: undefined,
  });

  useEffect(() => {
    ConferenceCallManager.restore(homeserverUrl)
      .then((manager) => {
        console.log(manager);
        setState({
          manager,
          loading: false,
          authenticated: !!manager,
          error: undefined,
        });
      })
      .catch((err) => {
        console.error(err);

        setState({
          manager: undefined,
          loading: false,
          authenticated: false,
          error: err,
        });
      });
  }, []);

  const login = useCallback(async (username, password) => {
    setState((prevState) => ({
      ...prevState,
      authenticated: false,
      error: undefined,
    }));

    ConferenceCallManager.login(homeserverUrl, username, password)
      .then((manager) => {
        setState({
          manager,
          loading: false,
          authenticated: true,
          error: undefined,
        });
      })
      .catch((err) => {
        console.error(err);

        setState({
          manager: undefined,
          loading: false,
          authenticated: false,
          error: err,
        });
      });
  }, []);

  const register = useCallback(async (username, password) => {
    setState((prevState) => ({
      ...prevState,
      authenticated: false,
      error: undefined,
    }));

    ConferenceCallManager.register(homeserverUrl, username, password)
      .then((manager) => {
        setState({
          manager,
          loading: false,
          authenticated: true,
          error: undefined,
        });
      })
      .catch((err) => {
        console.error(err);

        setState({
          manager: undefined,
          loading: false,
          authenticated: false,
          error: err,
        });
      });
  }, []);

  return { loading, authenticated, manager, error, login, register };
}

export function useVideoRoom(manager, roomId, timeout = 5000) {
  const [{ loading, joined, room, participants, error }, setState] = useState({
    loading: true,
    joined: false,
    room: undefined,
    participants: [],
    error: undefined,
  });

  useEffect(() => {
    setState((prevState) => ({
      ...prevState,
      loading: true,
      room: undefined,
      error: undefined,
    }));

    manager.client.joinRoom(roomId).catch((err) => {
      setState((prevState) => ({ ...prevState, loading: false, error: err }));
    });

    let initialRoom = manager.client.getRoom(roomId);

    if (initialRoom) {
      setState((prevState) => ({
        ...prevState,
        loading: false,
        room: initialRoom,
        error: undefined,
      }));
      return;
    }

    let timeoutId;

    function roomCallback(room) {
      if (room && room.roomId === roomId) {
        clearTimeout(timeoutId);
        manager.client.removeListener("Room", roomCallback);
        setState((prevState) => ({
          ...prevState,
          loading: false,
          room,
          error: undefined,
        }));
      }
    }

    manager.client.on("Room", roomCallback);

    timeoutId = setTimeout(() => {
      setState((prevState) => ({
        ...prevState,
        loading: false,
        room: undefined,
        error: new Error("Room could not be found."),
      }));
      manager.client.removeListener("Room", roomCallback);
    }, timeout);

    return () => {
      manager.client.removeListener("Room", roomCallback);
      clearTimeout(timeoutId);
    };
  }, [roomId]);

  const joinCall = useCallback(() => {
    const onParticipantsChanged = () => {
      setState((prevState) => ({
        ...prevState,
        participants: manager.participants,
      }));
    };

    manager.on("participants_changed", onParticipantsChanged);

    manager.join(roomId);

    setState((prevState) => ({
      ...prevState,
      joined: true,
    }));

    return () => {
      manager.removeListener("participants_changed", onParticipantsChanged);

      setState((prevState) => ({
        ...prevState,
        joined: false,
        participants: [],
      }));
    };
  }, [manager, roomId]);

  return { loading, joined, room, participants, error, joinCall };
}

export function useRooms(manager) {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    function updateRooms() {
      setRooms(manager.client.getRooms());
    }

    updateRooms();

    manager.client.on("Room", updateRooms);

    return () => {
      manager.client.removeListener("Room", updateRooms);
    };
  }, []);

  return rooms;
}