index.tsx

import { createElement, FunctionComponent, Fragment, useEffect } from 'react'
import { useOvermind } from '../../overmind'
import * as styles from './styles'
import * as text from '../../styles/text'
import { colors } from '../../theme'
import Workspace from '../Workspace'
import { css } from 'emotion'

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

  useEffect(() => {
    const listener = (event: KeyboardEvent) => {
      if (event.metaKey && event.keyCode === 82) {
        actions.refreshApp()
      }
    }
    document.addEventListener('keydown', listener)

    return () => {
      document.removeEventListener('keydown', listener)
    }
  }, [])

  if (state.error) {
    return (
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <div className={css(text.header, text.white)}>
            Ops, there is an error :(
          </div>
          <div className={text.red}>{state.error}</div>
        </div>
      </div>
    )
  }

  return state.isConnecting ? (
    <div className={styles.wrapper}>
      <h1>Waiting for an app to connect to {state.port}...</h1>
      <pre className={styles.code}>
        <span style={{ color: colors.purple }}>const</span> overmind ={' '}
        {state.port === 3031 ? (
          <Fragment>
            <span style={{ color: colors.green }}>createOvermind</span>(config)
          </Fragment>
        ) : (
          <Fragment>
            <span style={{ color: colors.green }}>createOvermind</span>(config,{' '}
            {'{'}
            {`\n`}
            {'  '}devtools:{' '}
            <span style={{ color: colors.yellow }}>
              "localhost:{state.port}"
            </span>
            {`\n`}
            {'}'})
          </Fragment>
        )}
      </pre>
    </div>
  ) : (
    <Workspace />
  )
}

export default Devtools