index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { Wrapper, Container } from './elements'
import Input from '../common/Input'
import Button from '../common/Button'
import Text from '../common/Text'
import Workspace from '../Workspace'

class Devtools extends React.Component<Connect> {
  componentDidMount() {
    this.props.app.actions.loadDevtools()
  }
  onPortSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    this.props.app.actions.addConnection()
  }
  renderSetPort() {
    const { app } = this.props

    return (
      <Wrapper>
        <Container>
          <Text variant="header" color="white">
            Welcome to Devtools
          </Text>
          <Text variant="text" color="white">
            The default port {app.state.port} is already taken. Please use an
            available port and configure your app to use this custom port.
          </Text>
          <form onSubmit={this.onPortSubmit}>
            <Input
              autoFocus
              value={app.state.newPortValue}
              onChange={app.actions.changeNewPortValue}
              length={6}
              placeholder="port..."
              addon={
                <Button
                  type="submit"
                  disabled={!app.state.newPortValue}
                  primary
                >
                  Connect
                </Button>
              }
            />
          </form>
        </Container>
      </Wrapper>
    )
  }
  render() {
    const { app } = this.props

    if (app.state.error === 'PORT_EXISTS') {
      return this.renderSetPort()
    }

    if (app.state.isConnecting) {
      return (
        <Wrapper>
          <h1>Waiting for an app to connect...</h1>
        </Wrapper>
      )
    }

    return <Workspace />
  }
}

export default connect(Devtools)