diff --git a/src/lib/moderation/useModerationCauseDescription.ts b/src/lib/moderation/useModerationCauseDescription.ts index 05757e0257..af05feae66 100644 --- a/src/lib/moderation/useModerationCauseDescription.ts +++ b/src/lib/moderation/useModerationCauseDescription.ts @@ -1,3 +1,4 @@ +import React from 'react' import {ModerationCause, ModerationCauseSource} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -25,107 +26,112 @@ export function useModerationCauseDescription( const {_, i18n} = useLingui() const globalLabelStrings = useGlobalLabelStrings() const {labelDefs, labelers} = useLabelDefinitions() - if (!cause) { - return { - icon: Warning, - name: _(msg`Content Warning`), - description: _( - msg`Moderator has chosen to set a general warning on the content.`, - ), - } - } - if (cause.type === 'blocking') { - if (cause.source.type === 'list') { + + return React.useMemo(() => { + if (!cause) { return { - icon: CircleBanSign, - name: _(msg`User Blocked by "${cause.source.list.name}"`), + icon: Warning, + name: _(msg`Content Warning`), description: _( - msg`You have blocked this user. You cannot view their content.`, - ), - } - } else { - return { - icon: CircleBanSign, - name: _(msg`User Blocked`), - description: _( - msg`You have blocked this user. You cannot view their content.`, + msg`Moderator has chosen to set a general warning on the content.`, ), } } - } - if (cause.type === 'blocked-by') { - return { - icon: CircleBanSign, - name: _(msg`User Blocking You`), - description: _( - msg`This user has blocked you. You cannot view their content.`, - ), - } - } - if (cause.type === 'block-other') { - return { - icon: CircleBanSign, - name: _(msg`Content Not Available`), - description: _( - msg`This content is not available because one of the users involved has blocked the other.`, - ), - } - } - if (cause.type === 'muted') { - if (cause.source.type === 'list') { - return { - icon: EyeSlash, - name: _(msg`Muted by "${cause.source.list.name}"`), - description: _(msg`You have muted this user`), - } - } else { - return { - icon: EyeSlash, - name: _(msg`Account Muted`), - description: _(msg`You have muted this account.`), + if (cause.type === 'blocking') { + if (cause.source.type === 'list') { + return { + icon: CircleBanSign, + name: _(msg`User Blocked by "${cause.source.list.name}"`), + description: _( + msg`You have blocked this user. You cannot view their content.`, + ), + } + } else { + return { + icon: CircleBanSign, + name: _(msg`User Blocked`), + description: _( + msg`You have blocked this user. You cannot view their content.`, + ), + } } } - } - if (cause.type === 'mute-word') { - return { - icon: EyeSlash, - name: _(msg`Post Hidden by Muted Word`), - description: _( - msg`You've chosen to hide a word or tag within this post.`, - ), + if (cause.type === 'blocked-by') { + return { + icon: CircleBanSign, + name: _(msg`User Blocking You`), + description: _( + msg`This user has blocked you. You cannot view their content.`, + ), + } } - } - if (cause.type === 'hidden') { - return { - icon: EyeSlash, - name: _(msg`Post Hidden by You`), - description: _(msg`You have hidden this post`), + if (cause.type === 'block-other') { + return { + icon: CircleBanSign, + name: _(msg`Content Not Available`), + description: _( + msg`This content is not available because one of the users involved has blocked the other.`, + ), + } } - } - if (cause.type === 'label') { - const def = cause.labelDef || getDefinition(labelDefs, cause.label) - const strings = getLabelStrings(i18n.locale, globalLabelStrings, def) - const labeler = labelers.find(l => l.creator.did === cause.label.src) - return { - icon: - def.identifier === '!no-unauthenticated' - ? EyeSlash - : def.severity === 'alert' - ? Warning - : CircleInfo, - name: strings.name, - description: strings.description, - source: - labeler?.creator.displayName || - (labeler?.creator.handle ? '@' + labeler?.creator.handle : undefined) || - cause.label.src, - sourceType: cause.source.type, + if (cause.type === 'muted') { + if (cause.source.type === 'list') { + return { + icon: EyeSlash, + name: _(msg`Muted by "${cause.source.list.name}"`), + description: _(msg`You have muted this user`), + } + } else { + return { + icon: EyeSlash, + name: _(msg`Account Muted`), + description: _(msg`You have muted this account.`), + } + } } - } - // should never happen - return { - icon: CircleInfo, - name: '', - description: ``, - } + if (cause.type === 'mute-word') { + return { + icon: EyeSlash, + name: _(msg`Post Hidden by Muted Word`), + description: _( + msg`You've chosen to hide a word or tag within this post.`, + ), + } + } + if (cause.type === 'hidden') { + return { + icon: EyeSlash, + name: _(msg`Post Hidden by You`), + description: _(msg`You have hidden this post`), + } + } + if (cause.type === 'label') { + const def = cause.labelDef || getDefinition(labelDefs, cause.label) + const strings = getLabelStrings(i18n.locale, globalLabelStrings, def) + const labeler = labelers.find(l => l.creator.did === cause.label.src) + return { + icon: + def.identifier === '!no-unauthenticated' + ? EyeSlash + : def.severity === 'alert' + ? Warning + : CircleInfo, + name: strings.name, + description: strings.description, + source: + labeler?.creator.displayName || + (labeler?.creator.handle + ? '@' + labeler?.creator.handle + : undefined) || + cause.label.src, + sourceType: cause.source.type, + } + } + // should never happen + return { + icon: CircleInfo, + name: '', + description: ``, + } + }, [labelDefs, labelers, globalLabelStrings, cause, _, i18n.locale]) } diff --git a/src/state/queries/preferences/moderation.ts b/src/state/queries/preferences/moderation.ts index 73ea3bc387..b404b5d32e 100644 --- a/src/state/queries/preferences/moderation.ts +++ b/src/state/queries/preferences/moderation.ts @@ -1,3 +1,4 @@ +import React from 'react' import { DEFAULT_LABEL_SETTINGS, BskyAgent, @@ -25,22 +26,28 @@ export function useMyLabelers() { ), ) const labelers = useLabelersDetailedInfoQuery({dids}) - return { - isLoading: prefs.isLoading || labelers.isLoading, - error: prefs.error || labelers.error, - data: labelers.data, - } + const isLoading = prefs.isLoading || labelers.isLoading + const error = prefs.error || labelers.error + return React.useMemo(() => { + return { + isLoading, + error, + data: labelers.data, + } + }, [labelers, isLoading, error]) } export function useLabelDefinitions() { const labelers = useMyLabelers() - return { - labelDefs: Object.fromEntries( - (labelers.data || []).map(labeler => [ - labeler.creator.did, - interpretLabelValueDefinitions(labeler), - ]), - ), - labelers: labelers.data || [], - } + return React.useMemo(() => { + return { + labelDefs: Object.fromEntries( + (labelers.data || []).map(labeler => [ + labeler.creator.did, + interpretLabelValueDefinitions(labeler), + ]), + ), + labelers: labelers.data || [], + } + }, [labelers]) }