Bootstrap Recompose Component p01

import React from 'react'
import { Container } from 'reactstrap'
import styled from 'styled-components'
import theme from '../theme'
import { compose } from 'ramda'
import { withState, withHandlers, lifecycle } from 'recompose'

const { colors, fonts } = theme

const Header = styled.div`
  display: flex;
  padding: 10px;
  margin: 5px;
  background-color: ${colors.secondary};
`

const Title = styled.div`
  background-color: red;
  padding: 10px;
  margin: 5px;
`

const Button = styled.div`
  background-color: green;
  padding: 10px;
  margin: 5px 5px 5px auto;
`

const Table = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 5px;
  background-color: ${colors.secondary};
`

const TableHeader = styled.div`
  display: flex;
  padding: 10px;
  margin: 5px;
  background-color: yellow;
`

const TableRow = styled.div`
  background-color: gray;
  padding: 10px;
  margin: 5px;
`

const TablePagination = styled.div`
  display: flex;
  justify-content: center;
  background-color: cyan;
  padding: 10px;
  margin: 5px;
`

const ManageJobs = styled(Container)`
  background-color: orange;
  padding: 10px;
  margin: 0px auto;
`

ManageJobs.Header = Header
ManageJobs.Title = Title
ManageJobs.Button = Button
ManageJobs.Table = Table
Table.Header = TableHeader
Table.Row = TableRow
Table.Pagination = TablePagination

const ManageJobsView = () => (
  <ManageJobs>
    <ManageJobs.Header>
      <ManageJobs.Title>Hello</ManageJobs.Title>
      <ManageJobs.Button>Post a job</ManageJobs.Button>
    </ManageJobs.Header>
    <ManageJobs.Table>
      <Table.Header>Table Header</Table.Header>
      <Table.Row>Row 1</Table.Row>
      <Table.Row>Row 2</Table.Row>
      <Table.Pagination>1 - 2 - 3</Table.Pagination>
    </ManageJobs.Table>
  </ManageJobs>
)

export const initState = {
  jobs: [],
  currentPage: null,
  jobsPerPage: 10
}

const withController = compose(
  withState('state', 'setState', initState),
  withHandlers({
    setState: props => value => props.setState({ ...props.state, ...value })
  }),
  lifecycle({
    componentWillReceiveProps (nextProps) {},
    componentDidMount () {}
  })
)

export default compose(withController)(ManageJobsView)