From 79dd21b153aef09b6a7db8fe25889bdc31730582 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Wed, 30 Nov 2022 13:11:20 +0000
Subject: [PATCH] link site header/footer to API data

---
 src/components/SiteFooter/SiteFooter.svelte | 23 +++++++++++++++++-
 src/components/SiteHeader/SiteHeader.svelte | 26 ++++++++++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 883aad3c..d6b544f0 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -5,7 +5,8 @@
   import LegalLinks from './LegalLinks.svelte';
   import Referrals from './Referrals/index.svelte';
 
-  import data from './data.json';
+  import starterData from './data.json';
+  import { onMount } from 'svelte';
 
   interface Referral {
     url: URL;
@@ -18,6 +19,26 @@
    * Custom referrals to other Reuters Graphics projects
    */
   export let referrals: Referral[] = [];
+
+  let data = starterData;
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/footer/?' +
+          new URLSearchParams({
+            website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const footerData = (await response.json())[2];
+      // Dumb verification...
+      if (!footerData[0].company_description) return;
+      data = footerData;
+    } catch {
+      console.warn('Unable to fetch site footer data');
+    }
+  });
 </script>
 
 <footer
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index e8108954..8364fab9 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -2,17 +2,37 @@
 <script lang="ts">
   import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
   import NavBar from './NavBar/index.svelte';
-  import data from './data.json';
-  import { setContext } from 'svelte';
+  import starterData from './data.json';
+  import { onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import MenuIcon from './svgs/Menu.svelte';
   import MobileMenu from './MobileMenu/index.svelte';
 
   setContext('nav-active-section', writable(null));
 
-  const { sections } = data[0];
+  let data = starterData;
+
+  $: sections = data[0].sections;
 
   let isMobileMenuOpen = false;
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/header/?' +
+          new URLSearchParams({
+            website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const headerData = (await response.json())[0];
+      // Dumb verification...
+      if (!headerData[0].sections) return;
+      data = headerData;
+    } catch {
+      console.warn('Unable to fetch site header data');
+    }
+  });
 </script>
 
 <header