feat: add use locale hook & update locale switcher

components/LanguageSwitcher.tsx

@@ -1,60 +1,45 @@
 import { clsx } from 'clsx'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { LOCALES } from '~/constant'
+import { useLocale } from '~/hooks/useLocale'
+import { getLocale } from '~/utils/locale'
 import { Image } from './Image'
-import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './ui/Popover'
-
-function getLocale(code: string) {
- return LOCALES.find((locale) => locale.code === code)
-}
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from './ui/Popover'
 
 export function LanguageSwitcher() {
- let router = useRouter()
- let [localeCode, setLocaleCode] = useState(router.locale)
- let currentLocale = getLocale(localeCode)
-
- useEffect(() => {
- setLocaleCode(router.locale)
- }, [router.locale])
-
- function handleChange(newLocale: string) {
- router.push(router.pathname, router.asPath, { locale: newLocale })
- }
+ let [locale, localeCodes, updateLocale] = useLocale()
 
  return (
  <Popover>
  <PopoverTrigger className="p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded cursor-pointer">
  <Image
- src={currentLocale.flag}
- alt={currentLocale.name}
+ src={locale.flag}
+ alt={locale.name}
  width={20}
  height={20}
  shouldOpenLightbox={false}
  />
  </PopoverTrigger>
  <PopoverContent className="bg-white dark:bg-dark w-32" sideOffset={8}>
  <div className="space-y-1">
- {router.locales.map((code) => {
- let locale = getLocale(code)
+ {localeCodes.map((code) => {
+ let { flag, name } = getLocale(code)
  return (
  <PopoverClose
  key={code}
- onClick={() => handleChange(code)}
+ onClick={() => updateLocale(code)}
  className={clsx(
  'inline-flex w-full font-normal items-center gap-3 px-2 py-1 rounded w-fdivl text-left hover:bg-gray-100 dark:hover:bg-gray-700',
- code === localeCode && 'text-primary-500 dark:text-primary-400'
+ code === locale.code && 'text-primary-500 dark:text-primary-400'
  )}
  >
  <Image
- src={locale.flag}
- alt={locale.name}
+ src={flag}
+ alt={name}
  width={20}
  height={20}
  shouldOpenLightbox={false}
  className="shrink-0"
  />
- <span>{locale.name}</span>
+ <span>{name}</span>
  </PopoverClose>
  )
  })}

hooks/useLocale.tsx

@@ -1,9 +1,14 @@
 import { useRouter } from 'next/router'
+import { getLocale } from '~/utils/locale'
 
-let useLocale = () => {
- let { locale, defaultLocale } = useRouter()
+export function useLocale() {
+ let router = useRouter()
+ let locale = getLocale(router.locale)
+ let localeCodes = router.locales
 
- return locale || defaultLocale
-}
+ function updateLocale(code: string) {
+ router.push(router.pathname, router.asPath, { locale: code })
+ }
 
-export default useLocale
+ return [locale, localeCodes, updateLocale] as const
+}

utils/locale.ts

@@ -0,0 +1,5 @@
+import { LOCALES } from '~/constant'
+
+export function getLocale(code: string) {
+ return LOCALES.find((locale) => locale.code === code)
+}