nemo0

import React from 'react';

const Login = ({ setUserId }) => {
  const connect = (e) => {
    e.preventDefault();
    setUserId(e.target.userId.value);
  };

  return (
    <form onSubmit={connect}>

nemo0

import React, { useState } from 'react';

const Dialer = ({ makeCall }) => {
  const [userIdError, setUserIdError] = useState(null);
  const [userId, setUserId] = useState('');

  const initiateCall = (isVideoCall) => {
    setUserIdError(null);
    if (!userId) {
      return setUserIdError('Please input a User ID');

nemo0

import SendBirdCall from "sendbird-calls";
import React, { useState, useEffect } from "react";
import LoginForm from "./LoginForm";
import DialForm from "./DialForm";
import IncomingCallModal from "./IncomingCallModal";

const Call = () => {
  const [userId, setUserId] = useState("");
  const [call, setCall] = useState(null);
  const [authenticated, setAuthenticated] = useState(false);

nemo0

import SendBirdCall from 'sendbird-calls';
import React, { useState, useEffect } from 'react';
import Login from './Login';
import Dialer from './Dialer';

nemo0

const Call = () => {
  const [userId, setUserId] = useState('');
  const [call, setCall] = useState(null);
  const [authenticated, setAuthenticated] = useState(false);
  const [ringing, setRinging] = useState(false);
  const [connected, setConnected] = useState(false);
  const [connecting, setConnecting] = useState(false);
  const [loading, setLoading] = useState(false);
  const [muted, setMuted] = useState(false);
  const [mutedVideo, setMutedAudio] = useState(false);

nemo0

const authenticate = async () => {
    try {
      const result = await new Promise((resolve, reject) => {
        SendBirdCall.authenticate({ userId }, (res, error) => {
          if (error) {
            reject(error);
          } else {
            resolve(res);
          }
        });

nemo0

const addEventHandler = () => {
    SendBirdCall.addListener(`CALLS_HANDLER_${userId}`, {
      onRinging: (call) => {
        console.log('Receiving call');
        call = setDefaultCallHandlers(call);
        setRinging(true);
        setCall(call);
      },
    });
  };

nemo0

const initiateSendbirdCalls = async () => {
    const APP_ID = process.env.NEXT_PUBLIC_APP_ID;
    SendBirdCall.init(APP_ID);

    try {
      setLoading(true);
      await authenticate();
      await SendBirdCall.connectWebSocket();
      addEventHandler();
      setAuthenticated(true);

nemo0

const setDefaultCallHandlers = (call) => {
    call.onEstablished = () => {
      setRinging(false);
      setConnecting(false);
      console.log('Call established');
    };
    call.onConnected = () => {
      setRinging(false);
      setConnected(true);
      setConnecting(false);

nemo0

useEffect(() => {
    if (userId) {
      initiateSendbirdCalls();
      setDefaultCallParams({
        callOption: {
          localMediaView: document.getElementById('local_video_element_id'),
          remoteMediaView: document.getElementById('remote_video_element_id'),
          audioEnabled: true,
          videoEnabled: true,
        },