From 4327a10dc9a098090335414ee9fed7eddbb66030 Mon Sep 17 00:00:00 2001 From: Henrik Larsson Date: Fri, 7 Jul 2023 11:46:16 +0200 Subject: [PATCH] Locale switcher --- components/icons/flag-en.tsx | 18 --- components/icons/flag-sv.tsx | 25 --- components/icons/github.tsx | 13 -- components/icons/language.tsx | 18 +++ .../ui/locale-switcher/locale-switcher.tsx | 144 +++++++----------- i18n-config.ts | 18 ++- lib/sanity/queries.tsx | 28 ++-- 7 files changed, 96 insertions(+), 168 deletions(-) delete mode 100644 components/icons/flag-en.tsx delete mode 100644 components/icons/flag-sv.tsx delete mode 100644 components/icons/github.tsx create mode 100644 components/icons/language.tsx diff --git a/components/icons/flag-en.tsx b/components/icons/flag-en.tsx deleted file mode 100644 index 2d4005b69..000000000 --- a/components/icons/flag-en.tsx +++ /dev/null @@ -1,18 +0,0 @@ - -export default function FlagEn ({ className = "w-6 h-auto" }: { className?: string }) { - return ( - - - - - - - - - - ) -} \ No newline at end of file diff --git a/components/icons/flag-sv.tsx b/components/icons/flag-sv.tsx deleted file mode 100644 index d219dea08..000000000 --- a/components/icons/flag-sv.tsx +++ /dev/null @@ -1,25 +0,0 @@ - -export default function FlagSv ({ className = "w-6 h-auto" }: { className?: string }) { - return ( - - - - - - - - - - - - - - - - - ) -} \ No newline at end of file diff --git a/components/icons/github.tsx b/components/icons/github.tsx deleted file mode 100644 index e74d90722..000000000 --- a/components/icons/github.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export default function GitHubIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/components/icons/language.tsx b/components/icons/language.tsx new file mode 100644 index 000000000..4d781a0b3 --- /dev/null +++ b/components/icons/language.tsx @@ -0,0 +1,18 @@ +export default function LanguageIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx index b3f2348e2..203ab0715 100644 --- a/components/ui/locale-switcher/locale-switcher.tsx +++ b/components/ui/locale-switcher/locale-switcher.tsx @@ -1,104 +1,68 @@ -import FlagEn from 'components/icons/flag-en'; -import FlagSv from 'components/icons/flag-sv'; +import LanguageIcon from 'components/icons/language'; import { DropdownMenu, DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, + DropdownMenuTrigger } from 'components/ui/dropdown/dropdown'; -import { useLocale } from 'next-intl'; import Link from 'next/link'; -import { usePathname, useRouter } from 'next/navigation'; +import { usePathname } from 'next/navigation'; import { useState } from 'react'; import { i18n } from '../../../i18n-config'; -export default function LocaleSwitcher() { - const pathName = usePathname() - const locale = useLocale(); - const [isOpen, setIsOpen] = useState(false) - const router = useRouter(); - - // Handle redirected pathname. +interface LocaleSwitcherProps { + current: string; + pageData: object; +} + +export default function LocaleSwitcher({ current, pageData }: LocaleSwitcherProps) { + const pathName = usePathname(); + + console.log(pageData); + const redirectedPathName = (locale: string) => { - if (!pathName) return '/' - const segments = pathName.split('/') - segments[1] = locale - return segments.join('/') - } + if (!pathName) return '/'; + const segments = pathName.split('/'); + segments[1] = locale; + return segments.join('/'); + }; - // Handle click on dropdown menu item (
  • ). - const handleClick = (e: any, locale: string) => { - e.preventDefault() - - const parent = e.target - - if (parent.nodeName !== 'LI') { - return - } - - let href = '/' - - const hasChildLink = parent.querySelector('a').href !== null - - if (hasChildLink) { - href = parent.querySelector('a').href - } - - router.push(`${redirectedPathName(locale)}`) - - setIsOpen(false) - } + const [isOpen, setIsOpen] = useState(false); return (
    - setIsOpen(!isOpen)}> - - - - -
      - {i18n.locales.map((locale) => { - let FlagIcon: any - - FlagIcon = i18n.flags[locale] - - return ( - handleClick(e, locale)} - > -
    • - setIsOpen(false)} - href={redirectedPathName(locale)} - > - - {locale} - -
      • -       - ) - })} -
    -     -     -
    - ) -} \ No newline at end of file + + + + +
      + {i18n.locales.map((locale) => { + if (current === locale.id) { + return; + } else { + return ( +
    • + + {locale.title} + +
      • + ); + } + })} +
    +     + + + ); +} diff --git a/i18n-config.ts b/i18n-config.ts index 258ff807e..c320efda0 100644 --- a/i18n-config.ts +++ b/i18n-config.ts @@ -1,13 +1,15 @@ -import FlagEn from "components/icons/flag-en" -import FlagSv from "components/icons/flag-sv" - export const i18n = { defaultLocale: 'sv', - locales: ['sv', 'en'], - flags: { - sv: FlagSv, - en: FlagEn - } + locales: [ + { + id: 'sv', + title: 'Swedish' + }, + { + id: 'en', + title: 'English' + } + ], } as const export type Locale = typeof i18n['locales'][number] \ No newline at end of file diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx index a19043412..62507fd09 100644 --- a/lib/sanity/queries.tsx +++ b/lib/sanity/queries.tsx @@ -2,7 +2,7 @@ export const docQuery = `*[_type in ["home", "page", "category", "product"] && d _type, "slug": slug.current, "locale": language -}` +}`; export const imageFields = ` alt, @@ -13,7 +13,7 @@ export const imageFields = ` _type, _ref, } -` +`; export const seoFields = ` title, @@ -21,7 +21,7 @@ export const seoFields = ` image { ${imageFields} } -` +`; // Construct our "Modules" GROQ export const modules = ` @@ -141,7 +141,7 @@ export const modules = ` }, }, } -` +`; export const reusableSection = ` _type == 'reusableSection' => { disabled, @@ -157,7 +157,7 @@ export const reusableSection = ` } } } -` +`; // Homepage query export const homePageQuery = `*[_type == "home" && slug.current == "/" && language == $locale][0] { @@ -167,7 +167,7 @@ export const homePageQuery = `*[_type == "home" && slug.current == "/" && langua "locale": language, "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{ title, - slug, + "slug": slug.current, "locale": language }, content[] { @@ -177,7 +177,7 @@ export const homePageQuery = `*[_type == "home" && slug.current == "/" && langua seo { ${seoFields} } -}` +}`; // Page query export const pageQuery = `*[_type == "page" && slug.current == $slug && language == $locale][0] { @@ -187,7 +187,7 @@ export const pageQuery = `*[_type == "page" && slug.current == $slug && language "locale": language, "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{ title, - slug, + "slug": slug.current, "locale": language }, content[] { @@ -196,7 +196,7 @@ export const pageQuery = `*[_type == "page" && slug.current == $slug && language seo { ${seoFields} } -}` +}`; // Product query export const productQuery = `*[_type == "product" && slug.current == $slug && language == $locale][0] { @@ -206,7 +206,7 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la "locale": language, "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{ title, - slug, + "slug": slug.current, "locale": language }, "product": { @@ -235,7 +235,7 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la seo { ${seoFields} } -}` +}`; // Category query export const categoryQuery = `*[_type == "category" && slug.current == $slug && language == $locale][0] { @@ -255,13 +255,13 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug && }, "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{ title, - slug, + "slug": slug.current, "locale": language }, seo { ${seoFields} } -}` +}`; // Site settings query export const siteSettingsQuery = `*[_type == "settings" && language == $locale][0] { @@ -301,4 +301,4 @@ export const siteSettingsQuery = `*[_type == "settings" && language == $locale][ reference-> } } -}` +}`;