Move restore/register/login into ConferenceCallManager

src/ConferenceCallManagerHooks.js

@@ -0,0 +1,189 @@
+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 };
+}