From 7f37897502e309c3d9c5dd10a3757b7b55cfd576 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Mon, 12 Feb 2024 11:08:09 +0100
Subject: [PATCH 1/2] fix: add missing footer links

---
 components/Current/Footer/Navigation.tsx | 42 ++++++++++++-----
 components/Current/Footer/index.tsx      | 59 ++++++++++++++++--------
 types/components/current/footer.ts       | 13 +++++-
 3 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/components/Current/Footer/Navigation.tsx b/components/Current/Footer/Navigation.tsx
index 199748fc0..b49b48de7 100644
--- a/components/Current/Footer/Navigation.tsx
+++ b/components/Current/Footer/Navigation.tsx
@@ -1,17 +1,32 @@
-import { FooterNavigationProps } from "@/types/components/current/footer"
-import { InternalLink, ExternalLink } from "@/types/requests/footer"
+import {
+  FooterNavigationProps,
+  FooterNavigationItemProps,
+} from "@/types/components/current/footer"
+import Link from "next/link"
 
-function getLink(linkObject: InternalLink | ExternalLink) {
+function NavigationItem({ linkObject, lang }: FooterNavigationItemProps) {
   if (linkObject.__typename === "FooterNavigationLinksInternalLink") {
-    return {
-      title: linkObject.internal_link.link_text,
-      href: linkObject.internal_link.pageConnection.edges[0].node.url,
-    }
+    console.log({ foobar: JSON.stringify(linkObject) })
+    const href = `/${lang}${linkObject.internal_link.pageConnection.edges[0].node.url}`
+    return (
+      <li>
+        <Link href={href}>{linkObject.internal_link.link_text}</Link>
+      </li>
+    )
   }
-  return linkObject.external_link.link
+  return (
+    <li>
+      <a href={linkObject.external_link.link.href}>
+        {linkObject.external_link.link.title}
+      </a>
+    </li>
+  )
 }
 
-export default function Navigation({ linkGroups }: FooterNavigationProps) {
+export default function Navigation({
+  linkGroups,
+  lang,
+}: FooterNavigationProps) {
   return (
     <ul className="l-footer-sections global-footer__content__sections">
       {linkGroups.map((group) => {
@@ -20,9 +35,12 @@ export default function Navigation({ linkGroups }: FooterNavigationProps) {
             <div className="link-list">
               <h3 className="link-list-header">{group.title}</h3>
               <ul className="list-footer-pages">
-                {group.links.map((link) => {
-                  const linkItem = getLink(link)
-                  return <li key={linkItem.title}>{linkItem.title}</li>
+                {group.links.map((link, idx) => {
+                  console.log({ foobar: link })
+
+                  return (
+                    <NavigationItem key={idx} linkObject={link} lang={lang} />
+                  )
                 })}
               </ul>
             </div>
diff --git a/components/Current/Footer/index.tsx b/components/Current/Footer/index.tsx
index 001249c01..31e641d7d 100644
--- a/components/Current/Footer/index.tsx
+++ b/components/Current/Footer/index.tsx
@@ -1,17 +1,17 @@
-import { request } from "@/lib/request";
-import type { LangParams } from "@/types/params";
-import { GetFooterData } from "@/types/requests/footer";
-import { GetFooter } from "@/lib/graphql/Query/Footer.graphql";
-import Script from "next/script";
-import Image from "next/image";
-import Navigation from "./Navigation";
+import { request } from "@/lib/request"
+import type { LangParams } from "@/types/params"
+import { GetFooterData } from "@/types/requests/footer"
+import { GetFooter } from "@/lib/graphql/Query/Footer.graphql"
+import Script from "next/script"
+import Image from "next/image"
+import Navigation from "./Navigation"
 
 export default async function Footer({ lang }: LangParams) {
   const response = await request<GetFooterData>(GetFooter, {
     locale: lang,
-  });
+  })
 
-  const footerData = response.data.all_footer.items[0];
+  const footerData = response.data.all_footer.items[0]
 
   return (
     <footer className="global-footer">
@@ -38,8 +38,11 @@ export default async function Footer({ lang }: LangParams) {
           })}
         </ul>
 
-        <div data-js-collapsible="global-footer" className="collapsible-global-footer">
-          <Navigation linkGroups={footerData.navigation} />
+        <div
+          data-js-collapsible="global-footer"
+          className="collapsible-global-footer"
+        >
+          <Navigation lang={lang} linkGroups={footerData.navigation} />
 
           <div className="global-footer__content__bottom">
             <p className="newFooterTitle">
@@ -74,10 +77,14 @@ export default async function Footer({ lang }: LangParams) {
                       >
                         <Image
                           alt={
-                            footerData.app_downloads.app_store.imageConnection.edges[0].node.title
+                            footerData.app_downloads.app_store.imageConnection
+                              .edges[0].node.title
                           }
                           height={45}
-                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
+                          src={
+                            footerData.app_downloads.app_store.imageConnection
+                              .edges[0].node.url
+                          }
                           unoptimized
                           width={135}
                         />
@@ -98,11 +105,13 @@ export default async function Footer({ lang }: LangParams) {
                       >
                         <Image
                           alt={
-                            footerData.app_downloads.google_play.imageConnection.edges[0].node.title
+                            footerData.app_downloads.google_play.imageConnection
+                              .edges[0].node.title
                           }
                           height={45}
                           src={
-                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
+                            footerData.app_downloads.google_play.imageConnection
+                              .edges[0].node.url
                           }
                           unoptimized
                           width={135}
@@ -159,7 +168,9 @@ display: none;
             </p>
           </div>
           <div className="global-footer__social-media" id="social-icons">
-            <h3 className="heading-5 u-uppercase">{footerData.social_media.title}</h3>
+            <h3 className="heading-5 u-uppercase">
+              {footerData.social_media.title}
+            </h3>
             <a
               href={footerData.social_media.facebook.href}
               rel="noopener"
@@ -174,7 +185,9 @@ display: none;
                 role="img"
                 aria-labelledby="social-icons facebook-icon"
               >
-                <title id="facebook-icon">{footerData.social_media.facebook.title}</title>
+                <title id="facebook-icon">
+                  {footerData.social_media.facebook.title}
+                </title>
                 <use xlinkHref="/Static/img/icons/sprites.svg#icon-facebook"></use>
               </svg>
             </a>
@@ -192,7 +205,9 @@ display: none;
                 role="img"
                 aria-labelledby="social-icons twitter-icon"
               >
-                <title id="twitter-icon">{footerData.social_media.twitter.title}</title>
+                <title id="twitter-icon">
+                  {footerData.social_media.twitter.title}
+                </title>
                 <use xlinkHref="/Static/img/icons/sprites.svg#icon-twitter"></use>
               </svg>
             </a>
@@ -210,13 +225,17 @@ display: none;
                 role="img"
                 aria-labelledby="social-icons instagram-icon"
               >
-                <title id="instagram-icon">{footerData.social_media.instagram.title}</title>
+                <title id="instagram-icon">
+                  {footerData.social_media.instagram.title}
+                </title>
                 <use xlinkHref="/Static/img/icons/sprites.svg#icon-instagram"></use>
               </svg>
             </a>
           </div>
           <div className="global-footer__trip-advisor">
-            <h3 className="heading-5 u-uppercase">{footerData.trip_advisor.title}</h3>
+            <h3 className="heading-5 u-uppercase">
+              {footerData.trip_advisor.title}
+            </h3>
             <Image
               alt="Trip Advisor logotype"
               height={24}
diff --git a/types/components/current/footer.ts b/types/components/current/footer.ts
index fb89bc1ae..c1c0755e2 100644
--- a/types/components/current/footer.ts
+++ b/types/components/current/footer.ts
@@ -1,5 +1,16 @@
-import { NavigationItem } from "@/types/requests/footer"
+import { Lang } from "@/types/lang"
+import {
+  ExternalLink,
+  InternalLink,
+  NavigationItem,
+} from "@/types/requests/footer"
 
 export type FooterNavigationProps = {
   linkGroups: NavigationItem[]
+  lang: Lang
+}
+
+export type FooterNavigationItemProps = {
+  linkObject: InternalLink | ExternalLink
+  lang: Lang
 }

From 8501f5b7b8945d6371df62f19021bc897e36f169 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Mon, 12 Feb 2024 11:39:33 +0100
Subject: [PATCH 2/2] chore: remove console.logs

---
 components/Current/Footer/Navigation.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/Current/Footer/Navigation.tsx b/components/Current/Footer/Navigation.tsx
index b49b48de7..50bc4e56f 100644
--- a/components/Current/Footer/Navigation.tsx
+++ b/components/Current/Footer/Navigation.tsx
@@ -6,7 +6,6 @@ import Link from "next/link"
 
 function NavigationItem({ linkObject, lang }: FooterNavigationItemProps) {
   if (linkObject.__typename === "FooterNavigationLinksInternalLink") {
-    console.log({ foobar: JSON.stringify(linkObject) })
     const href = `/${lang}${linkObject.internal_link.pageConnection.edges[0].node.url}`
     return (
       <li>
@@ -36,8 +35,6 @@ export default function Navigation({
               <h3 className="link-list-header">{group.title}</h3>
               <ul className="list-footer-pages">
                 {group.links.map((link, idx) => {
-                  console.log({ foobar: link })
-
                   return (
                     <NavigationItem key={idx} linkObject={link} lang={lang} />
                   )