index.tsx

import * as React from 'react'
import ActionsList from '../ActionsList'
import Action from '../Action'
import { Wrapper, CenterWrapper, ExpandAll } from './elements'
import { Connect, connect } from '../../app'
import Text from '../common/Text'

const Actions: React.SFC<Connect> = ({ app }) => {
  if (!app.state.currentAction) {
    return (
      <CenterWrapper>
        <Text variant="header">no actions triggered...</Text>
      </CenterWrapper>
    )
  }

  return (
    <Wrapper>
      <ExpandAll
        isActive={app.state.expandAllActionDetails}
        onClick={() => app.actions.toggleExpandAllActions()}
      >
        expand all
      </ExpandAll>
      <ActionsList />
      <Action />
    </Wrapper>
  )
}

export default connect(Actions)