import React , { useState } from "react" ; import "./Dialog.css" ; import "./LeaveDialog.css" ; import UIStore from "../../stores/UIStore" ; import IO from "../../controllers/IO" ; import ParticipantList from "../Util/ParticipantList" ; import ParticipantService from "../../services/ParticipantService" ; const LeaveDialog = ( ) => { const [ transferHostOpen , setTransferHostOpen ] = useState ( false ) ; const isThereAnotherHost = ParticipantService . getLiving ( true ) . filter ( ( participant ) => participant . isHost ) . length > 0 ; return ( < div className = { "dialog-modal" } > < h2 className = { "modal--title" } > Leave Room < /h2> { isThereAnotherHost ? ( < > < span className = { "dialog-centered-text" } > Please choose to leave or end the room for all participants < /span> < input onClick = { ( ) => IO . _leave ( ) } type = { "button" } value = { "Leave" } className = { "modal--button leave-button" } / > < />) : (<> < span className = { "dialog-centered-text" } > Please choose to transfer the host to another participant or end the room for all participants < /span> < input type = { "button" } onClick = { ( ) => setTransferHostOpen ( true ) } value = { "Transfer Host" } className = { "modal--button leave-button" } / > < />)} { transferHostOpen && ( < ParticipantList onTransfer = { ( ) => { IO . _leave ( ) ; UIStore . store . modalStore . leaveMenu = false ; } } />)} < input type = { "button" } onClick = { ( ) => { IO . endRoomForAll ( ) . catch ( console . error ) ; UIStore . store . modalStore . leaveMenu = false ; } } value = { "End Room for All" } className = { "modal--button leave-button" } / > < input type = { "button" } onClick = { ( ) => ( UIStore . store . modalStore . leaveMenu = false ) } value = { "Cancel" } className = { "modal--button leave-button-cancel" } / > < /div>); } ; export default LeaveDialog ;