feat: add lang suggestion toast

package.json

@@ -85,6 +85,7 @@
     "gatsby-transformer-sharp": "^2.3.9",
     "gray-percentage": "2.0.0",
     "hex2rgba": "0.0.1",
+    "js-cookie": "^2.2.1",
     "js-yaml": "3.13.1",
     "lodash": "4.17.15",
     "moment-timezone": "0.5.27",

src/components/MainLayout/fragments.js

@@ -17,6 +17,7 @@ export const Fragments = graphql`
     ) {
       body
       frontmatter {
+        langToast
         assets {
           logo {
             image: childImageSharp {

src/components/MainLayout/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-/* global window */
+/* global window, navigator */
 // eslint-disable-next-line no-unused-vars
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
@@ -13,6 +13,8 @@ import Header from '@components/Header'
 import ReferrerMessages from '@components/ReferrerMessages'
 import Footer from '@components/Footer'
 import * as QS from '@gaiama/query-string'
+import Cookies from 'js-cookie'
+import { toast } from '@root/src/utils/toast.js'
 import '@src/utils/fontawesome'
 import {
   media,
@@ -35,6 +37,21 @@ import 'react-toastify/dist/ReactToastify.css'
 //   `Symbol`,
 // ]
 
+// based on https://stackoverflow.com/a/52112155/3484824
+const getNavigatorLanguage = () => {
+  let lang = ``
+  if (navigator.languages && navigator.languages.length) {
+    lang = navigator.languages[0]
+  } else {
+    lang =
+      navigator.userLanguage ||
+      navigator.language ||
+      navigator.browserLanguage ||
+      `en`
+  }
+  return lang.includes(`-`) ? lang.split(`-`)[0] : lang
+}
+
 const getLangFactory = languages => (lang, alternate = false) => {
   if (alternate) {
     const alternates = languages.filter(l => l.node.frontmatter.id !== lang)
@@ -105,6 +122,45 @@ const isDev = process.env.NODE_ENV !== `production`
 
 const MainLayout = props => {
   const [colorMode, setColorMode] = useColorMode()
+  const {
+    pageContext,
+    wrapperStyles,
+    data: { site, SiteMeta, languages, homepage, page, menu },
+    // localPolyfills,
+    // location,
+  } = props
+  const lang = pageContext.lang
+  const translations = page.fields.translations
+  const alternate = translations.find(x => x.id !== lang)
+
+  useEffect(() => {
+    const storedLang = Cookies.get(`nf_lang`)
+    if (storedLang === lang) return
+
+    const navigatorLang = getNavigatorLanguage()
+
+    if (navigatorLang !== lang) {
+      toast.warning(
+        <Fragment>
+          <span sx={{ mr: 1 }}>{SiteMeta.frontmatter.langToast}</span>
+          <a href={alternate.to}>{alternate.title}</a>?
+        </Fragment>,
+        {
+          position: toast.POSITION.TOP_CENTER,
+          autoClose: 25000,
+          closeOnClick: false,
+          onClick: () => {
+            Cookies.set(`nf_lang`, alternate.id)
+            window.location.replace(alternate.to)
+          },
+          onClose: () => {
+            Cookies.set(`nf_lang`, lang)
+          },
+        }
+      )
+    }
+  }, [lang, alternate, SiteMeta.frontmatter.langToast])
+
   useEffect(() => {
     function handleInstall(event) {
       console.log(`Thank you for installing our app!`, event)
@@ -121,17 +177,8 @@ const MainLayout = props => {
   }, [props.data.Accounts.frontmatter.accounts])
 
   isDev && console.log(`DEVMODE`, props)
-  const {
-    pageContext,
-    wrapperStyles,
-    data: { site, SiteMeta, languages, homepage, page, menu },
-    // localPolyfills,
-    location,
-  } = props
 
-  const lang = pageContext.lang
   // const i18nStore = getI18nStore(lang, pageContext.messages)
-  const translations = page.fields.translations
   const getLang = getLangFactory(languages.edges)
   const menuItems = menu.edges || []
   const mainMenu = generateMainMenu(menuItems)

src/utils/toast.js

@@ -1,32 +1,34 @@
-import { toast as T } from 'react-toastify'
+import { toast as toastify } from 'react-toastify'
 
 export const toast = (message, opts) =>
-  T(message, {
+  toastify(message, {
     ...opts,
-    type: T.TYPE.DEFAULT,
+    type: toastify.TYPE.DEFAULT,
   })
 
 toast.info = (message, opts) =>
-  T(message, {
+  toastify(message, {
     ...opts,
-    type: T.TYPE.INFO,
+    type: toastify.TYPE.INFO,
   })
 
 toast.success = (message, opts) =>
-  T(message, {
+  toastify(message, {
     ...opts,
-    type: T.TYPE.SUCCESS,
+    type: toastify.TYPE.SUCCESS,
   })
 
 toast.warning = (message, opts) =>
-  T(message, {
+  toastify(message, {
     ...opts,
-    type: T.TYPE.WARNING,
+    type: toastify.TYPE.WARNING,
   })
 
 toast.error = (message, opts) =>
-  T(message, {
+  toastify(message, {
     autoClose: 25000,
     ...opts,
-    type: T.TYPE.ERROR,
+    type: toastify.TYPE.ERROR,
   })
+
+toast.POSITION = toastify.POSITION

yarn.lock

@@ -10924,6 +10924,11 @@ jpeg-js@^0.3.4:
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.3.6.tgz#c40382aac9506e7d1f2d856eb02f6c7b2a98b37c"
   integrity sha512-MUj2XlMB8kpe+8DJUGH/3UJm4XpI8XEgZQ+CiHDeyrGoKPdW/8FJv6ku+3UiYm5Fz3CWaL+iXmD8Q4Ap6aC1Jw==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"