react/lib/use-locale.ts

import { useRouter } from 'next/router'
import { useEffect } from 'react'
import useCurrentState from 'components/utils/use-current-state'

const DEFAULT_LOCALE = 'en-us'
const DEFAULT_TAB = 'guide'

export type LocaleTypes = {
  locale: string
  tabbar: string
}

const useLocale = (): LocaleTypes => {
  const { pathname } = useRouter()
  const [locale, setLocale, localeRef] = useCurrentState<string>(DEFAULT_LOCALE)
  const [tabbar, setTab, tabRef] = useCurrentState<string>(DEFAULT_TAB)

  useEffect(() => {
    const names = pathname.split('/').filter(r => !!r)
    const currentLocale = names[0] || DEFAULT_LOCALE
    const currentTabbar = names[1] || DEFAULT_TAB

    if (currentLocale !== localeRef.current) {
      setLocale(currentLocale)
    }

    if (currentTabbar !== tabRef.current) {
      setTab(currentTabbar)
    }
  }, [pathname])

  return {
    locale,
    tabbar,
  }
}

export default useLocale