@fctv/js/examples/react-app/src/App.js

Call SDK for JavaScript

import React, { useCallback, useEffect } from 'react';
import { Button, Container } from 'react-bootstrap';
import Login from './Login';
import Dialpad from './Dialpad';
import InCall from './InCall';
import FCTVService from './fctv/FCTVService';
import { useSelector } from 'react-redux';

const fctvService = FCTVService.getInstance();

function App() {
  const fctvServiceUser = useSelector(state => state.user || {});
  const fctvServiceCall = useSelector(state => state.call || {});

  const login = useCallback((user) => {
    fctvService.login(user);
    console.log(user);
  }, []);

  const logout = useCallback(() => {
    fctvService.logout();
  }, []);

  const handleLogin = (user) => {
    logout();
    login(user);
  };

  const handleMakeCall = (destinationNumber) => {
    fctvService.makeCall(destinationNumber);
  };

  const handleLogout = () => {
    logout();
  };

  useEffect(() => {
    if (fctvService.isLoggedIn) {
      console.log('Logged in. No need to re-login');
      return;
    }

    fctvService.user && login(fctvService.user);
  }, [login]);

  return (
    <Container>
      <div className={'py-3 row'}>
        <div className={'col-7'}>
          <div>Connection Status: <span className={'text-primary'}>{fctvServiceUser.connectionStatus}</span></div>
          <div>User Status: <span className={'text-primary'}>{fctvServiceUser.userStatus}</span></div>
        </div>
        {
          fctvServiceUser.user ? (<div className={'col-5 d-flex justify-content-end align-items-center'}>
            <Button type="button" variant="danger" onClick={handleLogout}>Logout</Button>
          </div>) : null
        }
      </div>

      { !fctvServiceUser.user ? <Login handleLogin={handleLogin} user={fctvService.user}/> : null }
      { (fctvServiceUser.user && !fctvServiceCall.call) ? <Dialpad handleMakeCall={handleMakeCall}/> : null }
      { fctvServiceCall.call ? <InCall call={fctvServiceCall.call} /> : null }
    </Container>
  );
}

export default App;