import * as React from "react" ; import * as ReactDOM from "react-dom" ; import Home from "./screens/home" ; import Pallete from "./screens/pallete" ; import "react-figma-plugin-ds/styles/figma-plugin-ds.min.css" ; import "./ui.css" ; declare function require ( path ) ; const io = require ( "socket.io-client" ) ; const ROOM_NAME = "CopyPasteColor" ; const DEFAULT_SERVER_URL = "https://color-copy-paste-socket.herokuapp.com/" ; const INIT = "INIT" ; const CONNECTED = "CONNECTED" ; const ERROR = "ERROR" ; let loaded = false ; function generateId ( ) { return ( [ 1e7 ] + - 1e3 + - 4e3 + - 8e3 + - 1e11 ) . replace ( /[018]/g , ( a ) => ( a ^ ( ( Math . random ( ) * 16 ) >> ( a / 4 ) ) ) . toString ( 16 ) ) ; } const App = ( ) => { const [ status , setStatus ] = React . useState ( INIT ) ; const [ userId , setUserId ] = React . useState ( "" ) ; const [ mySocket , setMySocket ] = React . useState ( null ) ; const [ currentPage , setCurrentPage ] = React . useState ( "home" ) ; const [ colors , setColors ] = React . useState ( [ ] ) ; const colorRefValue = React . useRef ( colors ) ; React . useEffect ( ( ) => { colorRefValue . current = colors ; } , [ colors ] ) ; console . log ( status ) ; window . onmessage = ( event ) => { let message = event . data . pluginMessage ; const { type , data } = message ; if ( type == "get-user-id" ) { setUserId ( data . userId ) ; } if ( type == "get-colors" ) { setColors ( data . colors ) ; } } ; React . useEffect ( ( ) => { parent . postMessage ( { pluginMessage : { type : "get-user-id" } } , "*" ) ; parent . postMessage ( { pluginMessage : { type : "get-colors" } } , "*" ) ; } , [ ] ) ; React . useEffect ( ( ) => { if ( userId && userId . length > 5 && ! loaded ) { loaded = true ; const socket = io ( DEFAULT_SERVER_URL , { reconnectionAttempts : 3 , forceNew : true , transports : [ "websocket" ] , } ) ; socket . on ( "connected" , ( ) => { setStatus ( CONNECTED ) ; setMySocket ( socket ) ; socket . emit ( "join room" , ROOM_NAME ) ; socket . emit ( "set user" , { name : "figma-" + userId , color : `` , url : DEFAULT_SERVER_URL , } ) ; socket . emit ( "chat message" , { roomName : ROOM_NAME , message : "hello" , } ) ; } ) ; socket . on ( "join leave message" , data => { } ) ; socket . on ( "connect_error" , ( ) => { setStatus ( ERROR ) ; } ) ; socket . on ( "reconnect_error" , ( ) => { setStatus ( ERROR ) ; } ) ; socket . on ( "online" , data => { } ) ; } } , [ userId ] ) ; React . useEffect ( ( ) => { if ( mySocket ) { mySocket . on ( "chat message" , ( data ) => { if ( data . user . name === userId ) { const newColor = { id : generateId ( ) , color : data . message } ; const newColors = [ ... colorRefValue . current , newColor ] ; setColors ( newColors ) ; parent . postMessage ( { pluginMessage : { type : "set-colors" , data : { colors : newColors } , } , } , "*" ) ; setCurrentPage ( "pallete" ) ; } } ) ; } } , [ mySocket , userId ] ) ; const renderPage = ( ) => { switch ( currentPage ) { case "pallete" : return ( < Pallete setCurrentPage = { setCurrentPage } colors = { colors } setColors = { setColors } / > ) ; default : case "home" : return ( < Home setCurrentPage = { setCurrentPage } userId = { userId } onTap = { ( ) => { } } />); } } ; return renderPage ( ) ; } ; const rootElement = document . getElementById ( "react-page" ) ; ReactDOM . render ( < App />, rootElement);