From d78ed6fe8f4ba79a19e9e514cf655ee1468bf0d1 Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Tue, 20 Aug 2024 08:30:40 +0200
Subject: [PATCH] Restore translationkeys

---
 src/client/src/auth/translationKeys/index.js  |  1 +
 src/client/src/auth/translationKeys/styles.js | 13 ++++
 .../auth/translationKeys/translationKeys.jsx  | 63 +++++++++++++++++++
 .../src/pages/settings/termSettings.jsx       |  5 --
 4 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 src/client/src/auth/translationKeys/index.js
 create mode 100644 src/client/src/auth/translationKeys/styles.js
 create mode 100644 src/client/src/auth/translationKeys/translationKeys.jsx

diff --git a/src/client/src/auth/translationKeys/index.js b/src/client/src/auth/translationKeys/index.js
new file mode 100644
index 000000000..d97ec103a
--- /dev/null
+++ b/src/client/src/auth/translationKeys/index.js
@@ -0,0 +1 @@
+export { default } from "./translationKeys.jsx";
diff --git a/src/client/src/auth/translationKeys/styles.js b/src/client/src/auth/translationKeys/styles.js
new file mode 100644
index 000000000..4b84b633e
--- /dev/null
+++ b/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;
+`;
diff --git a/src/client/src/auth/translationKeys/translationKeys.jsx b/src/client/src/auth/translationKeys/translationKeys.jsx
new file mode 100644
index 000000000..716e2b5bf
--- /dev/null
+++ b/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;
diff --git a/src/client/src/pages/settings/termSettings.jsx b/src/client/src/pages/settings/termSettings.jsx
index 6de957cf1..c1671e493 100644
--- a/src/client/src/pages/settings/termSettings.jsx
+++ b/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,