From 1d1f6f5891855335b5c0882f3631a48692413469 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 29 Nov 2024 21:51:43 +0530
Subject: [PATCH] fix: use vueuse/core timeAgo function & updated date formats
 supported by luxon

---
 frontend/src/components/Activities/TaskArea.vue     | 4 ++--
 frontend/src/components/Activities/WhatsAppArea.vue | 4 ++--
 frontend/src/components/ListViews/TasksListView.vue | 4 ++--
 frontend/src/utils/index.js                         | 7 ++++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
index c20df9f0..95b6990d 100644
--- a/frontend/src/components/Activities/TaskArea.vue
+++ b/frontend/src/components/Activities/TaskArea.vue
@@ -19,11 +19,11 @@
             </div>
             <div v-if="task.due_date">
               <Tooltip
-                :text="formatDate(task.due_date, 'E, MMM d, yyyy | hh:mm aaa')"
+                :text="formatDate(task.due_date, 'EEE, MMM d, yyyy | hh:mm a')"
               >
                 <div class="flex gap-2">
                   <CalendarIcon />
-                  <div>{{ formatDate(task.due_date, 'd MMM, hh:mm aaa') }}</div>
+                  <div>{{ formatDate(task.due_date, 'd MMM, hh:mm a') }}</div>
                 </div>
               </Tooltip>
             </div>
diff --git a/frontend/src/components/Activities/WhatsAppArea.vue b/frontend/src/components/Activities/WhatsAppArea.vue
index 009bad2d..91511f53 100644
--- a/frontend/src/components/Activities/WhatsAppArea.vue
+++ b/frontend/src/components/Activities/WhatsAppArea.vue
@@ -127,9 +127,9 @@
             />
           </div>
           <div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
-            <Tooltip :text="formatDate(whatsapp.creation, 'E, MMM d, yyyy')">
+            <Tooltip :text="formatDate(whatsapp.creation, 'EEE, MMM d, yyyy')">
               <div class="text-2xs">
-                {{ formatDate(whatsapp.creation, 'hh:mm aaa') }}
+                {{ formatDate(whatsapp.creation, 'hh:mm a') }}
               </div>
             </Tooltip>
             <div v-if="whatsapp.type == 'Outgoing'">
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index e41d02f8..347e7ed0 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -40,12 +40,12 @@
       >
         <div v-if="column.key === 'due_date'">
           <Tooltip
-            :text="item && formatDate(item, 'E, MMM d, yyyy | hh:mm aaa')"
+            :text="item && formatDate(item, 'EEE, MMM d, yyyy | hh:mm a')"
           >
             <div class="flex items-center gap-2 truncate text-base">
               <div><CalendarIcon /></div>
               <div v-if="item" class="truncate">
-                {{ formatDate(item, 'd MMM, hh:mm aaa') }}
+                {{ formatDate(item, 'd MMM, hh:mm a') }}
               </div>
             </div>
           </Tooltip>
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 5cd65afc..4bb9b7f6 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -2,7 +2,8 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
 import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
 import { usersStore } from '@/stores/users'
 import { gemoji } from 'gemoji'
-import { toast, convertToUserTimezone, formatAsTimeAgo } from 'frappe-ui'
+import { useTimeAgo } from '@vueuse/core'
+import { toast, convertToUserTimezone } from 'frappe-ui'
 import { h } from 'vue'
 
 export function createToast(options) {
@@ -37,12 +38,12 @@ export function formatTime(seconds) {
   return formattedTime.trim()
 }
 
-export function formatDate(date, format = 'E, MMM d, yyyy h:mm a') {
+export function formatDate(date, format = 'EEE, MMM d, yyyy h:mm a') {
   return convertToUserTimezone(date, format)
 }
 
 export function timeAgo(date) {
-  return formatAsTimeAgo(date)
+  return useTimeAgo(date).value
 }
 
 export function taskStatusOptions(action, data) {