Auto serve translated pages (#430)

src/components/Header.js

@@ -151,7 +151,6 @@ const StyledHeader = props => {
       const localizedPath = getLocalizedPath(pathname, locale.code)
 
       setLocalStorage('preferredLanguage', locale.code)
-      setLocalStorage('locale-opt-out', true)
 
       window.location.replace(localizedPath)
     }

src/hooks/useLocalization.js

@@ -0,0 +1,32 @@
+import { useContext, useEffect } from 'react'
+import { getLocalizedPath, LOCALES } from '../lib/config.mjs'
+import { useLocation } from '@reach/router'
+import { navigate } from 'gatsby'
+import useLangDetect from '../hooks/useLangDetect'
+import ContextClientSide from '../Context/ContextClientSide'
+
+const useLocalization = translation => {
+  const detectedLang = useLangDetect()
+
+  const { localization } = useContext(ContextClientSide)
+  const { locale, setLocale } = localization || {}
+
+  const location = useLocation()
+  const { pathname } = location
+
+  useEffect(() => {
+    const storedLanguage = LOCALES.find(f => f.code === detectedLang?.code)
+
+    if (storedLanguage && storedLanguage.code !== locale.code) {
+      setLocale(storedLanguage)
+
+      if (translation) {
+        const localizedPath = getLocalizedPath(pathname, storedLanguage.code)
+
+        navigate(localizedPath, { replace: true })
+      }
+    }
+  }, [detectedLang, translation, locale, pathname])
+}
+
+export default useLocalization

src/templates/PageLayout.js

@@ -15,7 +15,7 @@ import {
   darkDarkTheme,
   defaultDarkTheme,
 } from '../lib/theme'
-import LocaleSwitcherBanner from '../components/LocaleSwitcherBanner'
+import useLocalization from '../hooks/useLocalization'
 
 /**
  * @name PageLayout
@@ -95,6 +95,7 @@ const PageLayout = props => {
   }
 
   useAllClicks()
+  useLocalization(translation)
 
   useEffect(() => {
     if (document) {
@@ -153,7 +154,6 @@ const PageLayout = props => {
             }}
           />
         )}
-        {translation && <LocaleSwitcherBanner />}
       </Layout>
     </Context.Provider>
   )