Skip to content

Instantly share code, notes, and snippets.

@HammerSpb
Created July 21, 2018 02:56
Show Gist options
  • Save HammerSpb/d1d85de2d9107e8ff5377051cd63a7d6 to your computer and use it in GitHub Desktop.
Save HammerSpb/d1d85de2d9107e8ff5377051cd63a7d6 to your computer and use it in GitHub Desktop.
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment