From 0d622ef69ffad5f7d590bb7875527a86063fa3d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 4 Oct 2021 13:05:02 +0200
Subject: [PATCH] Use reusable DiscoverText with count data

---
 src/components/atoms/DiscoverText.svelte | 11 +++++++++++
 src/routes/index.svelte                  |  9 +++------
 src/routes/photos.svelte                 | 16 ++++------------
 3 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 src/components/atoms/DiscoverText.svelte

diff --git a/src/components/atoms/DiscoverText.svelte b/src/components/atoms/DiscoverText.svelte
new file mode 100644
index 0000000..ee87bef
--- /dev/null
+++ b/src/components/atoms/DiscoverText.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+
+    const { count }: any = getContext('global')
+</script>
+
+<p class="discover">
+    Discover <strong>{count.photos} homes</strong><br>
+    from <strong>{count.locations} cities</strong>
+    of <strong>{count.countries} countries</strong>
+</p>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index fda6a33..f8b79fc 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,6 +5,7 @@
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import DiscoverText from '$components/atoms/DiscoverText.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
     import Locations from '$components/organisms/Locations.svelte'
@@ -13,7 +14,7 @@
 
     export let photos: any
 
-    const { settings, location, count }: any = getContext('global')
+    const { settings, location }: any = getContext('global')
     const { path } = $page
 </script>
 
@@ -43,11 +44,7 @@
     </section>
 
     <div class="homepage__ctas" id="ctas">
-        <p class="discover">
-            Discover <strong>{count.photos} homes</strong><br>
-            from <strong>{count.locations} cities</strong>
-            of <strong>{count.countries} countries</strong>
-        </p>
+        <DiscoverText />
 
         <div class="cards">
             <BoxCTA
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 38bcfbf..29758c0 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -1,20 +1,15 @@
 <script lang="ts">
     import { getContext } from 'svelte'
-    import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
-    import BoxCTA from '$components/atoms/BoxCTA.svelte'
-    import PhotoCard from '$components/molecules/PhotoCard.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
-    import Locations from '$components/organisms/Locations.svelte'
+    import DiscoverText from '$components/atoms/DiscoverText.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
 
     export let photos: any
 
-    const { settings, location, count }: any = getContext('global')
-    const { path } = $page
+    const { country: countries }: any = getContext('global')
 </script>
 
 <Metas
@@ -26,11 +21,8 @@
 <main class="photos">
     <section class="photos__intro">
         <h1 class="title-huge">Houses</h1>
-        <p class="discover">
-            Discover <strong>{count.photos} homes</strong><br>
-            from <strong>{count.locations} cities</strong>
-            of <strong>{count.countries} countries</strong>
-        </p>
+
+        <DiscoverText />
 
         <div class="filter">
             <span class="text-label filter__label">Filter photos</span>