From 7d711c3d823f35caa8eaf4750b9e736d4eb59173 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Mon, 14 Aug 2023 16:58:21 +0700
Subject: [PATCH] feat: add use locale hook & update locale switcher

---
 components/LanguageSwitcher.tsx | 41 +++++++++++----------------------
 hooks/useLocale.tsx             | 15 ++++++++----
 utils/locale.ts                 |  5 ++++
 3 files changed, 28 insertions(+), 33 deletions(-)
 create mode 100644 utils/locale.ts

diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index b31d044e..c74caf14 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -1,33 +1,18 @@
 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}
@@ -35,26 +20,26 @@ export function LanguageSwitcher() {
       </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>
             )
           })}
diff --git a/hooks/useLocale.tsx b/hooks/useLocale.tsx
index 96cb93db..15c816f2 100644
--- a/hooks/useLocale.tsx
+++ b/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
+}
diff --git a/utils/locale.ts b/utils/locale.ts
new file mode 100644
index 00000000..b333c8c8
--- /dev/null
+++ b/utils/locale.ts
@@ -0,0 +1,5 @@
+import { LOCALES } from '~/constant'
+
+export function getLocale(code: string) {
+  return LOCALES.find((locale) => locale.code === code)
+}