@kompasid/lit-web-components 0.8.6 → 0.8.8

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -1,8 +1,7 @@
 import { html, css, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { format } from 'date-fns'
-import { id } from 'date-fns/locale/id'
 import { TWStyles } from '../../../tailwind/tailwind.js'
+import { useTimeDifference } from '../../utils/useTimeDIfference.js'
 
 interface PostTag {
   slug: string
@@ -13,6 +12,7 @@ interface ListItem {
   isAnalisis?: boolean
   isEksklusif?: boolean
   isFreemium?: boolean
+  isKompasBrief?: boolean
   permalink: string
   publishedDate?: string
   postTag?: PostTag[]
@@ -121,11 +121,15 @@ export class KompasWidgetRecirculationsList extends LitElement {
           const isEksklusif = postTag.some(
             (tag: { slug: string }) => tag.slug === 'eksklusif'
           )
+          const isKompasBrief = postTag.some(
+            (tag: { slug: string }) => tag.slug === 'kompas-brief'
+          )
 
           return {
             isAnalisis,
             isEksklusif,
             isFreemium,
+            isKompasBrief,
             title,
             permalink,
             publishedDate,
@@ -137,10 +141,6 @@ export class KompasWidgetRecirculationsList extends LitElement {
     }
   }
 
-  formatDate(date: string) {
-    return format(new Date(date), "dd MMMM yyyy' · 'HH:mm' WIB", { locale: id })
-  }
-
   handleFetchError(error: unknown) {
     const errorMessage =
       error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
@@ -150,17 +150,15 @@ export class KompasWidgetRecirculationsList extends LitElement {
   renderChips(item: ListItem) {
     const chips = []
 
-    if (item.isAnalisis) {
+    if (item.isKompasBrief) {
       chips.push(
         html`
           <div class="flex">
-            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+            <div class="chip bg-red-100 text-red-600">Kompas Brief</div>
           </div>
         `
       )
-    }
-
-    if (item.isEksklusif) {
+    } else if (item.isEksklusif) {
       chips.push(
         html`
           <div class="flex">
@@ -175,9 +173,7 @@ export class KompasWidgetRecirculationsList extends LitElement {
           </div>
         `
       )
-    }
-
-    if (item.isFreemium) {
+    } else if (item.isFreemium) {
       chips.push(
         html`
           <div class="flex">
@@ -185,6 +181,14 @@ export class KompasWidgetRecirculationsList extends LitElement {
           </div>
         `
       )
+    } else if (item.isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
     }
 
     return chips
@@ -228,7 +232,7 @@ export class KompasWidgetRecirculationsList extends LitElement {
                           : 'text-grey-500'}"
                       >
                         ${item.publishedDate
-                          ? this.formatDate(item.publishedDate)
+                          ? useTimeDifference(item.publishedDate, true)
                           : 'Tanggal tidak tersedia'}
                       </div>
                     </div>

package/src/utils/useTimeDIfference.ts

@@ -0,0 +1,37 @@
+import { id } from 'date-fns/locale/id'
+import {
+  differenceInMinutes,
+  differenceInHours,
+  format,
+  isToday,
+} from 'date-fns'
+
+export const useTimeDifference = (dt: string, showTime = false) => {
+  const currentDate = new Date()
+
+  if (isToday(dt)) {
+    // If the date is today
+    const minutesDifference = differenceInMinutes(currentDate, dt)
+
+    if (minutesDifference < 60) {
+      return `${minutesDifference} menit lalu` // If less than 1 hour
+    }
+    const hoursDifference = differenceInHours(currentDate, dt)
+    return `${hoursDifference} jam lalu` // If more than 1 hour
+  }
+  const hoursDifference = differenceInHours(currentDate, dt)
+
+  if (hoursDifference < 24) {
+    // If the date is within the last 24 hours
+    return `${hoursDifference} jam lalu`
+  }
+  // If the date is more than 24 hours ago
+  const formattedDate = format(dt, 'dd MMMM yyyy', { locale: id })
+
+  if (showTime) {
+    const formattedTime = format(dt, "HH:mm 'WIB'") // Format time to include WIB
+    return `${formattedDate} · ${formattedTime}` // Return date and time
+  }
+
+  return formattedDate // Return only the date if showTime is false
+}