Add a badge on locations for new photos

- The last updated date is taken from the latest photo of each location (without any other API call, just some data manipulation)
- Manipulation of data in the preload request instead of the code

src/routes/_layout.svelte

@@ -1,6 +1,6 @@
 <script context="module">
     export async function preload (page, session) {
-        const req = await this.fetch(apiEndpoints.gql, {
+        await this.fetch(apiEndpoints.gql, {
             method: 'post',
             headers: {
                 'Content-Type': 'application/json',
@@ -56,16 +56,58 @@
                         illu_mobile { full_url }
                     }
                 }
+                photos (filter: { status_eq: "published" }) {
+                    data {
+                        created_on
+                        location { id }
+                    }
+                }
             }`})
         })
-        const result = await req.json()
-        if (req.ok) {
-            // Set data into store
-            site.set(result.data.site.data[0])
-            continents.set(result.data.continents.data)
-            countries.set(result.data.countries.data)
-            locations.set(result.data.locations.data)
-        }
+            .then(res => res.json())
+            .then(res => {
+                const { data } = res
+
+                // Manipulate countries data
+                data.countries.data.forEach(country => {
+                    const matchingContinent = data.continents.data.find(continent => continent.id === country.continent.id)
+                    // Replace continent with request data
+                    country.continent = matchingContinent
+                    // Add countries to each continents
+                    matchingContinent.countries = []
+                    matchingContinent.countries.push(country)
+                })
+
+                // Replace each location's country with request data
+                data.locations.data.forEach(location => {
+                    location.country = data.countries.data.find(country => country.id === location.country.id)
+                })
+
+                // Filter and keep only the latest photo for each location
+                // https://stackoverflow.com/questions/61636965/
+                const latestPhotos = Object.values(data.photos.data.reduce((photos, photo) => {
+                    if (photos.hasOwnProperty(photo.location.id)) {
+                        if (new Date(photos[photo.location.id].created_on) < new Date(photo.created_on)) {
+                            photos[photo.location.id] = photo
+                        }
+                    } else {
+                        photos[photo.location.id] = photo
+                    }
+                    return photos
+                }, {}))
+
+                // Add last updated date to each location
+                data.locations.data.forEach(location => {
+                    const latestPhoto = latestPhotos.find(photo => photo.location.id === location.id)
+                    location.last_updated = latestPhoto.created_on
+                })
+
+                // Set data into store
+                site.set(data.site.data[0])
+                continents.set(data.continents.data)
+                countries.set(data.countries.data)
+                locations.set(data.locations.data)
+            })
     }
 </script>
 
@@ -112,30 +154,6 @@
             '/fonts/M-Light.woff2',
         ]
     }
-
-
-    /*
-    ** Manipulate data
-    */
-    if (process.browser) {
-        if ($countries) {
-            $countries.forEach(country => {
-                const matchingContinent = $continents.find(continent => continent.id === country.continent.id)
-                // Replace continent with request data
-                country.continent = matchingContinent
-                // Add countries to each continents
-                matchingContinent.countries = []
-                matchingContinent.countries.push(country)
-            })
-        }
-
-        if ($locations) {
-            // Replace each location's country with request data
-            $locations.forEach(location => {
-                location.country = $countries.find(country => country.id === location.country.id)
-            })
-        }
-    }
 </script>
 
 <style lang="scss" global>
@@ -157,4 +175,4 @@
 
 <Transition />
 
-<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />
+<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />