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()
  }
  /*
  storeCurrentApps(apps) {
    jsonStorage.set(
      'apps',
      Object.keys(apps).reduce((appsToStore, port) => {
        appsToStore[port] = {
          name: apps[port].name,
          type: apps[port].type,
          ssl: apps[port].ssl,
        }

        return appsToStore
      }, {})
    )
  }
  addNewPort() {
    this.setState({
      showAddApp: true,
    })
  }
  cancelAddNewPort() {
    this.setState({
      showAddApp: false,
    })
  }
  changePort(port) {
    this.setState({
      currentPort: port,
    })
  }
  removePort(portToRemove) {
    const newApps = Object.keys(this.state.apps)
      .filter((port) => port !== portToRemove)
      .reduce((apps, remainingPort) => {
        apps[remainingPort] = this.state.apps[remainingPort]

        return apps
      }, {})

    this.setState({
      apps: newApps,
      currentPort:
        portToRemove === this.state.currentPort
          ? Object.keys(newApps)[0]
          : this.state.currentPort,
    })

    connector.removePort(portToRemove)
    this.storeCurrentApps(newApps)
  }
    */
  onPortSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    this.props.app.actions.addPort()
  }
  renderAddPort() {
    const { app } = this.props
    return (
      <Wrapper>
        <Container>
          <Text variant="header" color="white">
            Welcome to Devtools
          </Text>
          <Text variant="text" color="white">
            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
              value={app.state.newPortValue}
              onChange={app.actions.changeNewPortValue}
              length={4}
              placeholder="port..."
              addon={
                <Button
                  type="submit"
                  disabled={!app.state.newPortValue}
                  primary
                >
                  Add
                </Button>
              }
            />
          </form>
        </Container>
      </Wrapper>
    )
  }
  render() {
    const { app } = this.props

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

    if (Object.keys(app.state.apps).length) {
      return <Workspace />
    }

    return this.renderAddPort()
  }
}

export default connect(Devtools)