feat(WEB-104): add on-demand revalidation for cache

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import { languages } from "@/constants/languages"
 
@@ -18,9 +18,9 @@ export default function Desktop({
     setIsOpen(prevIsOpen => !prevIsOpen)
   }
 
-  function close() {
+  const close = useCallback(() => {
     setIsOpen(false)
-  }
+  }, [setIsOpen])
 
   useEffect(() => {
     function handleClickOutside(evt: Event) {
@@ -67,6 +67,7 @@ export default function Desktop({
         <li className={currentLanguage === languages.no ? styles.active : undefined}>
           <a className={styles.link} href={urls.no?.url}>{languages.no}</a>
         </li>
+        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
         <li className={currentLanguage === languages.da ? styles.active : undefined}>
           <a className={styles.link} href="https://www.scandichotels.dk/">{languages.da}</a>
         </li>

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -40,6 +40,7 @@ export default function Mobile({
         <li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
           <a href={urls.no?.url}>{languages.no}</a>
         </li>
+        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
         <li className={`navbar-language-selector__item ${currentLanguage === languages.da ? "is-active" : ""}`}>
           <a href="https://www.scandichotels.dk/">{languages.da}</a>
         </li>

components/Current/Header/MainMenu/index.tsx

@@ -95,7 +95,7 @@ export default function MainMenu({
             </ul>
 
             {urls ? (
-              <li className="nav-primary__item hidden-medium hidden-large">
+              <li className={styles.mobileLi}>
                 <Mobile currentLanguage={currentLanguage} urls={urls} />
               </li>
             ) : null}

components/Current/Header/MainMenu/mainMenu.module.css

@@ -1,12 +1,13 @@
 .mainMenu {
   background-color: #fff;
   background-image: none;
+  box-shadow: 0 0 7px rgba(0, 0, 0, .75);
+  max-height: 100%;
+  overflow: visible;
   position: fixed;
   top: 0;
-  max-height: 100%;
   width: 100%;
   z-index: 99999;
-  overflow: visible;
 }
 
 .container {
@@ -217,4 +218,8 @@
     display: none;
     padding-top: 0px;
   }
+
+  .mobileLi {
+    display: none;
+  }
 }

components/Current/Header/index.tsx

@@ -3,6 +3,8 @@ import { batchRequest } from "@/lib/batchRequest"
 import { request } from "@/lib/request"
 import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
 import { GetDaDeEnUrls, GetFiNoSvUrls } from "@/lib/graphql/Query/LanguageSwitcher.graphql"
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
 
 import MainMenu from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
@@ -41,7 +43,7 @@ export default async function Header({ lang, uid }: LangParams & HeaderProps) {
     }
 
     const currentLanguage = languages[lang]
-    const homeHref = `https://www.scandichotels.com/${lang}`
+    const homeHref = homeHrefs[env.NODE_ENV][lang]
     const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
     const logo = logoConnection.edges?.[0]?.node
     const topMenuMobileLinks = top_menu.links.filter(link => link.show_on_mobile)