From 73840883889f6f2d85a4e4cca6fd5a50eda89437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 15 Oct 2021 22:34:36 +0200
Subject: [PATCH] Use Newsletter data from API

---
 src/routes/subscribe.svelte | 76 ++++++++++++-------------------------
 1 file changed, 24 insertions(+), 52 deletions(-)

diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index c6e86c5..67a95e7 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+    import dayjs from 'dayjs'
     // Components
     import Metas from '$components/Metas.svelte'
+    import Image from '$components/atoms/Image.svelte'
     import Heading from '$components/molecules/Heading.svelte'
-    import Shop from '$components/organisms/Shop.svelte'
-    import Newsletter from '$components/organisms/Newsletter.svelte'
 
-    export let photos: any
+    export let issues: any
 </script>
 
 <Metas
@@ -22,51 +22,22 @@
     <section class="subscribe__issues">
         <h2 class="title-small">Past Issues</h2>
         <ul>
-            <li class="issue">
-                <a href="#">
-                    <img src="/images/issue-1.jpg" alt="">
-                    <dl>
-                        <dt>Issue #3</dt>
-                        <dd>
-                            <p>Adding Occitanie region to the mix!</p>
-                            <time>24/08/2020</time>
-                        </dd>
-                    </dl>
-                </a>
-            </li>
-            <li class="issue">
-                <a href="#">
-                    <img src="/images/issue-1.jpg" alt="">
-                    <dl>
-                        <dt>Issue #3</dt>
-                        <dd>
-                            <p>Adding Occitanie region to the mix!</p>
-                            <time>24/08/2020</time>
-                        </dd>
-                    </dl>
-                </a>
-            </li>
-            <li class="issue">
-                <a href="#">
-                    <img src="/images/issue-1.jpg" alt="">
-                    <dl>
-                        <dt>Issue #3</dt>
-                        <dd>
-                            <p>Adding Occitanie region to the mix!</p>
-                            <time>24/08/2020</time>
-                        </dd>
-                    </dl>
-                </a>
-            </li>
+            {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
+                <li class="issue">
+                    <a href={link} rel="external noreferrer noopener">
+                        <Image id={id} width={80} height={56} alt="Issue {issue} thumbnail" />
+                        <dl>
+                            <dt>Issue #{issue}</dt>
+                            <dd>
+                                <p>{title}</p>
+                                <time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
+                            </dd>
+                        </dl>
+                    </a>
+                </li>
+            {/each}
         </ul>
     </section>
-
-    <section class="grid-modules grid">
-            <div class="wrap">
-                <Shop />
-                <Newsletter />
-            </div>
-    </section>
 </main>
 
 
@@ -76,11 +47,12 @@
     export async function load ({ page, fetch, session, stuff }) {
         const res = await fetchAPI(`
             query {
-                photo (limit: 11, sort: ["-date_created"]) {
-                    image {
-                        id
-                        title
-                    }
+                newsletter (limit: -1, sort: "-issue") {
+                    issue
+                    title
+                    date_sent
+                    link
+                    thumbnail { id }
                 }
             }
         `)
@@ -89,7 +61,7 @@
 
         return {
             props: {
-                photos: data.photo,
+                issues: data.newsletter,
             }
         }
     }