index.tsx

import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import * as styles from './styles'
import * as text from '../../styles/text'
import Input from '../common/Input'
import Button from '../common/Button'
import Workspace from '../Workspace'
import { css } from 'emotion'

const Devtools: SFC = () => {
  const { state, actions } = useOvermind()

  function onPortSubmit(event: React.ChangeEvent<HTMLFormElement>) {
    event.preventDefault()
    actions.addConnection()
  }

  function renderSetPort() {
    return (
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <span className={css(text.header, text.white)}>
            Welcome to Devtools
          </span>
          <span className={css(text.normal, text.white)}>
            The default port {state.port} is already taken. Please use an
            available port and configure your app to use this custom port.
          </span>
          <form onSubmit={onPortSubmit}>
            <Input
              autoFocus
              value={state.newPortValue}
              onChange={actions.changeNewPortValue}
              length={6}
              placeholder="port..."
              addon={
                <Button type="submit" disabled={!state.newPortValue}>
                  Connect
                </Button>
              }
            />
          </form>
        </div>
      </div>
    )
  }

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

  if (state.isConnecting) {
    return (
      <div className={styles.wrapper}>
        <h1>Waiting for an app to connect...</h1>
      </div>
    )
  }

  return <Workspace />
}

export default Devtools