Skip to content

store the language in sessionStorage instead localstorage #91

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

store the language in sessionStorage instead localstorage #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<any> & {language?: string};
type Props = GatsbyLinkProps<any> & { language?: string };

export const Link: React.FC<Props> = ({language, to, onClick, ...rest}) => {
export const Link: React.FC<Props> = ({ language, to, onClick, ...rest }) => {
const context = useContext(I18nextContext);
const urlLanguage = language || context.language;
const getLanguagePath = (language: string) => {
Expand All @@ -23,7 +23,7 @@ export const Link: React.FC<Props> = ({language, to, onClick, ...rest}) => {
hrefLang={urlLanguage}
onClick={(e) => {
if (language) {
localStorage.setItem(LANGUAGE_KEY, language);
sessionStorage.setItem(LANGUAGE_KEY, language);
}
if (onClick) {
onClick(e);
Expand Down
28 changes: 14 additions & 14 deletions src/plugin/wrapPageElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -26,7 +26,7 @@ const removePathPrefix = (pathname: string) => {
};

export const wrapPageElement = (
{element, props}: WrapPageElementBrowserArgs<any, PageContext>,
{ element, props }: WrapPageElementBrowserArgs<any, PageContext>,
{
i18nextOptions = {},
redirect = true,
Expand All @@ -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
Expand All @@ -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 || '';
Expand All @@ -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(
Expand All @@ -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
Expand All @@ -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);
});
Expand Down
18 changes: 9 additions & 9 deletions src/useI18next.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}` : '';
Expand Down Expand Up @@ -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);
};

Expand Down