✨ feat: notification time ago

:%s

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -37,6 +37,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
+    "moment": "^2.29.1",
     "net": "^1.0.2",
     "next": "^11.0.0",
     "next-seo": "^4.26.0",

src/components/hooks/notification/useNotifications.tsx

@@ -5,7 +5,6 @@ import useSWR from 'swr'
 
 const useNotifications = (options?: QueryNotificationsArgs) => {
   const { data, isValidating, ...rest } = useSWR<NotificationsQuery>([notificationsQuery, options], gglFetcher)
-  console.log("data: ", data)
   return { notifications: data?.notifications?.items, total: data?.notifications?.totalItems, loading: isValidating, ...rest }
 }
 

src/components/modules/Notification/NotificationItem/NotificationItem.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import React from 'react'
 import { IconBill } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { formatTimeAgo } from 'src/utils/funtion.utils'
 import s from '../NotificationItem/NotificationItem.module.scss'
 
 export interface NotificationItemProps extends Omit<Notification, "type" | "data"> {
@@ -30,7 +31,7 @@ const NotificationItem = ({ description, createdAt, order, isNew }: Notification
                             {description}
                         </div>
                         <div className={s.date}>
-                            {createdAt}
+                            {formatTimeAgo(createdAt)}
                         </div>
                     </div>
                 </a>

src/utils/funtion.utils.ts

@@ -1,14 +1,19 @@
 import { Collection } from '@commerce/types/collection';
 import { Facet } from "@commerce/types/facet";
 import { Product, ProductCard, ProductOptionValues } from "@commerce/types/product";
-import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
+import { BlogList, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
 import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, FACET, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
 import { PromiseWithKey, SelectedOptions, SortOrder } from "./types.utils";
+import moment from 'moment'
 
 export function isMobile() {
   return window.innerWidth < 768
 }
 
+export function formatTimeAgo (time: string) {
+  return moment(time).fromNow()
+}
+
 export function getPageFromQuery(pageQuery: string) {
   let page = 0
   try {