From f1e0f0894c01ca733a34087f72322e3dbd7f5b36 Mon Sep 17 00:00:00 2001 From: chenxizhang Date: Fri, 13 Aug 2021 17:31:18 +0800 Subject: [PATCH] store the language in sessionStorage instead localstorage --- src/Link.tsx | 14 +++++++------- src/plugin/wrapPageElement.tsx | 28 ++++++++++++++-------------- src/useI18next.ts | 18 +++++++++--------- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/Link.tsx b/src/Link.tsx index b716c74..0155996 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -1,11 +1,11 @@ -import React, {useContext} from 'react'; -import {I18nextContext} from './i18nextContext'; -import {Link as GatsbyLink, GatsbyLinkProps} from 'gatsby'; -import {LANGUAGE_KEY} from './types'; +import React, { useContext } from 'react'; +import { I18nextContext } from './i18nextContext'; +import { Link as GatsbyLink, GatsbyLinkProps } from 'gatsby'; +import { LANGUAGE_KEY } from './types'; -type Props = GatsbyLinkProps & {language?: string}; +type Props = GatsbyLinkProps & { language?: string }; -export const Link: React.FC = ({language, to, onClick, ...rest}) => { +export const Link: React.FC = ({ language, to, onClick, ...rest }) => { const context = useContext(I18nextContext); const urlLanguage = language || context.language; const getLanguagePath = (language: string) => { @@ -23,7 +23,7 @@ export const Link: React.FC = ({language, to, onClick, ...rest}) => { hrefLang={urlLanguage} onClick={(e) => { if (language) { - localStorage.setItem(LANGUAGE_KEY, language); + sessionStorage.setItem(LANGUAGE_KEY, language); } if (onClick) { onClick(e); diff --git a/src/plugin/wrapPageElement.tsx b/src/plugin/wrapPageElement.tsx index e612323..51841f7 100644 --- a/src/plugin/wrapPageElement.tsx +++ b/src/plugin/wrapPageElement.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import {withPrefix, WrapPageElementBrowserArgs} from 'gatsby'; +import { withPrefix, WrapPageElementBrowserArgs } from 'gatsby'; // @ts-ignore import browserLang from 'browser-lang'; -import {I18NextContext, LANGUAGE_KEY, PageContext, PluginOptions, LocaleNode} from '../types'; -import i18next, {i18n as I18n} from 'i18next'; -import {I18nextProvider} from 'react-i18next'; -import {I18nextContext} from '../i18nextContext'; +import { I18NextContext, LANGUAGE_KEY, PageContext, PluginOptions, LocaleNode } from '../types'; +import i18next, { i18n as I18n } from 'i18next'; +import { I18nextProvider } from 'react-i18next'; +import { I18nextContext } from '../i18nextContext'; import outdent from 'outdent'; const withI18next = (i18n: I18n, context: I18NextContext) => (children: any) => { @@ -26,7 +26,7 @@ const removePathPrefix = (pathname: string) => { }; export const wrapPageElement = ( - {element, props}: WrapPageElementBrowserArgs, + { element, props }: WrapPageElementBrowserArgs, { i18nextOptions = {}, redirect = true, @@ -36,17 +36,17 @@ export const wrapPageElement = ( }: PluginOptions ) => { if (!props) return; - const {data, pageContext, location} = props; - const {routed, language, languages, originalPath, defaultLanguage, path} = pageContext.i18n; + const { data, pageContext, location } = props; + const { routed, language, languages, originalPath, defaultLanguage, path } = pageContext.i18n; const isRedirect = redirect && !routed; if (isRedirect) { - const {search} = location; + const { search } = location; // Skip build, Browsers only if (typeof window !== 'undefined') { let detected = - window.localStorage.getItem(LANGUAGE_KEY) || + window.sessionStorage.getItem(LANGUAGE_KEY) || browserLang({ languages, fallback: language @@ -56,7 +56,7 @@ export const wrapPageElement = ( detected = language; } - window.localStorage.setItem(LANGUAGE_KEY, detected); + window.sessionStorage.setItem(LANGUAGE_KEY, detected); if (detected !== defaultLanguage) { const queryParams = search || ''; @@ -69,7 +69,7 @@ export const wrapPageElement = ( } } - const localeNodes: Array<{node: LocaleNode}> = data?.[localeJsonNodeName]?.edges || []; + const localeNodes: Array<{ node: LocaleNode }> = data?.[localeJsonNodeName]?.edges || []; if (languages.length > 1 && localeNodes.length === 0 && process.env.NODE_ENV === 'development') { console.error( @@ -94,7 +94,7 @@ export const wrapPageElement = ( ); } - const namespaces = localeNodes.map(({node}) => node.ns); + const namespaces = localeNodes.map(({ node }) => node.ns); // We want to set default namespace to a page namespace if it exists // and use other namespaces as fallback @@ -116,7 +116,7 @@ export const wrapPageElement = ( } }); - localeNodes.forEach(({node}) => { + localeNodes.forEach(({ node }) => { const parsedData = JSON.parse(node.data); i18n.addResourceBundle(node.language, node.ns, parsedData); }); diff --git a/src/useI18next.ts b/src/useI18next.ts index 162bd07..fe61c06 100644 --- a/src/useI18next.ts +++ b/src/useI18next.ts @@ -1,18 +1,18 @@ -import {Namespace, useTranslation, UseTranslationOptions} from 'react-i18next'; -import {useContext} from 'react'; -import {navigate as gatsbyNavigate} from 'gatsby'; -import {I18nextContext} from './i18nextContext'; -import {NavigateOptions} from '@reach/router'; -import {LANGUAGE_KEY} from './types'; +import { Namespace, useTranslation, UseTranslationOptions } from 'react-i18next'; +import { useContext } from 'react'; +import { navigate as gatsbyNavigate } from 'gatsby'; +import { I18nextContext } from './i18nextContext'; +import { NavigateOptions } from '@reach/router'; +import { LANGUAGE_KEY } from './types'; declare var __BASE_PATH__: string | undefined; declare var __PATH_PREFIX__: string | undefined; export const useI18next = (ns?: Namespace, options?: UseTranslationOptions) => { - const {i18n, t, ready} = useTranslation(ns, options); + const { i18n, t, ready } = useTranslation(ns, options); const context = useContext(I18nextContext); - const {routed, defaultLanguage, generateDefaultLanguagePage} = context; + const { routed, defaultLanguage, generateDefaultLanguagePage } = context; const getLanguagePath = (language: string) => { return generateDefaultLanguagePage || language !== defaultLanguage ? `/${language}` : ''; @@ -42,7 +42,7 @@ export const useI18next = (ns?: Namespace, options?: UseTranslationOptions) => { const languagePath = getLanguagePath(language); const pathname = to || removeLocalePart(removePrefix(window.location.pathname)); const link = `${languagePath}${pathname}${window.location.search}`; - localStorage.setItem(LANGUAGE_KEY, language); + sessionStorage.setItem(LANGUAGE_KEY, language); return gatsbyNavigate(link, options); };