Cédric FAMIBELLE-PRONZOLA
58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import {format} from 'date-fns'
|
|
import {fr} from 'date-fns/locale'
|
|
import {makeStyles} from '@material-ui/core/styles'
|
|
|
|
import {
|
|
Typography,
|
|
Divider,
|
|
List,
|
|
ListItemText
|
|
} from '@material-ui/core'
|
|
|
|
import {formatJsonString} from '../../lib/utils/format'
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
root: {
|
|
width: '100%',
|
|
maxWidth: '36ch',
|
|
backgroundColor: theme.palette.background.paper
|
|
},
|
|
inline: {
|
|
display: 'inline'
|
|
}
|
|
}))
|
|
|
|
export default function KomanteList({komante}) {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<List className={classes.root}>
|
|
{komante.map(({_id, username, kontni, sentAt}) => (
|
|
<div key={_id}>
|
|
<ListItemText
|
|
primary={
|
|
<Typography gutterBottom style={{fontWeight: 'bold'}} variant='body1'>
|
|
{username}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<ListItemText
|
|
primary={formatJsonString(kontni)}
|
|
secondary={
|
|
<Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
|
|
{format(new Date(sentAt), 'Pp', {locale: fr})}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<Divider style={{marginBottom: '1em'}} />
|
|
</div>
|
|
))}
|
|
</List>
|
|
)
|
|
}
|
|
|
|
KomanteList.propTypes = {
|
|
komante: PropTypes.array.isRequired
|
|
}
|