Better attendance date

src/components/Global/AnimatedNumber.tsx

@@ -15,7 +15,7 @@ interface AnimatedNumberProps {
    * d'animer chaque chiffre et d'avoir un
    * flottant fixé, par exemple.
    */
-  value: string;
+  value: string | any;
 
   /**
    * Style du texte du nombre.
@@ -50,7 +50,7 @@ const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
       }, contentContainerStyle]}
       layout={animPapillon(LinearTransition)}
     >
-      {value.split("").map((n, i) => (
+      {value.toString().split("").map((n, i) => (
         <Reanimated.View
           key={i + "_" + n}
           entering={animPapillon(FadeInDown).delay(i * 20 + 20).mass(1).damping(30).stiffness(700)}
@@ -66,4 +66,4 @@ const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
   );
 };
 
-export default AnimatedNumber;
+export default AnimatedNumber;

src/views/account/Attendance/Atoms/AttendanceItem.tsx

@@ -17,7 +17,7 @@ interface AttendanceItemProps {
   missed?: { hours: number, minutes: number }
 }
 
-const NO_JUSTICATION = "Sans justification";
+const NO_JUSTICATION = "Aucune description";
 
 const AttendanceItem: React.FC<AttendanceItemProps> = ({
   title,
@@ -74,17 +74,44 @@ const AttendanceItem: React.FC<AttendanceItemProps> = ({
         let totalTime = "";
         if ("hours" in item) {
           const [hours, minutes] = item.hours.split("h").map(Number);
-          totalTime = hours + "h " + leadingZero(minutes) + "min";
+          if (hours === 0) {
+            totalTime = `${leadingZero(minutes)} min`;
+          } else {
+            totalTime = `${hours}h ${leadingZero(minutes)}min`;
+          }
         }
         else if ("duration" in item) {
           totalTime = item.duration + " min";
         }
 
-        totalTime = totalTime.replace("0h ", "");
-
         const timestamp = "fromTimestamp" in item ? item.fromTimestamp : item.timestamp;
+        const toTimestamp = "toTimestamp" in item ? item.toTimestamp : null;
         const not_justified = "justified" in item && !item.justified;
         const justification = "reasons" in item ? item.reasons || NO_JUSTICATION : "reason" in item ? item.reason.text : NO_JUSTICATION;
+        const dateString = toTimestamp
+        ? `Du ${new Date(timestamp).toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: new Date(timestamp).getFullYear() !== new Date().getFullYear() ? "2-digit" : undefined,
+          })} à ${new Date(timestamp).toLocaleTimeString("fr-FR", {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}\nAu ${new Date(toTimestamp).toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: new Date(toTimestamp).getFullYear() !== new Date().getFullYear() ? "2-digit" : undefined,
+          })} à ${new Date(toTimestamp).toLocaleTimeString("fr-FR", {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}`
+        : `${new Date(timestamp).toLocaleDateString("fr-FR", {
+            weekday: "long",
+            day: "2-digit",
+            month: "short",
+          })} à ${new Date(timestamp).toLocaleTimeString("fr-FR", {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}`;
 
         return (
           <NativeItem
@@ -118,13 +145,7 @@ const AttendanceItem: React.FC<AttendanceItemProps> = ({
             )}
 
             <NativeText variant="subtitle">
-              {new Date(timestamp).toLocaleDateString("fr-FR", {
-                weekday: "long",
-                month: "short",
-                day: "numeric",
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
+              {dateString}
             </NativeText>
           </NativeItem>
         );