From b52f257f3c5766aaa7d32b97dd5c8a0f56c4bc35 Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Sat, 21 May 2022 09:33:03 +0300
Subject: [PATCH] Insert html into nickname list on React version of player
 page

Affects issues:
- Fixed #2329
---
 .../components/cards/player/NicknamesCard.js  | 42 +++++++++++++++++++
 .../dashboard/src/views/PlayerOverview.js     | 34 +--------------
 2 files changed, 43 insertions(+), 33 deletions(-)
 create mode 100644 Plan/react/dashboard/src/components/cards/player/NicknamesCard.js

diff --git a/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js b/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js
new file mode 100644
index 000000000..e5c4fe0f0
--- /dev/null
+++ b/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js
@@ -0,0 +1,42 @@
+import {useTranslation} from "react-i18next";
+import {useTheme} from "../../../hooks/themeHook";
+import {Card} from "react-bootstrap-v5";
+import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
+import {faServer, faSignature} from "@fortawesome/free-solid-svg-icons";
+import Scrollable from "../../Scrollable";
+import {faClock} from "@fortawesome/free-regular-svg-icons";
+import React from "react";
+
+const NicknamesCard = ({player}) => {
+    const {t} = useTranslation();
+    const {nightModeEnabled} = useTheme();
+    return (
+        <Card>
+            <Card.Header>
+                <h6 className="col-black">
+                    <Fa icon={faSignature}/> {t('html.label.seenNicknames')}
+                </h6>
+            </Card.Header>
+            <Scrollable>
+                <table className={"table table-striped mb-0" + (nightModeEnabled ? " table-dark" : '')}>
+                    <thead className="bg-purple">
+                    <tr>
+                        <th><Fa icon={faSignature}/> {t('html.label.nickname')}</th>
+                        <th><Fa icon={faServer}/> {t('html.label.server')}</th>
+                        <th><Fa icon={faClock}/> {t('html.label.lastSeen')}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {player.nicknames.map((nickname, i) => (<tr key={'nick-' + i}>
+                        <td dangerouslySetInnerHTML={{__html: nickname.nickname}}/>
+                        <td>{nickname.server}</td>
+                        <td>{nickname.date}</td>
+                    </tr>))}
+                    </tbody>
+                </table>
+            </Scrollable>
+        </Card>
+    );
+}
+
+export default NicknamesCard;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/views/PlayerOverview.js b/Plan/react/dashboard/src/views/PlayerOverview.js
index c23778486..32868f4ba 100644
--- a/Plan/react/dashboard/src/views/PlayerOverview.js
+++ b/Plan/react/dashboard/src/views/PlayerOverview.js
@@ -12,7 +12,6 @@ import {
     faLocationArrow,
     faServer,
     faSignal,
-    faSignature,
     faSkull,
     faUser,
     faUserPlus,
@@ -27,6 +26,7 @@ import {useTheme} from "../hooks/themeHook";
 import {usePlayer} from "./PlayerPage";
 import {useMetadata} from "../hooks/metadataHook";
 import {useTranslation} from "react-i18next";
+import NicknamesCard from "../components/cards/player/NicknamesCard";
 
 const PlayerOverviewCard = ({player}) => {
     const {t} = useTranslation();
@@ -140,38 +140,6 @@ const PlayerOverviewCard = ({player}) => {
     );
 }
 
-const NicknamesCard = ({player}) => {
-    const {t} = useTranslation();
-    const {nightModeEnabled} = useTheme();
-    return (
-        <Card>
-            <Card.Header>
-                <h6 className="col-black">
-                    <Fa icon={faSignature}/> {t('html.label.seenNicknames')}
-                </h6>
-            </Card.Header>
-            <Scrollable>
-                <table className={"table table-striped mb-0" + (nightModeEnabled ? " table-dark" : '')}>
-                    <thead className="bg-purple">
-                    <tr>
-                        <th><Fa icon={faSignature}/> {t('html.label.nickname')}</th>
-                        <th><Fa icon={faServer}/> {t('html.label.server')}</th>
-                        <th><Fa icon={faClock}/> {t('html.label.lastSeen')}</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {player.nicknames.map((nickname, i) => (<tr key={'nick-' + i}>
-                        <td>{nickname.nickname}</td>
-                        <td>{nickname.server}</td>
-                        <td>{nickname.date}</td>
-                    </tr>))}
-                    </tbody>
-                </table>
-            </Scrollable>
-        </Card>
-    );
-}
-
 const ConnectionsCard = ({player}) => {
     const {t} = useTranslation();
     const {nightModeEnabled} = useTheme();