userLanguage in browser instead of XHR (github#29782)

* userLanguage in browser instead of XHR

* refactors on pr 29782 (github#29798)

Co-authored-by: Peter Bengtsson <[email protected]>

Author: heiskr

components/hooks/useSession.ts

@@ -12,7 +12,6 @@ export default async function fetcher<JSON = any>(
 export type Session = {
   isSignedIn: boolean
   csrfToken?: string
-  userLanguage: string // en, es, ja, cn
 }
 
 // React hook version

components/hooks/useUserLanguage.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+import Cookies from 'js-cookie'
+
+import { languageKeys } from '../../lib/languages.js'
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../../lib/constants.js'
+
+export function useUserLanguage() {
+  const [userLanguage, setUserLanguage] = useState<string>('en')
+
+  useEffect(() => {
+    const languagePreferred = [
+      Cookies.get(PREFERRED_LOCALE_COOKIE_NAME),
+      navigator.language,
+      ...navigator.languages,
+    ]
+      .filter(Boolean)
+      // If it comes from `navigator.language` it most likely will contain
+      // the region. E.g. `en-US` but in our application, we don't use
+      // the region.
+      .map((lang) => lang && lang.slice(0, 2).toLowerCase())
+      .find((lang) => lang && languageKeys.includes(lang))
+    if (languagePreferred) {
+      setUserLanguage(languagePreferred)
+    }
+  }, [])
+
+  return { userLanguage }
+}

components/page-header/HeaderNotifications.tsx

@@ -6,7 +6,7 @@ import { useMainContext } from 'components/context/MainContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ExcludesNull } from 'components/lib/ExcludesNull'
 import { useVersion } from 'components/hooks/useVersion'
-import { useSession } from 'components/hooks/useSession'
+import { useUserLanguage } from 'components/hooks/useUserLanguage'
 import styles from './HeaderNotifications.module.scss'
 
 enum NotificationType {
@@ -23,8 +23,7 @@ export const HeaderNotifications = () => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { relativePath, allVersions, data, currentPathWithoutLanguage, page } = useMainContext()
-  const { session } = useSession()
-  const userLanguage = session?.userLanguage
+  const { userLanguage } = useUserLanguage()
   const { languages } = useLanguages()
 
   const { t } = useTranslation('header')

components/page-header/LanguagePicker.tsx

@@ -4,9 +4,7 @@ import Cookies from 'js-cookie'
 import { useLanguages } from 'components/context/LanguagesContext'
 import { Picker } from 'components/ui/Picker'
 import { useTranslation } from 'components/hooks/useTranslation'
-
-// This value is replicated in two places! See middleware/detect-language.js
-const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang'
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../../lib/constants.js'
 
 type Props = {
   variant?: 'inline'
@@ -31,6 +29,14 @@ export const LanguagePicker = ({ variant }: Props) => {
 
   function rememberPreferredLanguage(value: string) {
     try {
+      // The reason we use a cookie and not local storage is because
+      // this cookie value is used and needed by the server. For
+      // example, when doing `GET /some/page` we need the cookie
+      // to redirect to `Location: /ja/some/page`.
+      // It's important it's *not* an HttpOnly cookie because we
+      // need this in the client-side which is used to determine
+      // the UI about displaying notifications about preferred
+      // language if your cookie doesn't match the current URL.
       Cookies.set(PREFERRED_LOCALE_COOKIE_NAME, value, {
         expires: 365,
         secure: document.location.protocol !== 'http:',

lib/constants.js

@@ -0,0 +1 @@
+export const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang'

middleware/api/session.js

@@ -9,7 +9,6 @@ router.get('/', (req, res) => {
   res.json({
     isSignedIn: Boolean(req.cookies?.dotcom_user),
     csrfToken: req.csrfToken?.() || '',
-    userLanguage: req.userLanguage,
   })
 })
 

middleware/detect-language.js

@@ -1,11 +1,9 @@
 import languages, { languageKeys } from '../lib/languages.js'
 import parser from 'accept-language-parser'
 
-const chineseRegions = ['CN', 'HK']
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../lib/constants.js'
 
-// This value is replicated in two places! See <LanguagePicker/> component.
-// Note, the only reason this is exported is to benefit the tests.
-export const PREFERRED_LOCALE_COOKIE_NAME = 'preferredlang'
+const chineseRegions = ['CN', 'HK']
 
 function translationExists(language) {
   if (language.code === 'zh') {

middleware/fast-root-redirect.js

@@ -1,5 +1,6 @@
 import { cacheControlFactory } from './cache-control.js'
-import { PREFERRED_LOCALE_COOKIE_NAME, getLanguageCodeFromHeader } from './detect-language.js'
+import { getLanguageCodeFromHeader } from './detect-language.js'
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../lib/constants.js'
 
 const cacheControl = cacheControlFactory(0)
 

tests/routing/deprecated-enterprise-versions.js

@@ -3,7 +3,7 @@ import { describe, jest, test } from '@jest/globals'
 import enterpriseServerReleases from '../../lib/enterprise-server-releases.js'
 import { get, getDOM } from '../helpers/e2etest.js'
 import { SURROGATE_ENUMS } from '../../middleware/set-fastly-surrogate-key.js'
-import { PREFERRED_LOCALE_COOKIE_NAME } from '../../middleware/detect-language.js'
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../../lib/constants.js'
 
 jest.useFakeTimers({ legacyFakeTimers: true })
 

tests/routing/redirects.js

@@ -9,7 +9,7 @@ import enterpriseServerReleases, {
 import Page from '../../lib/page.js'
 import { get, head } from '../helpers/e2etest.js'
 import versionSatisfiesRange from '../../lib/version-satisfies-range.js'
-import { PREFERRED_LOCALE_COOKIE_NAME } from '../../middleware/detect-language.js'
+import { PREFERRED_LOCALE_COOKIE_NAME } from '../../lib/constants.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))