Timestamping for Cards

components/organisms/Cards/CommentCard.js

@@ -7,6 +7,7 @@ import colors from '../../../theme/colors'
 import fonts from '../../../theme/fonts'
 import images from '../../../assets/images/images'
 import { Menu, Provider } from 'react-native-paper'
+import { getTimestamp } from '../../../utils/Constants/functions'
 
 const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeCount, }) => {
 
@@ -59,7 +60,7 @@ const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeC
                         <Image source={images.imageCard} style={styles.profileIcon} />
                         <View style={{ justifyContent: 'center' }}>
                             <Text style={styles.name}>Semina Gurung</Text>
-                            <Text style={styles.timestamp}>2 days ago</Text>
+                            <Text style={styles.timestamp}>{getTimestamp(timestamp)}</Text>
                         </View>
                     </View>
                     <View>

components/organisms/Cards/HorizontalNewsCard.js

@@ -6,6 +6,7 @@ import colors from '../../../theme/colors'
 import images from '../../../assets/images/images'
 import BookmarkButton from '../Buttons/BookmarkButton'
 import ShareButton from '../Buttons/ShareButton'
+import { getTimestamp } from '../../../utils/Constants/functions'
 
 
 const HorizontalNewsCard = ({ style, headline, tagline, category, timestamp, image, onPress }) => {
@@ -30,7 +31,7 @@ const HorizontalNewsCard = ({ style, headline, tagline, category, timestamp, ima
                 <View>
                     <View style={styles.descriptors}>
                         <Text style={styles.categoryDescriptor}>{category ?? "Sports"}</Text>
-                        <Text style={styles.timeDescriptor}>{timestamp ?? "27 mins ago"}</Text>
+                        <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
                     </View>
                     <View style={styles.utilButtons}>
                         <BookmarkButton onPress={true} />

components/organisms/Cards/HorizontalNewsCardVariant.js

@@ -6,6 +6,7 @@ import colors from '../../../theme/colors'
 import images from '../../../assets/images/images'
 import BookmarkButton from '../Buttons/BookmarkButton'
 import ShareButton from '../Buttons/ShareButton'
+import { getTimestamp } from '../../../utils/Constants/functions'
 
 
 const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress }) => {
@@ -25,7 +26,7 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
       </View>
       <View style={styles.middleSection}>
         <View style={styles.descriptors}>
-          <Text style={styles.timeDescriptor}>{timestamp ?? "27 mins ago"}</Text>
+          <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
         </View>
         <View style={styles.utilButtons}>
           <BookmarkButton size={20} onPress={true} />

utils/Constants/functions.js

@@ -3,12 +3,72 @@ import { useState } from "react";
 /*
     Executes before Render
 */
-export const useConstructor = (callBack = () => {}) => {
+export const useConstructor = (callBack = () => { }) => {
     const [hasBeenCalled, setHasBeenCalled] = useState(false);
     if (hasBeenCalled) return;
     callBack();
     setHasBeenCalled(true);
 }
 
-export const capitalize = (str) => str.charAt(0).toUpperCase() + str.substring(1,str.length).toLowerCase()
+const _MS_PER_SECOND = 1000;
+const _MS_PER_MINUTE = _MS_PER_SECOND * 60;
+const _MS_PER_HOUR = _MS_PER_MINUTE * 60;
+const _MS_PER_DAY = _MS_PER_HOUR * 24;
+const _MS_PER_MONTH = _MS_PER_DAY * 31;
+const _MS_PER_YEAR = _MS_PER_MONTH * 12;
 
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.substring(1, str.length).toLowerCase()
+
+export const getDifferenceInDates = (startDate, endDate) => {
+    var diff = Math.floor(startDate.getTime() - endDate.getTime());
+    return {
+        "year": Math.floor(diff / _MS_PER_YEAR),
+        "month": Math.floor(diff / _MS_PER_MONTH),
+        "day": Math.floor(diff / _MS_PER_DAY),
+        "minute": Math.floor(diff / _MS_PER_MINUTE),
+        "second": Math.floor(diff / _MS_PER_SECOND),
+    }
+
+}
+
+export const getTimestamp = (iso_date_str) => {
+    let diffObj = getDifferenceInDates(new Date(), new Date(iso_date_str))
+    var result = "Timestamp Not Found"
+    for (const key of Object.keys(diffObj)) {
+        if (diffObj[key] > 0) {
+            result = `${diffObj[key]} ${capitalize(key)}${ diffObj > 1 ? "s" : ""} ago`
+            break
+        }
+    }
+    return result
+
+}
+
+const _getMonth = (index) => {
+    const months = {
+        0: "January",
+        1: "Febraury",
+        2: "March",
+        3: "April",
+        4: "May",
+        5: "June",
+        6: "July",
+        7: "August",
+        8: "September",
+        9: "October",
+        10: "November",
+        11: "December"
+    }
+    if (Object.hasOwn(months, index)) {
+        return months[index]
+
+    } else {
+        return "Month Not Found"
+    }
+
+}
+
+export const getDate = (iso_date_str) => {
+    let date = new Date(iso_date_str)
+    return `${date.getDate()} ${_getMonth(date.getMonth())} ${date.getFullYear()}`
+}