NPM package

import React, {useState} from "react";
import * as SFU from '@flashphoner/sfusdk/src/sdk/sfu.js'
import * as Constants from '@flashphoner/sfusdk/src/sdk/constants.js'

export default function TestApp() {
    const [url, setUrl] = useState("ws://localhost:8080");
    const [established, setEstablished] = useState("Not connected");
    const [buttonText, setButtonText] = useState("Connect");
    const [session, setSession] = useState(null);

    function onClick() {
        if (session == null) {
            console.log("Trying to connect");
            const pc = new RTCPeerConnection();
            const s = SFU.createRoom({
                url: url,
                roomName: "ROOM",
                pin: "1234",
                nickname: "Test",
                pc: pc
            }).on(Constants.SFU_EVENT.CONNECTED, (room) => {
                console.log("Connected!");
                setEstablished("Connected!");
                setButtonText("Disconnect");
                setSession(s);
                room.join();
            }).on(Constants.SFU_EVENT.DISCONNECTED, () => {
                console.log("Disconnected!");
                setEstablished("Not connected!");
                setButtonText("Connect");
                setSession(null);
            });
        } else {
            let room = session.room();
            if(room) {
                room.destroyRoom()
            }
            session.disconnect();            
        }
    }

    return(
        <div>
            <div>
                <input type="text" value={url} placeholder="Enter server websocket URL" onChange={(e) => setUrl(e.target.value)}/>
                <button onClick={() => onClick()}>{buttonText}</button>
            </div>
            <div>{established}</div>
        </div>
        
    )
}