Restore translationkeys

src/client/src/auth/translationKeys/index.js

@@ -0,0 +1 @@
+export { default } from "./translationKeys.jsx";

src/client/src/auth/translationKeys/styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  /* background-color: red; */
+`;
+
+export const Keys = styled.span`
+  cursor: pointer;
+  padding: 0.2em;
+  color: black;
+  font-size: 13px;
+  font-weight: 100;
+`;

src/client/src/auth/translationKeys/translationKeys.jsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+import * as Styled from "./styles.js";
+import { withTranslation } from "react-i18next";
+
+const TranslationKeys = prop => {
+  const [selectedLanguage, setSelectedLanguage] = useState();
+
+  const languages = [
+    { id: 0, language: "de" },
+    { id: 1, language: "fr" },
+    { id: 2, language: "it" },
+    { id: 3, language: "en" },
+  ];
+
+  useEffect(() => {
+    let lang;
+
+    switch (prop.i18n.language) {
+      case "de":
+        lang = languages[0];
+        break;
+      case "fr":
+        lang = languages[1];
+        break;
+      case "it":
+        lang = languages[2];
+        break;
+      case "en":
+        lang = languages[3];
+        break;
+      default:
+        lang = languages[0];
+    }
+    setSelectedLanguage(lang);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prop.i18n.language]);
+
+  return (
+    <Styled.Container>
+      {languages.map((item, key) => (
+        <Styled.Keys
+          key={key}
+          onClick={() => {
+            setSelectedLanguage(item);
+            if (prop?.ignori18n) {
+              prop.handleSelectedLanguage(item.language);
+            } else {
+              prop.i18n.changeLanguage(item.language);
+            }
+          }}
+          style={{
+            color: selectedLanguage?.language === item.language ? "red" : "black",
+            textDecoration: selectedLanguage?.language === item.language ? "underline" : "none",
+          }}>
+          {item.language.toUpperCase()}
+        </Styled.Keys>
+      ))}
+    </Styled.Container>
+  );
+};
+
+const TranslatedKeys = withTranslation("common")(TranslationKeys);
+export default TranslatedKeys;

src/client/src/pages/settings/termSettings.jsx

@@ -4,9 +4,7 @@ import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
 import Markdown from "markdown-to-jsx";
 import { Button, Form, Modal, TextArea } from "semantic-ui-react";
-
 import TranslationKeys from "../../auth/translationKeys";
-
 import { draftTerms, getTermsDraft, publishTerms } from "../../api-lib/index";
 
 class TermSettings extends React.Component {
@@ -241,9 +239,6 @@ TermSettings.propTypes = {
   user: PropTypes.object,
 };
 
-// TermSettings.defaultProps = {
-// };
-
 const mapStateToProps = state => {
   return {
     user: state.core_user,