diff --git a/src/components/Blacklist/index.tsx b/src/components/Blacklist/index.tsx index a8b8dae7f..33d421544 100644 --- a/src/components/Blacklist/index.tsx +++ b/src/components/Blacklist/index.tsx @@ -1,3 +1,4 @@ +import BlacktagsBadge from '@app/components/BlacktagsBadge'; import Badge from '@app/components/Common/Badge'; import Button from '@app/components/Common/Button'; import CachedImage from '@app/components/Common/CachedImage'; @@ -353,24 +354,33 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => { numeric="auto" /> ), - user: ( - - - - - {item.user.displayName} + user: + item.user != null ? ( + + + + + {item.user.displayName} + + + ) : item.blacktags ? ( + + - - ), + ) : ( + + ??? + + ), })} diff --git a/src/components/BlacklistBlock/index.tsx b/src/components/BlacklistBlock/index.tsx index 8d619aa3c..268996183 100644 --- a/src/components/BlacklistBlock/index.tsx +++ b/src/components/BlacklistBlock/index.tsx @@ -1,3 +1,4 @@ +import BlacktagsBadge from '@app/components/BlacktagsBadge'; import Badge from '@app/components/Common/Badge'; import Button from '@app/components/Common/Button'; import LoadingSpinner from '@app/components/Common/LoadingSpinner'; @@ -78,22 +79,33 @@ const BlacklistBlock = ({
- - - - - - - {data.user.displayName} + {data.user != null ? ( + <> + + + + + + + {data.user.displayName} + + - - + + ) : data.blacktags != null && data.blacktags != '' ? ( + <> + + {intl.formatMessage(messages.blacklistedby)}:  + + + + ) : null}
diff --git a/src/components/BlacktagsBadge/index.tsx b/src/components/BlacktagsBadge/index.tsx new file mode 100644 index 000000000..4da27f653 --- /dev/null +++ b/src/components/BlacktagsBadge/index.tsx @@ -0,0 +1,53 @@ +import Badge from '@app/components/Common/Badge'; +import Tooltip from '@app/components/Common/Tooltip'; +import { TagIcon } from '@heroicons/react/20/solid'; +import type { BlacklistItem } from '@server/interfaces/api/blacklistInterfaces'; +import type { Keyword } from '@server/models/common'; +import { useEffect, useState } from 'react'; + +interface BlacktagsBadgeProps { + data: BlacklistItem; +} + +const BlacktagsBadge = ({ data }: BlacktagsBadgeProps) => { + const [tagNamesBlacklistedFor, setTagNamesBlacklistedFor] = + useState('Loading...'); + + useEffect(() => { + if (data.blacktags == null) { + return; + } + + const keywordIds = data.blacktags.slice(1, -1).split(','); + Promise.all( + keywordIds.map(async (keywordId) => { + const res = await fetch(`/api/v1/keyword/${keywordId}`); + if (!res.ok) { + return ''; + } + const keyword: Keyword = await res.json(); + + return keyword.name; + }) + ).then((keywords) => { + setTagNamesBlacklistedFor(keywords.join(', ')); + }); + }, [data.blacktags]); + + return ( + + + + Blacktags + + + ); +}; + +export default BlacktagsBadge;