index.tsx

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

class Devtools extends React.Component<Connect> {
  componentDidMount() {
    this.props.app.actions.loadDevtools()
  }
  onPortSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    this.props.app.actions.addPort()
  }
  renderAddPort(hasOtherApps) {
    const { app } = this.props
    return (
      <Wrapper>
        <Container>
          <Text variant="header" color="white">
            {hasOtherApps ? 'Add new application' : 'Welcome to Devtools'}
          </Text>
          <Text variant="text" color="white">
            {hasOtherApps ? null : 'You have not added any applications yet. '}Please
            add a port number which will be connected to by one of your apps.
          </Text>
          <form onSubmit={this.onPortSubmit}>
            <Input
              autoFocus
              value={app.state.newPortValue}
              onChange={app.actions.changeNewPortValue}
              length={4}
              placeholder="port..."
              addon={
                <Button
                  type="submit"
                  disabled={!app.state.newPortValue}
                  primary
                >
                  Add
                </Button>
              }
            />
          </form>
          {hasOtherApps ? (
            <Cancel onClick={() => app.actions.cancelConfigurePort()}>
              <Icon>close</Icon>
            </Cancel>
          ) : null}
        </Container>
      </Wrapper>
    )
  }
  render() {
    const { app } = this.props

    if (app.state.isLoading) {
      return (
        <Wrapper>
          <h1>loading...</h1>
        </Wrapper>
      )
    }

    if (app.state.isAddingPort) {
      return this.renderAddPort(Boolean(Object.keys(app.state.apps).length))
    }

    return <Workspace />
  }
}

export default connect(Devtools)