-
-
-
-
-
-
- {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;