fix: image upper border radius andcarousel photos order

new-lamassu-admin/src/pages/Customers/CustomerPhotos.js

@@ -13,10 +13,14 @@ import PhotosCarousel from './components/PhotosCarousel'
 
 const useStyles = makeStyles(styles)
 
-const CustomerPhotos = ({ photosData, set }) => {
+const CustomerPhotos = ({ photosData }) => {
   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>
@@ -24,36 +28,45 @@ const CustomerPhotos = ({ photosData, set }) => {
         <H3 className={classes.title}>{'Photos & files'}</H3>
       </div>
       <div className={classes.photosChipList}>
-        {R.map(
+        {photosData.map((elem, idx) => (
-          it => (
+          <PhotoCard
-            <PhotoCard
+            idx={idx}
-              date={it.date}
+            date={elem.date}
-              src={`${URI}/${it.photoDir}/${it.path}`}
+            src={`${URI}/${elem.photoDir}/${elem.path}`}
-              setPhotosDialog={setPhotosDialog}
+            setPhotosDialog={setPhotosDialog}
-            />
+            setPhotoClickIndex={setPhotoClickIndex}
-          ),
+          />
-          photosData
+        ))}
-        )}
       </div>
       <InformativeDialog
         open={photosDialog}
         title={`Photo roll`}
-        data={<PhotosCarousel photosData={photosData} />}
+        data={<PhotosCarousel photosData={orderedPhotosData} />}
         onDissmised={() => {
           setPhotosDialog(false)
+          setPhotoClickIndex(null)
         }}
       />
     </div>
   )
 }
 
-export const PhotoCard = ({ date, src, setPhotosDialog }) => {
+export const PhotoCard = ({
+  idx,
+  date,
+  src,
+  setPhotosDialog,
+  setPhotoClickIndex
+}) => {
   const classes = useStyles()
 
   return (
     <Paper
       className={classes.photoCardChip}
-      onClick={() => setPhotosDialog(true)}>
+      onClick={() => {
+        setPhotoClickIndex(idx)
+        setPhotosDialog(true)
+      }}>
       <img className={classes.image} src={src} alt="" />
       <div className={classes.footer}>
         <CameraIcon />

new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js

@@ -17,7 +17,9 @@ const styles = {
     objectFit: 'cover',
     objectPosition: 'center',
     width: 224,
-    height: 200
+    height: 200,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4
   },
   photoCardChip: {
     margin: [[0, 16, 0, 0]]