import React , { useState , useEffect } from 'react' ; import GitHubIcon from '@material-ui/icons/GitHub' ; import Recorder from './Recorder' ; const App = ( ) => { const [ status , setStatus ] = useState ( true ) ; const [ connected , setConnected ] = useState ( false ) ; useEffect ( ( ) => { const backgroundConnection = chrome . runtime . connect ( ) ; backgroundConnection . postMessage ( { action : 'connectChromogen' , tabId : chrome . devtools . inspectedWindow . tabId , } ) ; backgroundConnection . onMessage . addListener ( ( message ) => { if ( message . action === 'moduleConnected' ) { setConnected ( true ) ; } if ( message . action === 'setStatus' ) { setStatus ( ! status ) ; } } ) ; } , [ connected , status ] ) ; return connected ? ( < div className = "App" > < div className = "row" > chromogen < /div> < Recorder status = { status } / > < /div>) : ( < div id = "installContainer" > < div /> < div id = "installMessage" > < div > Please < /div> < code > npm install chromogen < /code> < div > in your app before using this extension . < /div> < div > < GitHubIcon /> <span>github.com/oslabs - beta / Chromogen < /span> < /div> < /div> < div / > < /div>); } ; export default App ;