index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import AppsBar from '../AppsBar'
import { Tab } from '../../app/types'
import { Wrapper, Content, PageContainer } from './elements'
import Tabs from '../Tabs'
import Actions from '../Actions'
import Console from '../Console'
import State from '../State'
import Components from '../Components'
import Flushes from '../Flushes'

const pages: { [key in Tab]: React.ComponentType } = {
  [Tab.Actions]: Actions,
  [Tab.Console]: Console,
  [Tab.State]: State,
  [Tab.Components]: Components,
  [Tab.Flushes]: Flushes,
  [Tab.Remove]: () => null,
}

const Workspace: React.SFC<Connect> = ({ app }) => {
  const Page = pages[app.state.currentTab]

  return (
    <Wrapper>
      <AppsBar />
      <Content>
        <PageContainer>
          <Page />
        </PageContainer>
        <Tabs />
      </Content>
    </Wrapper>
  )
}

export default connect(Workspace)