index.tsx

import { createElement, FunctionComponent } from 'react'
import * as styles from './styles'
import { useOvermind } from '../../overmind'
import { isValidJson } from '../../overmind/utils'
import { colors } from '../../theme'

const ActionPayload: FunctionComponent = () => {
  const { state, actions } = useOvermind()
  const payload = state.currentApp.actionQueryPayload

  return (
    <div className={styles.wrapper}>
      <input
        style={{
          borderColor:
            !payload || isValidJson(payload) ? 'transparent' : colors.red,
        }}
        disabled={!state.currentApp.selectedActionQuery}
        placeholder={
          state.currentApp.selectedActionQuery
            ? 'Add some JSON payload...'
            : null
        }
        className={styles.input}
        value={payload}
        onChange={(event) =>
          actions.setActionQueryPayload(event.currentTarget.value)
        }
      />
    </div>
  )
}

export default ActionPayload