From adf2563eb84d4c31d99e3376baedfe02aa550a6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 6 Mar 2020 14:14:17 +0100
Subject: [PATCH] Reorganise functions, Use custom Format Date/Relative Time
 over dayjs

---
 src/atoms/IconGlobe.svelte                    |  4 +-
 src/atoms/IconGlobeSmall.svelte               |  4 +-
 src/atoms/LinkTranslate.svelte                |  2 -
 src/atoms/TitleSite.svelte                    |  6 +-
 src/molecules/Photo.svelte                    | 29 +++---
 src/organisms/Carousel.svelte                 | 19 ++--
 src/organisms/Locations.svelte                |  4 +-
 src/routes/index.svelte                       |  8 +-
 .../location/[country]/[location].svelte      | 22 ++---
 .../[country]/[location]/[photo].svelte       |  7 +-
 src/utils/functions.js                        | 95 +++++++++++++++++--
 11 files changed, 128 insertions(+), 72 deletions(-)

diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte
index c49f874..0eab929 100644
--- a/src/atoms/IconGlobe.svelte
+++ b/src/atoms/IconGlobe.svelte
@@ -1,6 +1,6 @@
 <script>
     import { stores } from '@sapper/app'
-    import * as fn from '../utils/functions'
+    import { randomString } from '../utils/functions'
     const { page } = stores()
 
     // Props
@@ -9,7 +9,7 @@
     export let animated = false
 
     // Generate a random ID for the mask
-    const randomId = fn.randomString(6, 'A')
+    const randomId = randomString(6, 'A')
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte
index 5e0afdc..b7d8bb5 100644
--- a/src/atoms/IconGlobeSmall.svelte
+++ b/src/atoms/IconGlobeSmall.svelte
@@ -1,6 +1,6 @@
 <script>
     import { stores } from '@sapper/app'
-    import * as fn from '../utils/functions'
+    import { randomString } from '../utils/functions'
     const { page } = stores()
 
     // Props
@@ -9,7 +9,7 @@
     export let animated = false
 
     // Generate a random ID for the mask
-    const randomId = fn.randomString(6, 'A')
+    const randomId = randomString(6, 'A')
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/src/atoms/LinkTranslate.svelte b/src/atoms/LinkTranslate.svelte
index e8a34f3..727b377 100644
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -1,6 +1,4 @@
 <script>
-    import * as fn from '../utils/functions'
-
     export let href = '/'
     export let text = ''
     export let target = null
diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte
index 1578ab6..8ed73bc 100644
--- a/src/atoms/TitleSite.svelte
+++ b/src/atoms/TitleSite.svelte
@@ -1,11 +1,11 @@
 <script>
-    import * as fn from '../utils/functions'
+    import { lettersToSpan } from '../utils/functions'
 </script>
 
 <div class="title-location title-location--inline">
     <div role="heading" aria-level="1" aria-label="Houses" data-aos="letters-translate-bottom">
         <div class="anim-mask">
-            {@html fn.lettersToSpan('Houses')}
+            {@html lettersToSpan('Houses')}
         </div>
     </div>
 
@@ -13,7 +13,7 @@
 
     <div aria-label="World" data-aos="letters-translate-bottom">
         <div class="anim-mask">
-            {@html fn.lettersToSpan('World')}
+            {@html lettersToSpan('World')}
         </div>
     </div>
 </div>
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 1ce212a..24acc34 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -3,13 +3,10 @@
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { site, currentLocation } from '../utils/store'
-    import * as fn from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'
-    import dayjs from 'dayjs'
-    import advancedFormat from 'dayjs/plugin/advancedFormat'
-    dayjs.extend(advancedFormat)
+    import { getThumbnail, formatDate } from '../utils/functions'
 
     // Props and variables
     export let photo
@@ -66,28 +63,28 @@
             <a href={photoHref} sapper-noscroll>
                 <picture class="photo__picture">
                     {#if layout === 'list'}
-                    <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
-                    <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
-                    <source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
-                    <source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
+                    <source media="(min-width: 992px)" data-srcset={getThumbnail(photo.image.private_hash, 1300)}>
+                    <source media="(min-width: 768px)" data-srcset={getThumbnail(photo.image.private_hash, 992)}>
+                    <source media="(min-width: 500px)" data-srcset={getThumbnail(photo.image.private_hash, 650)}>
+                    <source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
-                        data-src="{fn.getThumbnail(photo.image.private_hash, 900)}"
+                        data-src="{getThumbnail(photo.image.private_hash, 900)}"
                         width={defaultWidth} height={defaultHeight}
                         alt={imgAlt}
                         class="lazyload"
                         data-aos="scale-down-fade-in" data-aos-once="true">
 
                     {:else}
-                    <source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
-                    <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
-                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
-                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
+                    <source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
+                    <source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}>
+                    <source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}>
+                    <source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
+                    <img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
                     {/if}
                 </picture>
             </a>
-            <time class="photo__date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
-                {dayjs(photo.date).format('MMM Do, YYYY')}
+            <time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
+                {formatDate(photo.date, 'FULL')}
             </time>
             <span class="photo__number">{(index < 10 ? '0': '') + index}</span>
         </div>
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 8fe8000..986fff8 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -2,15 +2,10 @@
     import { onMount, createEventDispatcher } from 'svelte'
     import { stores } from '@sapper/app'
     import { currentLocation } from '../utils/store'
-    import * as fn from '../utils/functions'
+    import { getThumbnail, formatDate } from '../utils/functions'
     const dispatch = createEventDispatcher()
     const { page } = stores()
 
-    // Dependencies
-	import dayjs from 'dayjs'
-	import advancedFormat from 'dayjs/plugin/advancedFormat'
-	dayjs.extend(advancedFormat)
-
     // Components
     import IconArrow from '../atoms/IconArrow'
 
@@ -147,11 +142,11 @@
                     class:gallery__photo--active={photo === currentPhoto}
                     class:gallery__photo--next={photo === nextPhoto}
                 >
-                    <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
-                    <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
-                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 600)}>
-                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
+                    <source media="(min-width: 968px)" srcset={getThumbnail(photo.image.private_hash, 1400)}>
+                    <source media="(min-width: 800px)" srcset={getThumbnail(photo.image.private_hash, 900)}>
+                    <source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 600)}>
+                    <source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
+                    <img src="{getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
                 </picture>
                 {/each}
             </div>
@@ -201,7 +196,7 @@
                 {/each}
             </div>
             {#if viewer}
-            <p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
+            <p class="carousel__date">{formatDate(currentPhoto.date, 'FULL')}</p>
             {/if}
         </div>
 
diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte
index 27cc691..ffbdffa 100644
--- a/src/organisms/Locations.svelte
+++ b/src/organisms/Locations.svelte
@@ -3,10 +3,10 @@
     import { flip } from 'svelte/animate'
     import { crossfadeReceive, crossfadeSend } from '../utils/animations'
     import { locations, countries, continents } from '../utils/store'
-    import * as fn from '../utils/functions'
 
     // Dependencies
     import AOS from 'aos'
+    import { throttle } from '../utils/functions'
 
     // Components
     import Button from '../atoms/Button'
@@ -25,7 +25,7 @@
 
     // Filter by continent
     // Detects if click difference if too short with a throttled function
-    const toggleContinents = fn.throttle((event, continent) => {
+    const toggleContinents = throttle((event, continent) => {
         continentsFiltered = (!continent) ? [...continentsToDisplay] : [continent]
     }, transitionDuration)
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 072420f..c999e76 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -19,7 +19,7 @@
 <script>
     import { onMount } from 'svelte'
     import { site, currentLocation, currentPhotos } from '../utils/store'
-    import * as fn from '../utils/functions'
+    import { lettersToSpan } from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'
@@ -102,7 +102,7 @@
     <div class="anim-mask">
         <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
             <h1 class="title-massive" aria-label="Houses">
-                {@html fn.lettersToSpan('Houses')}
+                {@html lettersToSpan('Houses')}
             </h1>
         </div>
     </div>
@@ -123,7 +123,7 @@
 <section class="explore explore--homepage">
     <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
         <div class="anim-mask">
-            {@html fn.lettersToSpan('of')}
+            {@html lettersToSpan('of')}
         </div>
     </div>
 
@@ -135,7 +135,7 @@
 
     <div class="anim-mask anim-title">
         <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
-            {@html fn.lettersToSpan('World')}
+            {@html lettersToSpan('World')}
         </h1>
     </div>
 
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index d0da4d8..2d21bf4 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -22,17 +22,11 @@
 
 <script>
     import { onMount } from 'svelte'
-    import * as fn from '../../../utils/functions'
+    import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
     const { page } = stores()
 
     // Dependencies
     import AOS from 'aos'
-    import 'lazysizes'
-    import dayjs from 'dayjs'
-    import advancedFormat from 'dayjs/plugin/advancedFormat'
-    import relativeTime from 'dayjs/plugin/relativeTime'
-    dayjs.extend(advancedFormat)
-    dayjs.extend(relativeTime)
 
     // Components
     import IconGlobe from '../../../atoms/IconGlobe'
@@ -56,10 +50,9 @@
 
     // Define dates
     $: latestPhoto = photos[0]
-    $: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
-    $: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
-    $: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
-    $: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
+    $: dateUpdatedFull = latestPhoto ? formatDate(latestPhoto.modified_on, 'FULL') : ''
+    $: dateUpdatedDatetime = latestPhoto ? formatDate(latestPhoto.modified_on, 'DATETIME') : ''
+    $: dateUpdatedRelative = latestPhoto ? relativeTime(latestPhoto.modified_on, 2592000000) : ''
 
 
     /*
@@ -98,7 +91,7 @@
         url="https://housesof.world/location/{location.country.slug}/{location.slug}"
         title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
         description="{$site.seo_name} {location.name} {location.description}"
-        image={latestPhoto ? fn.getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
+        image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
     />
 </svelte:head>
 
@@ -129,6 +122,7 @@
         <div class="place__description">
             <div class="wrapper">
                 <p>{$site.description}</p>
+
                 {#if location.description}
                 <p>
                     Houses Of
@@ -142,7 +136,7 @@
                 {#if photos.length}
                 <p class="updated style-caps">
                     <strong>Updated</strong>
-                    <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
+                    <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
                 </p>
 
                 <ToggleLayout />
@@ -166,7 +160,7 @@
             {#if photos.length}
             <p class="updated style-caps">
                 <strong>Updated</strong>
-                <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
+                <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
             </p>
             {/if}
         </aside>
diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte
index acab8bd..d0fee5a 100644
--- a/src/routes/viewer/[country]/[location]/[photo].svelte
+++ b/src/routes/viewer/[country]/[location]/[photo].svelte
@@ -32,15 +32,10 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { goto } from '@sapper/app'
-    import * as fn from '../../../../utils/functions'
+    import { getThumbnail } from '../../../../utils/functions'
     const { page } = stores()
     const dispatch = createEventDispatcher()
 
-    // Dependencies
-    import dayjs from 'dayjs'
-    import advancedFormat from 'dayjs/plugin/advancedFormat'
-    dayjs.extend(advancedFormat)
-
     // Components
     import IconGlobe from '../../../../atoms/IconGlobe'
     import IconCross from '../../../../atoms/IconCross'
diff --git a/src/utils/functions.js b/src/utils/functions.js
index be52c89..c6518ed 100644
--- a/src/utils/functions.js
+++ b/src/utils/functions.js
@@ -43,16 +43,93 @@ export const lettersToSpan = string => {
 
 
 /*
-** Check if element is in viewport
+** Format date from an input date
 */
-export const isInViewport = element => {
-    const bounding = element.getBoundingClientRect()
-    return (
-        bounding.top >= 0 &&
-        bounding.left >= 0 &&
-        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
-    )
+export const formatDate = (originDate, format) => {
+    let output
+    const date = new Date(originDate)
+
+    // Date
+    const day = new Intl.DateTimeFormat('default', { day: 'numeric' }).format(date)
+    const day2 = new Intl.DateTimeFormat('default', { day: '2-digit' }).format(date)
+    const mthSh = new Intl.DateTimeFormat('default', { month: 'short' }).format(date)
+    const mthNb = new Intl.DateTimeFormat('default', { month: '2-digit' }).format(date)
+    const year = new Intl.DateTimeFormat('default', { year: 'numeric' }).format(date)
+    const ord = ['th', 'st', 'nd', 'rd'][(day > 3 && day < 21) || day % 10 > 3 ? 0 : day % 10]
+
+    // Full format (MMM Do, YYYY)
+    if (format === 'FULL') {
+        output = `${mthSh} ${day + ord}, ${year}`
+    }
+
+    // Fulltime format (YYYY-MM-DDThh:mm:ss)
+    else if (format === 'DATETIME') {
+        output = date.toISOString()
+    }
+
+    return output
+}
+
+
+/*
+** Relative time from an input date
+*/
+export const relativeTime = (originDate, limit = 0) => {
+    const date = new Date(originDate)
+    const diff = Number(new Date()) - date
+
+    // Define units in milliseconds
+    const mn = 60 * 1000
+    const hr = mn * 60
+    const day = hr * 24
+    const mth = day * 30
+    const yr = day * 365
+
+    // Variables
+    let amount
+    let unit
+    let output
+
+    // Difference is seconds
+    if (diff < mn) {
+        amount = Math.round(diff / 1000)
+        unit = 'second'
+    }
+    // Difference is minutes
+    else if (diff < hr) {
+        amount = Math.round(diff / mn)
+        unit = 'minute'
+    }
+    // Difference is hours
+    else if (diff < day) {
+        amount = Math.round(diff / hr)
+        unit = 'hour'
+    }
+    // Difference is days
+    else if (diff < mth) {
+        amount = Math.round(diff / day)
+        unit = 'day'
+    }
+    // Difference is months
+    else if (diff < yr) {
+        amount = Math.round(diff / mth)
+        unit = 'month'
+    }
+    // Difference is years
+    else if (diff > yr) {
+        amount = Math.round(diff / yr)
+        unit = 'year'
+    }
+
+    // Define the output
+    output = `${amount} ${amount > 1 ? `${unit}s` : unit} ago`
+
+    // Detect if the difference is over the limit
+    if (diff > limit) {
+        output = formatDate(date, 'FULL')
+    }
+
+    return output
 }