Locale switcher updates

2025-05-15 14:06:59 +00:00 · 2023-07-07 12:56:33 +02:00 · 2023-07-07 12:56:33 +02:00 · 5c2f3d5e3e
commit 5c2f3d5e3e
parent 4327a10dc9
5 changed files with 92 additions and 74 deletions
--- 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>
  );
 }

--- 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>
--- 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;
--- 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 (
--- 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,