Web: Moved translationKeys "Pin" and "Unpin" to "/static/locales/{lng}/Common.json"

packages/asc-web-common/components/PageLayout/i18n.js

@@ -1,19 +1,55 @@
 import i18n from "i18next";
-import en from "./locales/en/translation.json";
-import ru from "./locales/ru/translation.json";
-import { i18nBaseSettings } from "../../constants";
+import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import { LANGUAGE } from "../../constants";
 
-const newInstance = i18n.createInstance();
+//import LanguageDetector from "i18next-browser-languagedetector";
+// not like to use this?
+// have a look at the Quick start guide
+// for passing in lng and translations on init
 
-const resources = {
-  en: {
-    translation: en,
-  },
-  ru: {
-    translation: ru,
-  },
-};
+i18n
+  /*
+     load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
+     learn more: https://github.com/i18next/i18next-http-backend
+    */
+  .use(Backend)
+  /*
+     detect user language
+     learn more: https://github.com/i18next/i18next-browser-languageDetector
+    */
+  //.use(LanguageDetector)
+  /*
+     pass the i18n instance to react-i18next.
+    */
+  .use(initReactI18next)
+  /*
+     init i18next
+     for all options read: https://www.i18next.com/overview/configuration-options
+    */
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "languageOnly",
+    //debug: true,
 
-newInstance.init({ ...i18nBaseSettings, resources });
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
+    },
 
-export default newInstance;
+    backend: {
+      loadPath: (lng) => {
+        return `/static/locales/${lng}/Common.json`;
+      },
+    },
+
+    react: {
+      useSuspense: false,
+    },
+  });
+
+export default i18n;

packages/asc-web-common/components/PageLayout/index.js

@@ -22,6 +22,8 @@ import FloatingButton from "../FloatingButton";
 import { inject, observer } from "mobx-react";
 import { SelectableGroup } from "react-selectable-fast";
 import styled from "styled-components";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
 
 const StyledSelectableGroup = styled(SelectableGroup)`
   display: contents;
@@ -438,19 +440,23 @@ class PageLayout extends React.Component {
       );
     };
 
-    return isMobile || !uploadFiles ? (
-      renderPageLayout()
-    ) : (
-      <StyledSelectableGroup
-        dragging={dragging}
-        enableDeselect
-        resetOnStart
-        allowClickWithoutSelected={false}
-        duringSelection={this.duringSelection}
-        ignoreList={[".not-selectable", "draggable"]}
-      >
-        {renderPageLayout()}
-      </StyledSelectableGroup>
+    return (
+      <I18nextProvider i18n={i18n}>
+        {isMobile || !uploadFiles ? (
+          renderPageLayout()
+        ) : (
+          <StyledSelectableGroup
+            dragging={dragging}
+            enableDeselect
+            resetOnStart
+            allowClickWithoutSelected={false}
+            duringSelection={this.duringSelection}
+            ignoreList={[".not-selectable", "draggable"]}
+          >
+            {renderPageLayout()}
+          </StyledSelectableGroup>
+        )}
+      </I18nextProvider>
     );
   }
 }

packages/asc-web-common/components/PageLayout/locales/en/translation.json

@@ -1,4 +0,0 @@
-{
-  "Pin": "Pin",
-  "Unpin": "Unpin"
-}

packages/asc-web-common/components/PageLayout/locales/ru/translation.json

@@ -1,4 +0,0 @@
-{
-  "Pin": "Закрепить",
-  "Unpin": "Открепить"
-}

packages/asc-web-common/components/PageLayout/sub-components/article-pin-panel.js

@@ -1,13 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-
+import { withTranslation } from "react-i18next";
 import Text from "@appserver/components/text";
 import { tablet, smallTablet } from "@appserver/components/utils/device";
 import CatalogPinIcon from "../../../../../public/images/catalog.pin.react.svg";
 import CatalogUnpinIcon from "../../../../../public/images/catalog.unpin.react.svg";
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
-import i18n from "../i18n";
 
 const StyledCatalogPinIcon = styled(CatalogPinIcon)`
   ${commonIconsStyles}
@@ -62,7 +61,7 @@ const StyledArticlePinPanel = styled.div`
 const ArticlePinPanel = React.memo((props) => {
   //console.log("PageLayout ArticlePinPanel render");
 
-  const { pinned, onPin, onUnpin } = props;
+  const { pinned, onPin, onUnpin, t } = props;
   const textStyles = {
     as: "span",
     color: "#555F65",
@@ -77,14 +76,14 @@ const ArticlePinPanel = React.memo((props) => {
           <div className="icon-wrapper">
             <StyledCatalogUnpinIcon size="scale" />
           </div>
-          <Text {...textStyles}>{i18n.t("Unpin")}</Text>
+          <Text {...textStyles}>{t("Common:Unpin")}</Text>
         </div>
       ) : (
         <div onClick={onPin}>
           <div className="icon-wrapper">
             <StyledCatalogPinIcon size="scale" />
           </div>
-          <Text {...textStyles}>{i18n.t("Pin")}</Text>
+          <Text {...textStyles}>{t("Common:Pin")}</Text>
         </div>
       )}
     </StyledArticlePinPanel>
@@ -101,4 +100,6 @@ ArticlePinPanel.propTypes = {
   onUnpin: PropTypes.func,
 };
 
-export default ArticlePinPanel;
+const ArticlePinPanelWrapper = withTranslation("Common")(ArticlePinPanel);
+
+export default ArticlePinPanelWrapper;

public/locales/de/Common.json

@@ -25,5 +25,7 @@
   "FullAccess": "Voller Zugriff",
   "Documents": "Dokumente",
   "MeLabel": "Ich",
-  "Actions": "Vorgänge"
+  "Actions": "Vorgänge",
+  "Pin": "Anheften",
+  "Unpin": "Lösen"
 }

public/locales/en/Common.json

@@ -25,5 +25,7 @@
   "FullAccess": "Full access",
   "Documents": "Documents",
   "MeLabel": "Me",
-  "Actions": "Actions"
+  "Actions": "Actions",
+  "Pin": "Pin",
+  "Unpin": "Unpin"
 }

public/locales/ru/Common.json

@@ -25,5 +25,7 @@
   "FullAccess": "Полный доступ",
   "Documents": "Документы",
   "MeLabel": "Я",
-  "Actions": "Действия"
+  "Actions": "Действия",
+  "Pin": "Закрепить",
+  "Unpin": "Открепить"
 }

web/ASC.Web.Client/public/locales/de/translation.json

@@ -1,4 +0,0 @@
-{
-  "Pin": "Anheften",
-  "Unpin": "Lösen"
-}

web/ASC.Web.Client/public/locales/fr/translation.json

@@ -1,4 +0,0 @@
-{
-  "Pin": "Epingler",
-  "Unpin": "Désépingler"
-}

web/ASC.Web.Client/public/locales/it/translation.json

@@ -1,4 +0,0 @@
-{
-  "Pin": "Fissa",
-  "Unpin": "Non fissare"
-}