From 163b46a198932a737dea0585da731ac32f5a8fb4 Mon Sep 17 00:00:00 2001 From: CanRau Date: Sat, 21 Dec 2019 19:49:07 -0500 Subject: [PATCH] feat: add lang suggestion toast --- package.json | 1 + src/components/MainLayout/fragments.js | 1 + src/components/MainLayout/index.js | 67 ++++++++++++++++++++++---- src/utils/toast.js | 24 ++++----- yarn.lock | 5 ++ 5 files changed, 77 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index bba00f5..fc2dc47 100644 --- a/package.json +++ b/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", diff --git a/src/components/MainLayout/fragments.js b/src/components/MainLayout/fragments.js index a43a922..18e5107 100644 --- a/src/components/MainLayout/fragments.js +++ b/src/components/MainLayout/fragments.js @@ -17,6 +17,7 @@ export const Fragments = graphql` ) { body frontmatter { + langToast assets { logo { image: childImageSharp { diff --git a/src/components/MainLayout/index.js b/src/components/MainLayout/index.js index c8d6e44..662fe4f 100644 --- a/src/components/MainLayout/index.js +++ b/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( + + {SiteMeta.frontmatter.langToast} + {alternate.title}? + , + { + 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) diff --git a/src/utils/toast.js b/src/utils/toast.js index 2eec4c1..96e5661 100644 --- a/src/utils/toast.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index 36fb59f..6ec6360 100644 --- a/yarn.lock +++ b/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"