Merge pull request #1259 from VocaDB/add-ability-to-mute-users

ゴチャゴチャうるせー！
VocaDB · Nov 1, 2022 · 56f5720 · 56f5720
2 parents c3135af + a25afcb
commit 56f5720
Show file tree

Hide file tree

Showing 24 changed files with 909 additions and 524 deletions.
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Activityfeed/ActivityEntryKnockout.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Activityfeed/ActivityEntryKnockout.tsx
@@ -4,7 +4,9 @@ import { useChangedFieldNames } from '@/Components/useChangedFieldNames';
 import { ActivityEntryContract } from '@/DataContracts/ActivityEntry/ActivityEntryContract';
 import { EntryContract } from '@/DataContracts/EntryContract';
 import { EntryType } from '@/Models/EntryType';
+import { useMutedUsers } from '@/MutedUsersContext';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -90,110 +92,117 @@ interface ActivityEntryKnockoutProps {
 	showDetails?: boolean;
 }
 
-export const ActivityEntryKnockout = ({
-	entry,
-	showDetails = false,
-}: ActivityEntryKnockoutProps): React.ReactElement => {
-	const { t } = useTranslation(['HelperRes', 'ViewRes']);
-
-	const activityFeedEventName = useActivityFeedEventName();
-	const changedFieldNames = useChangedFieldNames();
-	const entryTypeName = useEntryTypeName();
-
-	return (
-		<div className="message activityEntry ui-tabs ui-widget ui-widget-content ui-corner-all">
-			{entry.author ? (
-				<span>
-					<IconNameAndTypeLinkKnockout user={entry.author} />
-				</span>
-			) : (
-				<span>{t('HelperRes:ActivityFeedHelper.Someone')}</span>
-			)}{' '}
-			<span>{activityFeedEventName(entry)}</span>
-			{showDetails && entry.archivedVersion && (
-				<>
-					{' '}
+export const ActivityEntryKnockout = observer(
+	({
+		entry,
+		showDetails = false,
+	}: ActivityEntryKnockoutProps): React.ReactElement => {
+		const { t } = useTranslation(['HelperRes', 'ViewRes']);
+
+		const activityFeedEventName = useActivityFeedEventName();
+		const changedFieldNames = useChangedFieldNames();
+		const entryTypeName = useEntryTypeName();
+
+		const mutedUsers = useMutedUsers();
+		if (entry.author && mutedUsers.includes(entry.author.id)) return <></>;
+
+		return (
+			<div className="message activityEntry ui-tabs ui-widget ui-widget-content ui-corner-all">
+				{entry.author ? (
 					<span>
-						{entry.archivedVersion.changedFields &&
-							entry.archivedVersion.changedFields.length > 0 && (
-								<span>
-									(
-									{entry.archivedVersion.changedFields
-										.map((changedField) =>
-											changedFieldNames(
-												EntryType[
-													entry.entry.entryType as keyof typeof EntryType
-												],
-												changedField,
-											),
-										)
-										.join(', ')}
-									)
-								</span>
-							)}
-						{entry.archivedVersion.notes && (
-							<>
-								{' '}
-								<span>"{entry.archivedVersion.notes}"</span>
-							</>
-						)}{' '}
-						{entry.entry.entryType !== 'SongList' &&
-							entry.entry.entryType !== 'ReleaseEvent' && (
-								<span>
-									(
-									<Link
-										to={`/${entry.entry.entryType}/ViewVersion/${entry.archivedVersion.id}`}
-									>
-										{t('ViewRes:Misc.Details')}
-									</Link>
-									)
-								</span>
-							)}
+						<IconNameAndTypeLinkKnockout user={entry.author} />
 					</span>
-				</>
-			)}
-			<MomentJsTimeAgo as="small" className="pull-right extraInfo">
-				{entry.createDate}
-			</MomentJsTimeAgo>
-			<div className="media">
-				{entry.entry.mainPicture &&
-					(entry.entry.mainPicture.urlTinyThumb ||
-						entry.entry.mainPicture.urlSmallThumb) && (
-						<Link
-							className="pull-left"
-							to={getEntryUrl(entry.entry)}
-							title={entry.entry.additionalNames}
-						>
-							<img
-								src={
-									entry.entry.mainPicture.urlTinyThumb ||
-									entry.entry.mainPicture.urlSmallThumb
-								}
-								alt="thumb"
-								className="media-object coverPicThumb"
-								referrerPolicy="same-origin"
-							/>
-						</Link>
-					)}
-				<div className="media-body">
-					<h4 className="media-heading">
-						<Link
-							to={getEntryUrl(entry.entry)}
-							title={entry.entry.additionalNames}
-						>
-							<strong>{entry.entry.name}</strong>
-						</Link>
-						{entryTypeName(entry.entry) && (
-							<>
-								{' '}
-								<span>({entryTypeName(entry.entry)})</span>
-							</>
+				) : (
+					<span>{t('HelperRes:ActivityFeedHelper.Someone')}</span>
+				)}{' '}
+				<span>{activityFeedEventName(entry)}</span>
+				{showDetails && entry.archivedVersion && (
+					<>
+						{' '}
+						<span>
+							{entry.archivedVersion.changedFields &&
+								entry.archivedVersion.changedFields.length > 0 && (
+									<span>
+										(
+										{entry.archivedVersion.changedFields
+											.map((changedField) =>
+												changedFieldNames(
+													EntryType[
+														entry.entry.entryType as keyof typeof EntryType
+													],
+													changedField,
+												),
+											)
+											.join(', ')}
+										)
+									</span>
+								)}
+							{entry.archivedVersion.notes && (
+								<>
+									{' '}
+									<span>"{entry.archivedVersion.notes}"</span>
+								</>
+							)}{' '}
+							{entry.entry.entryType !== 'SongList' &&
+								entry.entry.entryType !== 'ReleaseEvent' && (
+									<span>
+										(
+										<Link
+											to={`/${entry.entry.entryType}/ViewVersion/${entry.archivedVersion.id}`}
+										>
+											{t('ViewRes:Misc.Details')}
+										</Link>
+										)
+									</span>
+								)}
+						</span>
+					</>
+				)}
+				<MomentJsTimeAgo as="small" className="pull-right extraInfo">
+					{entry.createDate}
+				</MomentJsTimeAgo>
+				<div className="media">
+					{entry.entry.mainPicture &&
+						(entry.entry.mainPicture.urlTinyThumb ||
+							entry.entry.mainPicture.urlSmallThumb) && (
+							<Link
+								className="pull-left"
+								to={getEntryUrl(entry.entry)}
+								title={entry.entry.additionalNames}
+							>
+								<img
+									src={
+										entry.entry.mainPicture.urlTinyThumb ||
+										entry.entry.mainPicture.urlSmallThumb
+									}
+									alt="thumb"
+									className="media-object coverPicThumb"
+									referrerPolicy="same-origin"
+								/>
+							</Link>
 						)}
-					</h4>
+					<div className="media-body">
+						<h4 className="media-heading">
+							<Link
+								to={getEntryUrl(entry.entry)}
+								title={entry.entry.additionalNames}
+							>
+								<strong>{entry.entry.name}</strong>
+							</Link>
+							{entryTypeName(entry.entry) && (
+								<>
+									{' '}
+									<span>({entryTypeName(entry.entry)})</span>
+								</>
+							)}
+						</h4>
 
-					{entry.entry.artistString && <span>{entry.entry.artistString}</span>}
+						{entry.entry.artistString && (
+							<span>{entry.entry.artistString}</span>
+						)}
+					</div>
 				</div>
 			</div>
-		</div>
-	);
-};
+		);
+	},
+);
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/ArchivedEntry/ArchivedObjectVersions.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/ArchivedEntry/ArchivedObjectVersions.tsx
@@ -5,7 +5,9 @@ import { useReasonNames } from '@/Components/useReasonNames';
 import { ArchivedVersionContract } from '@/DataContracts/Versioning/ArchivedVersionContract';
 import { EntryType } from '@/Models/EntryType';
 import { LoginManager } from '@/Models/LoginManager';
+import { useMutedUsers } from '@/MutedUsersContext';
 import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -18,7 +20,7 @@ interface ArchivedObjectVersionRowProps {
 	entryType: EntryType;
 }
 
-const ArchivedObjectVersionRow = React.memo(
+const ArchivedObjectVersionRow = observer(
 	({
 		archivedVersion,
 		linkFunc,
@@ -29,6 +31,14 @@ const ArchivedObjectVersionRow = React.memo(
 		const reasonNames = useReasonNames();
 		const changedFieldNames = useChangedFieldNames();
 
+		const mutedUsers = useMutedUsers();
+		if (
+			archivedVersion.author &&
+			mutedUsers.includes(archivedVersion.author.id)
+		) {
+			return <></>;
+		}
+
 		return (
 			<tr>
 				<td>

diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentBodyLarge.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentBodyLarge.tsx
@@ -4,7 +4,9 @@ import { ProfileIcon } from '@/Components/Shared/Partials/User/ProfileIcon';
 import { UserLink } from '@/Components/Shared/Partials/User/UserLink';
 import { CommentContract } from '@/DataContracts/CommentContract';
 import { LoginManager } from '@/Models/LoginManager';
+import { useMutedUsers } from '@/MutedUsersContext';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -16,12 +18,15 @@ interface CommentBodyLargeProps {
 	alwaysAllowDelete?: boolean;
 }
 
-export const CommentBodyLarge = React.memo(
+export const CommentBodyLarge = observer(
 	({
 		contract,
 		allowDelete,
 		alwaysAllowDelete = false,
 	}: CommentBodyLargeProps): React.ReactElement => {
+		const mutedUsers = useMutedUsers();
+		if (mutedUsers.includes(contract.author.id)) return <></>;
+
 		return (
 			<div className="comment media comment-large">
 				<Link

diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentKnockout.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentKnockout.tsx
@@ -4,6 +4,7 @@ import { CommentBodyKnockout } from '@/Components/Shared/Partials/Comment/Commen
 import { ProfileIconKnockout_ImageSize } from '@/Components/Shared/Partials/User/ProfileIconKnockout_ImageSize';
 import { UserApiContract } from '@/DataContracts/User/UserApiContract';
 import { ImageSize } from '@/Models/Images/ImageSize';
+import { useMutedUsers } from '@/MutedUsersContext';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -40,6 +41,9 @@ export const CommentKnockout = observer(
 	}: CommentKnockoutProps): React.ReactElement => {
 		const { t } = useTranslation(['ViewRes']);
 
+		const mutedUsers = useMutedUsers();
+		if (mutedUsers.includes(commentKnockoutStore.author.id)) return <></>;
+
 		return (
 			<div
 				className={classNames(

diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentWithEntryVertical.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Comment/CommentWithEntryVertical.tsx
@@ -1,6 +1,8 @@
 import { CommentEntryItem } from '@/Components/Shared/Partials/Comment/CommentEntryItem';
 import { PrintComment } from '@/Components/Shared/Partials/Comment/PrintComment';
 import { EntryWithCommentsContract } from '@/DataContracts/EntryWithCommentsContract';
+import { useMutedUsers } from '@/MutedUsersContext';
+import { uniq } from 'lodash-es';
 import React from 'react';
 
 interface CommentWithEntryVerticalProps {
@@ -13,6 +15,12 @@ export const CommentWithEntryVertical = React.memo(
 		entry,
 		maxLength = 2147483647,
 	}: CommentWithEntryVerticalProps): React.ReactElement => {
+		const authorIds = uniq(entry.comments.map((comment) => comment.author.id));
+
+		const mutedUsers = useMutedUsers();
+		if (authorIds.length === 1 && mutedUsers.includes(authorIds[0]))
+			return <></>;
+
 		return (
 			<div className="well well-transparent">
 				<CommentEntryItem entry={entry.entry} />