Add edited field in listing and show it in the notes cards

Author: blazedglimmer

app/actions/todo-actions.ts

@@ -183,6 +183,7 @@ export async function getTodo(
     done: boolean;
     id: string;
     todoColor: string;
+    updatedAt: Date;
     user: { username: string };
     images: {
       id: string;
@@ -221,6 +222,7 @@ export async function getTodo(
           done: true,
           id: true,
           todoColor: true,
+          updatedAt: true,
           user: {
             select: {
               username: true,

common/common.ts

@@ -9,3 +9,82 @@ export function getDarkModeColor(color: string) {
 export function getColorName(color: string) {
   return color.replace('-700', '').replace('bg-', '');
 }
+
+export const formatDate = (inputString: Date) => {
+  const dateObj = new Date(inputString);
+  const day = dateObj.getDate();
+  const monthIndex = dateObj.getMonth();
+  const year = dateObj.getFullYear();
+  const hours = dateObj.getHours();
+  const minutes = dateObj.getMinutes();
+  // Format the day with appropriate suffix (e.g., 1st, 2nd, 3rd, 4th, etc.)
+  const dayWithSuffix = getDayWithSuffix(day);
+  // Get the month name from the month index
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  const monthName = monthNames[monthIndex];
+  // Format the time in 12-hour clock format with AM/PM
+  const amOrPm = hours >= 12 ? 'PM' : 'AM';
+  const formattedHours = hours % 12 || 12;
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  return `${dayWithSuffix} ${monthName} ${year}, ${formattedHours}:${formattedMinutes} ${amOrPm}`;
+};
+
+export const secondFormatDate = (inputString: Date) => {
+  const dateObj = new Date(inputString);
+  const day = dateObj.getDate();
+  const monthIndex = dateObj.getMonth();
+  const hours = dateObj.getHours();
+  const minutes = dateObj.getMinutes();
+  // Format the day with appropriate suffix (e.g., 1st, 2nd, 3rd, 4th, etc.)
+  const dayWithSuffix = getDayWithSuffix(day);
+  // Get the month name from the month index
+  const monthNames = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'July',
+    'Aug',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const monthName = monthNames[monthIndex];
+  // Format the time in 12-hour clock format with AM/PM
+  const amOrPm = hours >= 12 ? 'PM' : 'AM';
+  const formattedHours = hours % 12 || 12;
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  return `${dayWithSuffix} ${monthName}, ${formattedHours}:${formattedMinutes} ${amOrPm}`;
+};
+
+export const getDayWithSuffix = (day: number) => {
+  if (day >= 11 && day <= 13) {
+    return day + 'th';
+  }
+  switch (day % 10) {
+    case 1:
+      return day + 'st';
+    case 2:
+      return day + 'nd';
+    case 3:
+      return day + 'rd';
+    default:
+      return day + 'th';
+  }
+};

components/card/listing-card.tsx

@@ -31,7 +31,11 @@ import {
   CircleX,
 } from 'lucide-react';
 import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect';
-import { getLightModeColor, getDarkModeColor } from '@/common/common';
+import {
+  getLightModeColor,
+  getDarkModeColor,
+  secondFormatDate,
+} from '@/common/common';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { Collaborator, User } from '@prisma/client';
 
@@ -55,6 +59,7 @@ export const ListingCard = ({
     title: string;
     description: string;
     images: ImageProps[];
+    updatedAt: Date;
   };
   children: React.ReactNode;
   className: string;
@@ -262,24 +267,29 @@ export const ListingCard = ({
               }
             />
           </form>
-          <div className="flex items-center ">
-            {collabs
-              ?.filter(item => item.user.id !== userId)
-              .map(item => (
-                <Avatar key={item.user.id} className="flex items-center">
-                  <AvatarImage
-                    src={item.user.profilePic as string}
-                    alt="AS"
-                    className="cursor-pointer w-7 h-7 rounded-full"
-                    width={50}
-                    height={50}
-                  />
-                  <AvatarFallback className="cursor-pointer w-7 h-7 p-2 shadow rounded-full dark:border border-gray-600 text-xs">
-                    {item.user?.firstName.charAt(0)}
-                    {item.user?.lastName.charAt(0)}
-                  </AvatarFallback>
-                </Avatar>
-              ))}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center flex-wrap">
+              {collabs
+                ?.filter(item => item.user.id !== userId)
+                .map(item => (
+                  <Avatar key={item.user.id} className="flex items-center">
+                    <AvatarImage
+                      src={item.user.profilePic as string}
+                      alt="AS"
+                      className="cursor-pointer w-7 h-7 rounded-full"
+                      width={50}
+                      height={50}
+                    />
+                    <AvatarFallback className="cursor-pointer w-7 h-7 p-2 shadow rounded-full dark:border border-gray-600 text-xs">
+                      {item.user?.firstName.charAt(0)}
+                      {item.user?.lastName.charAt(0)}
+                    </AvatarFallback>
+                  </Avatar>
+                ))}
+            </div>
+            <div className="text-gray-400 text-xs">
+              {secondFormatDate(item.updatedAt)}
+            </div>
           </div>
         </DialogHeader>
         <DialogFooter>