/* eslint react/react-in-jsx-scope: 0*/ const React = window.React; const ReactDOM = window.ReactDOM; const {SyncPolicy, SetAllSyncPolicies} = window; class Account extends React.Component { renderError() { const {account} = this.props; if (account.sync_error != null) { const {message, stack} = account.sync_error const error = { message, stack: stack.slice(0, 4), } return (
            {JSON.stringify(error, null, 2)}
          
) } return } render() { const {account, assignment, active} = this.props; const errorClass = account.sync_error ? ' errored' : '' const lastSyncCompletions = [] for (const time of account.last_sync_completions) { lastSyncCompletions.push(
{new Date(time).toString()}
) } return (

{account.email_address} {active ? '🌕' : '🌑'}

{assignment}
Sync Cycles
First Sync Completion:
{new Date(account.first_sync_completed_at).toString()}
Last Sync Completions:
{lastSyncCompletions}
Error
{this.renderError()}
); } } Account.propTypes = { account: React.PropTypes.object, active: React.PropTypes.bool, assignment: React.PropTypes.string, } class Root extends React.Component { constructor() { super(); this.state = { accounts: {}, assignments: {}, activeAccountIds: [], }; } componentDidMount() { let url = null; if (window.location.protocol === "https:") { url = `wss://${window.location.host}/accounts`; } else { url = `ws://${window.location.host}/accounts`; } this.websocket = new WebSocket(url); this.websocket.onopen = () => { this.websocket.send("Message to send"); }; this.websocket.onmessage = (evt) => { try { const msg = JSON.parse(evt.data); if (msg.cmd === 'ACCOUNT') { this.onReceivedAccount(msg.payload); } if (msg.cmd === 'ASSIGNMENTS') { this.onReceivedAssignments(msg.payload); } if (msg.cmd === 'ACTIVE') { this.onReceivedActiveAccountIds(msg.payload); } } catch (err) { console.error(err); } }; this.websocket.onclose = () => { window.location.reload(); }; } onReceivedAssignments(assignments) { this.setState({assignments}) } onReceivedActiveAccountIds(accountIds) { this.setState({activeAccountIds: accountIds}) } onReceivedAccount(account) { const accounts = Object.assign({}, this.state.accounts); accounts[account.id] = account; this.setState({accounts}); } render() { const ids = Object.keys(this.state.accounts); return (
parseInt(id, 10))} /> { ids.sort((a, b) => a.localeCompare(b)).map((id) => ) }
) } } ReactDOM.render( , document.getElementById('root') );