From 48cf2423d121cf84f5c8e23467f56754f84195fe Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Thu, 4 Sep 2025 19:16:17 +0200
Subject: [PATCH] Fix MangaConnector Badge

---
 .../src/Components/Mangas/MangaCard.tsx         |  2 +-
 .../Components/Mangas/MangaConnectorIcon.tsx    | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/tranga-website/src/Components/Mangas/MangaCard.tsx b/tranga-website/src/Components/Mangas/MangaCard.tsx
index deda265..8e7405a 100644
--- a/tranga-website/src/Components/Mangas/MangaCard.tsx
+++ b/tranga-website/src/Components/Mangas/MangaCard.tsx
@@ -39,7 +39,7 @@ export default function MangaCard({
     return (
         <Badge
             badgeContent={manga?.mangaConnectorIds.map((id) => (
-                <MangaConnectorIcon key={id.mangaConnectorName} />
+                <MangaConnectorIcon mangaConnectorName={id.mangaConnectorName} />
             ))}
             className={'manga-card-badge'}
         >
diff --git a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
index d02ae14..76a171e 100644
--- a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
+++ b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
@@ -5,29 +5,30 @@ import { ApiContext } from '../../contexts/ApiContext.tsx'
 
 export default function MangaConnectorIcon({
     mangaConnector,
-    key,
+    mangaConnectorName,
 }: {
     mangaConnector?: MangaConnector
-    key?: string
+    mangaConnectorName?: string
 }): ReactNode {
     const Api = useContext(ApiContext)
 
     const [connector, setConnector] = useState<MangaConnector | undefined>(
         mangaConnector
-    )
+    );
 
     useEffect(() => {
+        console.log(mangaConnector, mangaConnectorName);
         if (mangaConnector) {
             setConnector(mangaConnector)
-            return
+            return;
         }
-        if (!key) return
-        Api.mangaConnectorDetail(key).then((result) => {
+        if (!mangaConnectorName) return;
+        Api.mangaConnectorDetail(mangaConnectorName).then((result) => {
             if (result.ok) {
                 setConnector(result.data)
             }
-        })
-    }, [Api, key, mangaConnector])
+        });
+    }, [Api, mangaConnectorName, mangaConnector]);
 
     return (
         <Tooltip title={connector?.name ?? 'loading'}>