From e1d700cb396284eaf629066f8a992934f318ad29 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 17 Feb 2022 17:32:10 +0100
Subject: [PATCH] fix: format date in PhotoCarousel

fix: photo card chip gap and cursor

fix: sort photos in overview by date
---
 .../src/pages/Customers/CustomerPhotos.js         |  6 ++++--
 .../src/pages/Customers/CustomerPhotos.styles.js  |  5 +++--
 .../src/pages/Customers/CustomerProfile.js        |  3 ++-
 .../pages/Customers/components/CustomerDetails.js |  4 ++--
 .../src/pages/Customers/components/PhotosCard.js  | 15 +++++++++++----
 .../pages/Customers/components/PhotosCarousel.js  | 12 ++++++++++--
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
index 6bb8a19c..f9b45156 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.js
@@ -13,7 +13,7 @@ import PhotosCarousel from './components/PhotosCarousel'
 
 const useStyles = makeStyles(styles)
 
-const CustomerPhotos = ({ photosData }) => {
+const CustomerPhotos = ({ photosData, timezone }) => {
   const classes = useStyles()
 
   const [photosDialog, setPhotosDialog] = useState(false)
@@ -41,7 +41,9 @@ const CustomerPhotos = ({ photosData }) => {
       <InformativeDialog
         open={photosDialog}
         title={`Photo roll`}
-        data={<PhotosCarousel photosData={orderedPhotosData} />}
+        data={
+          <PhotosCarousel photosData={orderedPhotosData} timezone={timezone} />
+        }
         onDissmised={() => {
           setPhotosDialog(false)
           setPhotoClickIndex(null)
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
index a7fdffe4..93d8637f 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js
@@ -11,7 +11,8 @@ const styles = {
   photosChipList: {
     display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    gap: 14
   },
   image: {
     objectFit: 'cover',
@@ -22,7 +23,7 @@ const styles = {
     borderTopRightRadius: 4
   },
   photoCardChip: {
-    margin: [[0, 16, 0, 0]]
+    cursor: 'pointer'
   },
   footer: {
     display: 'flex',
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 1d44c02c..6057c6db 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -607,6 +607,7 @@ const CustomerProfile = memo(() => {
                   photosData={photosData}
                   locale={locale}
                   setShowCompliance={() => setShowCompliance(!showCompliance)}
+                  timezone={timezone}
                 />
               </Box>
               <div>
@@ -646,7 +647,7 @@ const CustomerProfile = memo(() => {
           )}
           {isPhotos && (
             <div>
-              <CustomerPhotos photosData={photosData} />
+              <CustomerPhotos photosData={photosData} timezone={timezone} />
             </div>
           )}
         </div>
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js
index 8aebf62f..a03728f4 100644
--- a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js
+++ b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.js
@@ -12,7 +12,7 @@ import PhotosCard from './PhotosCard'
 
 const useStyles = makeStyles(mainStyles)
 
-const CustomerDetails = memo(({ customer, photosData, locale }) => {
+const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {
   const classes = useStyles()
 
   const idNumber = R.path(['idCardData', 'documentNumber'])(customer)
@@ -44,7 +44,7 @@ const CustomerDetails = memo(({ customer, photosData, locale }) => {
 
   return (
     <Box display="flex">
-      <PhotosCard photosData={photosData} />
+      <PhotosCard photosData={photosData} timezone={timezone} />
       <Box display="flex" flexDirection="column">
         <div className={classes.name}>
           <IdIcon className={classes.idIcon} />
diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js
index 0181fdca..d3c56133 100644
--- a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.js
@@ -14,12 +14,17 @@ import PhotosCarousel from './PhotosCarousel'
 
 const useStyles = makeStyles(styles)
 
-const PhotosCard = memo(({ photosData }) => {
+const PhotosCard = memo(({ photosData, timezone }) => {
   const classes = useStyles()
 
   const [photosDialog, setPhotosDialog] = useState(false)
 
-  const singlePhoto = R.head(photosData)
+  const sortedPhotosData = R.sortWith(
+    [(a, b) => R.has('id', a) - R.has('id', b), R.descend(R.prop('date'))],
+    photosData
+  )
+
+  const singlePhoto = R.head(sortedPhotosData)
 
   return (
     <>
@@ -39,7 +44,7 @@ const PhotosCard = memo(({ photosData }) => {
               />
               <circle className={classes.circle}>
                 <div>
-                  <Info2>{photosData.length}</Info2>
+                  <Info2>{sortedPhotosData.length}</Info2>
                 </div>
               </circle>
             </div>
@@ -51,7 +56,9 @@ const PhotosCard = memo(({ photosData }) => {
       <InformativeDialog
         open={photosDialog}
         title={`Photo roll`}
-        data={<PhotosCarousel photosData={photosData} />}
+        data={
+          <PhotosCarousel photosData={sortedPhotosData} timezone={timezone} />
+        }
         onDissmised={() => {
           setPhotosDialog(false)
         }}
diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
index e0d6f2e0..2e63dc69 100644
--- a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
+++ b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.js
@@ -4,6 +4,7 @@ import React, { memo, useState } from 'react'
 
 import { Carousel } from 'src/components/Carousel'
 import { Label1 } from 'src/components/typography'
+import { formatDate } from 'src/utils/timezones'
 
 import CopyToClipboard from '../../Transactions/CopyToClipboard'
 
@@ -11,7 +12,7 @@ import styles from './PhotosCarousel.styles'
 
 const useStyles = makeStyles(styles)
 
-const PhotosCarousel = memo(({ photosData }) => {
+const PhotosCarousel = memo(({ photosData, timezone }) => {
   const classes = useStyles()
   const [currentIndex, setCurrentIndex] = useState(0)
 
@@ -39,7 +40,14 @@ const PhotosCarousel = memo(({ photosData }) => {
         <div>
           <div>
             <Label>Date</Label>
-            <div>{photosData && photosData[currentIndex]?.date}</div>
+            <div>
+              {photosData &&
+                formatDate(
+                  photosData[currentIndex]?.date,
+                  timezone,
+                  'yyyy-MM-dd HH:mm'
+                )}
+            </div>
           </div>
         </div>
         <div>