index.tsx

import * as React from 'react'
import Inspector from '../Inspector'
import { Wrapper, Type } from './elements'
import { AppMessage } from '../../app/state'

type Props = {
  message: AppMessage
}

type State = {
  expandedPaths: string[]
}

class ConsoleRow extends React.Component<Props, State> {
  state = {
    expandedPaths: [],
  }
  onToggleExpand = (pathArray) => {
    const expandedPaths = this.state.expandedPaths.slice()
    const path = pathArray.join('.')

    if (expandedPaths.includes(path)) {
      expandedPaths.splice(expandedPaths.indexOf(path), 1)
    } else {
      expandedPaths.push(path)
    }

    this.setState({
      expandedPaths,
    })
  }
  render() {
    return (
      <Wrapper>
        <Type>{this.props.message.type}</Type>
        <Inspector
          value={this.props.message.data}
          expandedPaths={this.state.expandedPaths}
          onToggleExpand={this.onToggleExpand}
        />
      </Wrapper>
    )
  }
}

export default ConsoleRow