Cacher is the code snippet organizer for pro developers

import List from '@material-ui/core/List'
import PropTypes from 'prop-types'
import React, { Fragment } from 'react'
import { MaterialUiStyles } from 'imagined-material-ui-styles-component'
import { ReduxConnection } from '@ghadyani-framework/redux-components'

import CheckboxListItems from '~/components/lists/CheckboxListItems'
import SectionHeading from '~/components/siteLayout/SectionHeading'
import { listItemsSelector } from '~/redux/lists/selectors'
import { sectionHeadingSelector } from '~/redux/sections/selectors'

const propTypes = {
  namespace: PropTypes.string.isRequired,
  personLocation: PropTypes.string.isRequired,
}

const styles = ({ palette }) => ({
  checkmarkIcon: {
    color: palette.primary.main,
  },
  list: {
    backgroundColor: 'white',
    border: `solid 1px ${palette.primary.main}`,
    color: palette.primary.main,
    fontSize: '1em',
    fontWeight: '500',
    height: '1.5em',
    width: '1.5em',
  },
})

const PersonsList = ({
  namespace,
  personLocation,
}) => (
  <Fragment>
    <ReduxConnection
      component={SectionHeading}
      namespace={namespace}
      selector={sectionHeadingSelector}
    />

    <MaterialUiStyles styles={styles}>
      {({ classes }) => (
        <List className={classes.list}>
          <ReduxConnection
            component={CheckboxListItems}
            namespace={namespace}
            personLocation={personLocation}
            selector={listItemsSelector}
          />
        </List>
      )}
    </MaterialUiStyles>
  </Fragment>
)

PersonsList
.propTypes = propTypes

export default PersonsList