From c06f6541c5bfe8fbc1ab52cad4b4821c58625df8 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 1 Jul 2021 17:17:48 +0200
Subject: [PATCH] person-profile: one i18next instance per element

---
 .../person-profile/src/dbp-person-profile-demo.js | 10 +++++++---
 packages/person-profile/src/i18n.js               |  6 ++++--
 packages/person-profile/src/person-profile.js     | 15 +++++----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/person-profile/src/dbp-person-profile-demo.js b/packages/person-profile/src/dbp-person-profile-demo.js
index 25269ea1..dbce0a58 100644
--- a/packages/person-profile/src/dbp-person-profile-demo.js
+++ b/packages/person-profile/src/dbp-person-profile-demo.js
@@ -1,5 +1,5 @@
 import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
@@ -12,7 +12,8 @@ import {PersonSelect} from '@dbp-toolkit/person-select';
 export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.person = '';
         this.selectedPerson = '';
@@ -42,6 +43,10 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     update(changedProperties) {
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
+
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case 'auth':
@@ -61,7 +66,6 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
         const that = this;
 
         this.updateComplete.then(()=>{
diff --git a/packages/person-profile/src/i18n.js b/packages/person-profile/src/i18n.js
index 498d9f03..975c1993 100644
--- a/packages/person-profile/src/i18n.js
+++ b/packages/person-profile/src/i18n.js
@@ -1,6 +1,8 @@
-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file
diff --git a/packages/person-profile/src/person-profile.js b/packages/person-profile/src/person-profile.js
index c8118ba5..4ac5576b 100644
--- a/packages/person-profile/src/person-profile.js
+++ b/packages/person-profile/src/person-profile.js
@@ -1,7 +1,7 @@
 
 import JSONLD from '@dbp-toolkit/common/jsonld';
 import {css, html} from 'lit-element';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 
@@ -10,7 +10,8 @@ export class PersonProfile extends DBPLitElement {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.jsonld = null;
         this.value = '';
@@ -29,18 +30,11 @@ export class PersonProfile extends DBPLitElement {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.updateComplete.then(()=>{
-        });
-    }
-
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     break;
                 case "entryPointUrl": {
                     const that = this;
@@ -83,6 +77,7 @@ export class PersonProfile extends DBPLitElement {
     }
 
     render() {
+        const i18n = this._i18n;
         let role = i18n.t('person-profile.unknown');
         if (this.person !== null && this.person.roles !== undefined) {
             // roles are only defined for self-disclosure
-- 
GitLab