Merge branch 'main' into repo-sync

components/Search.tsx

@@ -12,7 +12,7 @@ import { useMainContext } from './context/MainContext'
 import { DEFAULT_VERSION, useVersion } from 'components/hooks/useVersion'
 import { useQuery } from 'components/hooks/useQuery'
 import { Link } from 'components/Link'
-import { useLanguages } from './context/LanguagesContext'
+import { useSession } from 'components/lib/get-session'
 
 import styles from './Search.module.scss'
 
@@ -46,13 +46,16 @@ export function Search({
   const inputRef = useRef<HTMLInputElement>(null)
   const { t } = useTranslation('search')
   const { currentVersion } = useVersion()
-  const { languages } = useLanguages()
+  const session = useSession()
+  const languages = session?.languages
 
   // Figure out language and version for index
   const { searchVersions, nonEnterpriseDefaultVersion } = useMainContext()
   // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc.
   const version = searchVersions[currentVersion] || searchVersions[nonEnterpriseDefaultVersion]
-  const language = (Object.keys(languages).includes(router.locale || '') && router.locale) || 'en'
+  const language = languages
+    ? (Object.keys(languages).includes(router.locale || '') && router.locale) || 'en'
+    : 'en'
 
   const fetchURL = query
     ? `/search?${new URLSearchParams({

components/lib/get-session.ts

@@ -4,11 +4,19 @@ import { useRouter } from 'next/router'
 const MAX_CACHE = 5000 // milliseconds
 const RETRY = 500 // milliseconds
 
+type LanguageItem = {
+  name: string
+  nativeName?: string
+  code: string
+  hreflang: string
+  wip?: boolean
+}
+
 type Session = {
   isSignedIn: boolean
   csrfToken: string
-  language: string // en, es, ja, cn
   userLanguage: string // en, es, ja, cn
+  languages: Record<string, LanguageItem> // en... name nativeName code hreflang redirectPatterns dir wip
   theme: object // colorMode, nightTheme, dayTheme
   themeCSS: object // colorMode, nightTheme, dayTheme
 }

components/page-header/HeaderNotifications.tsx

@@ -5,7 +5,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 { useLanguages } from 'components/context/LanguagesContext'
+import { useSession } from 'components/lib/get-session'
 import styles from './HeaderNotifications.module.scss'
 
 enum NotificationType {
@@ -22,35 +22,37 @@ export const HeaderNotifications = () => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { relativePath, allVersions, data, currentPathWithoutLanguage, page } = useMainContext()
-  const { languages, userLanguage } = useLanguages()
+  const session = useSession()
+  const userLanguage = session?.userLanguage
+  const languages = session?.languages || {}
 
   const { t } = useTranslation('header')
 
   const translationNotices: Array<Notif> = []
-  if (router.locale !== 'en') {
+  if (router.locale === 'en') {
+    if (userLanguage && userLanguage !== 'en' && languages[userLanguage]?.wip === false) {
+      translationNotices.push({
+        type: NotificationType.TRANSLATION,
+        content: `This article is also available in <a href="/${userLanguage}${currentPathWithoutLanguage}">${languages[userLanguage]?.name}</a>.`,
+      })
+    }
+  } else {
     if (relativePath?.includes('/site-policy')) {
       translationNotices.push({
         type: NotificationType.TRANSLATION,
         content: data.reusables.policies.translation,
       })
-    } else if (router.locale && languages[router.locale].wip !== true) {
+    } else if (router.locale && languages[router.locale]?.wip !== true) {
       translationNotices.push({
         type: NotificationType.TRANSLATION,
         content: t('notices.localization_complete'),
       })
-    } else if (router.locale && languages[router.locale].wip) {
+    } else if (router.locale && languages[router.locale]?.wip) {
       translationNotices.push({
         type: NotificationType.TRANSLATION,
         content: t('notices.localization_in_progress'),
       })
     }
-  } else {
-    if (userLanguage && userLanguage !== 'en' && languages[userLanguage]?.wip === false) {
-      translationNotices.push({
-        type: NotificationType.TRANSLATION,
-        content: `This article is also available in <a href="/${userLanguage}${currentPathWithoutLanguage}">${languages[userLanguage].name}</a>.`,
-      })
-    }
   }
   const releaseNotices: Array<Notif> = []
   if (currentVersion === 'github-ae@latest') {

components/page-header/LanguagePicker.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import Cookies from 'js-cookie'
 
-import { useLanguages } from 'components/context/LanguagesContext'
+import { useSession } from 'components/lib/get-session'
 import { Picker } from 'components/ui/Picker'
 import { useTranslation } from 'components/hooks/useTranslation'
 
@@ -14,11 +14,16 @@ type Props = {
 
 export const LanguagePicker = ({ variant }: Props) => {
   const router = useRouter()
-  const { languages } = useLanguages()
+  const session = useSession()
+  const languages = session?.languages
   const locale = router.locale || 'en'
+
+  const { t } = useTranslation('picker')
+
+  if (!languages) return null
+
   const langs = Object.values(languages)
   const selectedLang = languages[locale]
-  const { t } = useTranslation('picker')
 
   // The `router.asPath` will always be without a hash in SSR
   // So to avoid a hydraration failure on the client, we have to