From df5ce4b08cde585c99cae9b65cab97921972467b Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:57:34 +0200
Subject: [PATCH] Filter out empty manga genre

---
 src/components/manga/MangaDetails.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 1670c9e6..5d14a1a8 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -9,7 +9,7 @@
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { styled, useTheme } from '@mui/material/styles';
-import { ComponentProps, useEffect } from 'react';
+import { ComponentProps, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import Link from '@mui/material/Link';
@@ -177,13 +177,14 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
 
 const DESCRIPTION_COLLAPSED_SIZE = 75;
 const DescriptionGenre = ({
-    manga: { description, genre: genres },
+    manga: { description, genre: mangaGenres },
 }: {
     manga: Pick<MangaType, 'description' | 'genre'>;
 }) => {
     const [isCollapsed, setIsCollapsed] = useLocalStorage('isDescriptionGenreCollapsed', true);
 
     const collapsedSize = description ? DESCRIPTION_COLLAPSED_SIZE : 0;
+    const genres = useMemo(() => mangaGenres.filter(Boolean), [mangaGenres]);
 
     return (
         <>