From f38a8fcdc71399a5820ce64a4f3aad5ad6714c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 14 Sep 2022 11:32:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Store=20location=20last=20seen=20da?=
 =?UTF-8?q?te=20to=20check=20for=20New=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     | 16 +++++++++------
 src/routes/[country]/[location]/+page.svelte |  9 +++++++++
 src/utils/stores/index.ts                    | 21 +++++++++++++++++++-
 src/utils/stores/shop.ts                     |  7 ++++---
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index d4da2f6..4efd16f 100644
--- a/src/components/molecules/Location.svelte
+++ b/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
-    const dateNowOffset = dayjs().subtract(limit_new, 'day')
+    let dateUpdated: Dayjs
+    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
     }
 
 
diff --git a/src/routes/[country]/[location]/+page.svelte b/src/routes/[country]/[location]/+page.svelte
index 3b3fd6f..e96a8f7 100644
--- a/src/routes/[country]/[location]/+page.svelte
+++ b/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) => {
diff --git a/src/utils/stores/index.ts b/src/utils/stores/index.ts
index f4e602a..d397a81 100644
--- a/src/utils/stores/index.ts
+++ b/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)
\ No newline at end of file
+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))
+    })
+}
\ No newline at end of file
diff --git a/src/utils/stores/shop.ts b/src/utils/stores/shop.ts
index 43881ad..7f61f8b 100644
--- a/src/utils/stores/shop.ts
+++ b/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')) {
-        // console.log('existant', localStorage.getItem('cartId'))
-        cartId.set(localStorage.getItem('cartId'))
+    const cartId = localStorage.getItem('cartId')
+    if (cartId) {
+        cartId.set(cartId)
+        // console.log('existing cart:', cartId)
     }
     cartId.subscribe(value => localStorage.setItem('cartId', value))
 }