83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import { makeStyles, Paper } from '@material-ui/core'
|
|
import { format } from 'date-fns/fp'
|
|
import * as R from 'ramda'
|
|
import { React, useState } from 'react'
|
|
|
|
import { InformativeDialog } from 'src/components/InformativeDialog'
|
|
import { Label2, H3 } from 'src/components/typography'
|
|
import { ReactComponent as CameraIcon } from 'src/styling/icons/ID/photo/comet.svg'
|
|
import { URI } from 'src/utils/apollo'
|
|
|
|
import styles from './CustomerPhotos.styles'
|
|
import PhotosCarousel from './components/PhotosCarousel'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const CustomerPhotos = ({ photosData, timezone }) => {
|
|
const classes = useStyles()
|
|
|
|
const [photosDialog, setPhotosDialog] = useState(false)
|
|
const [photoClickedIndex, setPhotoClickIndex] = useState(null)
|
|
const orderedPhotosData = !R.isNil(photoClickedIndex)
|
|
? R.compose(R.flatten, R.reverse, R.splitAt(photoClickedIndex))(photosData)
|
|
: photosData
|
|
|
|
return (
|
|
<div>
|
|
<div className={classes.header}>
|
|
<H3 className={classes.title}>{'Photos & files'}</H3>
|
|
</div>
|
|
<div className={classes.photosChipList}>
|
|
{photosData.map((elem, idx) => (
|
|
<PhotoCard
|
|
idx={idx}
|
|
date={elem.date}
|
|
src={`${URI}/${elem.photoDir}/${elem.path}`}
|
|
setPhotosDialog={setPhotosDialog}
|
|
setPhotoClickIndex={setPhotoClickIndex}
|
|
/>
|
|
))}
|
|
</div>
|
|
<InformativeDialog
|
|
open={photosDialog}
|
|
title={`Photo roll`}
|
|
data={
|
|
<PhotosCarousel photosData={orderedPhotosData} timezone={timezone} />
|
|
}
|
|
onDissmised={() => {
|
|
setPhotosDialog(false)
|
|
setPhotoClickIndex(null)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const PhotoCard = ({
|
|
idx,
|
|
date,
|
|
src,
|
|
setPhotosDialog,
|
|
setPhotoClickIndex
|
|
}) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Paper
|
|
className={classes.photoCardChip}
|
|
onClick={() => {
|
|
setPhotoClickIndex(idx)
|
|
setPhotosDialog(true)
|
|
}}>
|
|
<img className={classes.image} src={src} alt="" />
|
|
<div className={classes.footer}>
|
|
<CameraIcon />
|
|
<Label2 className={classes.date}>
|
|
{format('yyyy-MM-dd', new Date(date))}
|
|
</Label2>
|
|
</div>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
export default CustomerPhotos
|