✨ Store location last seen date to check for New label

Stores the last location's page seeing date in localStorage to hide the Location's new label in list, on top of the date limit

src/components/molecules/Location.svelte

@@ -5,9 +5,10 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
-    import dayjs from 'dayjs'
+    import dayjs, { type Dayjs } from 'dayjs'
     import { lerp } from '$utils/functions'
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
+    import { seenLocations } from '$utils/stores'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import Badge from '$components/atoms/Badge.svelte'
@@ -15,19 +16,22 @@
     export let location: any
     export let latestPhoto: any
 
-    const { settings: { limit_new }}: any = getContext('global')
+    const { settings }: any = getContext('global')
 
     let locationEl: HTMLElement
     let photoIndex = 0
 
     // Location date limit
     let isNew = false
-    let dateUpdated: dayjs.Dayjs
+    let dateUpdated: Dayjs
-    const dateNowOffset = dayjs().subtract(limit_new, 'day')
+    const dateNowOffset = dayjs().subtract(settings.limit_new, 'day')
 
-    $: if (latestPhoto) {
+    $: if (latestPhoto && $seenLocations) {
         dateUpdated = dayjs(latestPhoto.date_created)
-        isNew = dateUpdated.isAfter(dateNowOffset)
+
+        // Detect if location has new content
+        const seenLocation = JSON.parse($seenLocations)?.hasOwnProperty(location.id)
+        isNew = dateUpdated.isAfter(dateNowOffset) && !seenLocation
     }
 
 

src/routes/[country]/[location]/+page.svelte

@@ -12,6 +12,7 @@
     import { quartOut } from '$animations/easings'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
+    import { seenLocations } from '$utils/stores'
     import { photoFields } from '$utils/api'
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     // Components
@@ -110,6 +111,14 @@
 
 
     onMount(() => {
+        // Define location's last seen state
+        $seenLocations = JSON.stringify({
+            // Add existing values
+            ...JSON.parse($seenLocations),
+            // Add location ID with current time
+            [location.id]: new Date(),
+        })
+
         // Photos IntersectionObserver
         observerPhotos = new IntersectionObserver(entries => {
             entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {

src/utils/stores/index.ts

@@ -2,4 +2,23 @@ import { writable, type Writable } from 'svelte/store'
 
 export const pageLoading: Writable<boolean> = writable(false)
 export const previousPage: Writable<string> = writable('')
-export const smoothScroll: Writable<any> = writable(null)
+export const smoothScroll: Writable<any> = writable(null)
+
+
+/**
+ * New locations tracking
+ */
+export const seenLocations: Writable<string> = writable('{}')
+
+// Define local storage from store
+if (typeof localStorage !== 'undefined') {
+    const seen = localStorage.getItem('seenLocations')
+    if (seen) {
+        const parsedValue = JSON.parse(seen)
+        seenLocations.set(JSON.stringify(parsedValue))
+    }
+    seenLocations.subscribe(value => {
+        const parsedValue = JSON.parse(value)
+        localStorage.setItem('seenLocations', JSON.stringify(parsedValue))
+    })
+}

src/utils/stores/shop.ts

@@ -18,9 +18,10 @@ export const cartId: Writable<string> = writable(null)
 
 // Write to localStorage when changing cartId
 if (typeof localStorage !== 'undefined') {
-    if (localStorage.getItem('cartId')) {
+    const cartId = localStorage.getItem('cartId')
-        // console.log('existant', localStorage.getItem('cartId'))
+    if (cartId) {
-        cartId.set(localStorage.getItem('cartId'))
+        cartId.set(cartId)
+        // console.log('existing cart:', cartId)
     }
     cartId.subscribe(value => localStorage.setItem('cartId', value))
 }