From 5c2f3d5e3ec2fe0e24d12642f8e5358ac3c82289 Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Fri, 7 Jul 2023 12:56:33 +0200
Subject: [PATCH] Locale switcher updates

---
 app/[locale]/[[...slug]]/page.tsx             | 51 +++++++++++------
 app/[locale]/layout.tsx                       | 18 +-----
 components/layout/header/header.tsx           | 57 ++++++++++---------
 .../ui/locale-switcher/locale-switcher.tsx    | 38 +++++++++----
 lib/sanity/queries.tsx                        |  2 +-
 5 files changed, 92 insertions(+), 74 deletions(-)

diff --git a/app/[locale]/[[...slug]]/page.tsx b/app/[locale]/[[...slug]]/page.tsx
index 2c8276360..0ab67b638 100644
--- a/app/[locale]/[[...slug]]/page.tsx
+++ b/app/[locale]/[[...slug]]/page.tsx
@@ -15,6 +15,9 @@ import ProductPage from './product-page';
 import ProductPagePreview from './product-page-preview';
 import SinglePage from './single-page';
 import SinglePagePreview from './single-page-preview';
+// Chrome
+import Footer from 'components/layout/footer';
+import Header from 'components/layout/header';
 
 /**
  * Render pages depending on type.
@@ -30,24 +33,40 @@ export default async function Page({ params }: { params: { slug: string[]; local
 
   const data = filterDataToSingleItem(pageData, isEnabled);
 
-  if (isEnabled) {
-    return (
-      <PreviewSuspense fallback="Loading...">
-        {docType === 'home' && <HomePagePreview query={query} queryParams={queryParams} />}
-        {docType === 'page' && <SinglePagePreview query={query} queryParams={queryParams} />}
-        {docType === 'product' && <ProductPagePreview query={query} queryParams={queryParams} />}
-        {docType === 'category' && <CategoryPagePreview query={query} queryParams={queryParams} />}
-      </PreviewSuspense>
-    );
-  }
+  const localeData = {
+    type: data._type,
+    locale: data.locale,
+    translations: data.translations
+  };
 
   return (
-    <>
-      {docType === 'home' && <HomePage data={data} />}
-      {docType === 'product' && <ProductPage data={data} />}
-      {docType === 'category' && <CategoryPage data={data} />}
-      {docType === 'page' && <SinglePage data={data} />}
-    </>
+    <div className="flex flex-col">
+      <Header localeData={localeData} />
+      <main className="flex-1">
+        <article>
+          {isEnabled ? (
+            <PreviewSuspense fallback="Loading...">
+              {docType === 'home' && <HomePagePreview query={query} queryParams={queryParams} />}
+              {docType === 'page' && <SinglePagePreview query={query} queryParams={queryParams} />}
+              {docType === 'product' && (
+                <ProductPagePreview query={query} queryParams={queryParams} />
+              )}
+              {docType === 'category' && (
+                <CategoryPagePreview query={query} queryParams={queryParams} />
+              )}
+            </PreviewSuspense>
+          ) : (
+            <>
+              {docType === 'home' && <HomePage data={data} />}
+              {docType === 'product' && <ProductPage data={data} />}
+              {docType === 'category' && <CategoryPage data={data} />}
+              {docType === 'page' && <SinglePage data={data} />}
+            </>
+          )}
+        </article>
+      </main>
+      <Footer />
+    </div>
   );
 }
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 817770125..3d2a7833c 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,5 +1,3 @@
-import Footer from 'components/layout/footer';
-import Header from 'components/layout/header';
 import { NextIntlClientProvider } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
@@ -10,8 +8,6 @@ const SITE_NAME = 'KM Storefront';
 const SITE_DESCRIPTION = 'Webb och digitalbyrå från Göteborg';
 const TWITTER_CREATOR = '@kodamera.se';
 const TWITTER_SITE = 'https://kodamera.se';
-const OG_IMAGE_URL = '/og-image.jpg';
-const OG_IMAGE_ALT = 'Kodamera';
 
 export const metadata = {
   title: {
@@ -19,16 +15,6 @@ export const metadata = {
     template: `%s | ${SITE_NAME}`
   },
   description: SITE_DESCRIPTION,
-  openGraph: {
-    images: [
-      {
-        url: OG_IMAGE_URL,
-        width: 1200,
-        height: 630,
-        alt: OG_IMAGE_ALT
-      }
-    ]
-  },
   robots: {
     follow: true,
     index: true
@@ -73,9 +59,7 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
     <html lang={locale} className={inter.variable}>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <Header />
-          <main className="flex-1">{children}</main>
-          <Footer />
+          {children}
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index f20752dbd..def85641d 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,63 +1,64 @@
-'use client'
+'use client';
 
-import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher'
-import Logo from 'components/ui/logo/logo'
+import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
+import Logo from 'components/ui/logo/logo';
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  navigationMenuTriggerStyle,
-} from 'components/ui/navigation-menu'
-import Link from 'next/link'
-import { FC } from 'react'
-import HeaderRoot from './header-root'
+  navigationMenuTriggerStyle
+} from 'components/ui/navigation-menu';
+import { useLocale } from 'next-intl';
+import Link from 'next/link';
+import { FC } from 'react';
+import HeaderRoot from './header-root';
 
-interface HeaderProps {}
+interface HeaderProps {
+  localeData: {
+    type: string;
+    locale: string;
+    translations: [];
+  };
+}
 
-const Header: FC<HeaderProps> = () => {
+const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
+  const locale = useLocale();
 
   return (
     <HeaderRoot>
       <div className="relative flex flex-col">
-        <div className="relative flex items-center w-full justify-between py-2 px-4 h-14 lg:h-16 lg:py-3 lg:px-8 2xl:px-16">
-
+        <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
           <div className="flex items-center">
             <Link
-              href="/"
-              className="cursor-pointer duration-100 ease-in-out absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
+              href={`/${locale}`}
+              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
               aria-label="Logo"
             >
               <Logo />
             </Link>
           </div>
 
-          <div className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
             <NavigationMenu delayDuration={0} className="hidden lg:block">
               <NavigationMenuList>
                 <NavigationMenuItem>
                   <Link href={'/kategori/junior'} legacyBehavior passHref>
-                    <NavigationMenuLink
-                      className={navigationMenuTriggerStyle()}
-                    >
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Junior
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={'/kategori/trojor'} legacyBehavior passHref>
-                    <NavigationMenuLink
-                      className={navigationMenuTriggerStyle()}
-                    >
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Tröjor
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={'/kategori/byxor'} legacyBehavior passHref>
-                    <NavigationMenuLink
-                      className={navigationMenuTriggerStyle()}
-                    >
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Byxor
                     </NavigationMenuLink>
                   </Link>
@@ -66,12 +67,12 @@ const Header: FC<HeaderProps> = () => {
             </NavigationMenu>
           </div>
           <div>
-            <LocaleSwitcher />
+            <LocaleSwitcher localeData={localeData} currentLocale={locale} />
           </div>
         </div>
       </div>
     </HeaderRoot>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
index 203ab0715..b471bd9c4 100644
--- a/components/ui/locale-switcher/locale-switcher.tsx
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -10,20 +10,34 @@ import { useState } from 'react';
 import { i18n } from '../../../i18n-config';
 
 interface LocaleSwitcherProps {
-  current: string;
-  pageData: object;
+  currentLocale: string;
+  localeData: {
+    type: string;
+    locale: string;
+    translations: [];
+  };
 }
 
-export default function LocaleSwitcher({ current, pageData }: LocaleSwitcherProps) {
+export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwitcherProps) {
   const pathName = usePathname();
-
-  console.log(pageData);
+  const translations = localeData.translations;
 
   const redirectedPathName = (locale: string) => {
-    if (!pathName) return '/';
-    const segments = pathName.split('/');
-    segments[1] = locale;
-    return segments.join('/');
+    if (!pathName || translations.length === 0) return '/';
+
+    if (translations.length > 0) {
+      const translation = translations.find((obj) => {
+        return obj['locale'] === locale;
+      });
+
+      if (translation) {
+        const url = `/${translation['locale']}${translation['slug']}`;
+
+        return url;
+      }
+    }
+
+    return '/';
   };
 
   const [isOpen, setIsOpen] = useState(false);
@@ -34,18 +48,18 @@ export default function LocaleSwitcher({ current, pageData }: LocaleSwitcherProp
         <DropdownMenuTrigger asChild>
           <button
             className={
-              'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-sm font-bold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
+              'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-xs font-bold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
             }
             aria-label="Language selector"
           >
             <LanguageIcon className="h-6 w-6" />
-            <span>{current}</span>
+            <span>{currentLocale}</span>
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="drop-shadow-xl">
           <ul className="">
             {i18n.locales.map((locale) => {
-              if (current === locale.id) {
+              if (currentLocale === locale.id) {
                 return;
               } else {
                 return (
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index 62507fd09..1e35dcbff 100644
--- a/lib/sanity/queries.tsx
+++ b/lib/sanity/queries.tsx
@@ -160,7 +160,7 @@ export const reusableSection = `
 `;
 
 // Homepage query
-export const homePageQuery = `*[_type == "home" && slug.current == "/" && language == $locale][0] {
+export const homePageQuery = `*[_type == "home" && language == $locale][0] {
   _type,
   title,
   "slug": slug.current,