Memoize the memoizers

This commit is contained in:
Eric Bailey
2024-03-14 18:24:04 -05:00
parent 7f178ffb88
commit 6a7f904457
2 changed files with 120 additions and 107 deletions
@@ -1,3 +1,4 @@
import React from 'react'
import {ModerationCause, ModerationCauseSource} from '@atproto/api' import {ModerationCause, ModerationCauseSource} from '@atproto/api'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@@ -25,107 +26,112 @@ export function useModerationCauseDescription(
const {_, i18n} = useLingui() const {_, i18n} = useLingui()
const globalLabelStrings = useGlobalLabelStrings() const globalLabelStrings = useGlobalLabelStrings()
const {labelDefs, labelers} = useLabelDefinitions() const {labelDefs, labelers} = useLabelDefinitions()
if (!cause) {
return { return React.useMemo(() => {
icon: Warning, if (!cause) {
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 { return {
icon: CircleBanSign, icon: Warning,
name: _(msg`User Blocked by "${cause.source.list.name}"`), name: _(msg`Content Warning`),
description: _( description: _(
msg`You have blocked this user. You cannot view their content.`, msg`Moderator has chosen to set a general warning on the content.`,
),
}
} else {
return {
icon: CircleBanSign,
name: _(msg`User Blocked`),
description: _(
msg`You have blocked this user. You cannot view their content.`,
), ),
} }
} }
} if (cause.type === 'blocking') {
if (cause.type === 'blocked-by') { if (cause.source.type === 'list') {
return { return {
icon: CircleBanSign, icon: CircleBanSign,
name: _(msg`User Blocking You`), name: _(msg`User Blocked by "${cause.source.list.name}"`),
description: _( description: _(
msg`This user has blocked you. You cannot view their content.`, msg`You have blocked this user. You cannot view their content.`,
), ),
} }
} } else {
if (cause.type === 'block-other') { return {
return { icon: CircleBanSign,
icon: CircleBanSign, name: _(msg`User Blocked`),
name: _(msg`Content Not Available`), description: _(
description: _( msg`You have blocked this user. You cannot view their content.`,
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 === 'blocked-by') {
if (cause.type === 'mute-word') { return {
return { icon: CircleBanSign,
icon: EyeSlash, name: _(msg`User Blocking You`),
name: _(msg`Post Hidden by Muted Word`), description: _(
description: _( msg`This user has blocked you. You cannot view their content.`,
msg`You've chosen to hide a word or tag within this post.`, ),
), }
} }
} if (cause.type === 'block-other') {
if (cause.type === 'hidden') { return {
return { icon: CircleBanSign,
icon: EyeSlash, name: _(msg`Content Not Available`),
name: _(msg`Post Hidden by You`), description: _(
description: _(msg`You have hidden this post`), msg`This content is not available because one of the users involved has blocked the other.`,
),
}
} }
} if (cause.type === 'muted') {
if (cause.type === 'label') { if (cause.source.type === 'list') {
const def = cause.labelDef || getDefinition(labelDefs, cause.label) return {
const strings = getLabelStrings(i18n.locale, globalLabelStrings, def) icon: EyeSlash,
const labeler = labelers.find(l => l.creator.did === cause.label.src) name: _(msg`Muted by "${cause.source.list.name}"`),
return { description: _(msg`You have muted this user`),
icon: }
def.identifier === '!no-unauthenticated' } else {
? EyeSlash return {
: def.severity === 'alert' icon: EyeSlash,
? Warning name: _(msg`Account Muted`),
: CircleInfo, description: _(msg`You have muted this account.`),
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 === 'mute-word') {
// should never happen return {
return { icon: EyeSlash,
icon: CircleInfo, name: _(msg`Post Hidden by Muted Word`),
name: '', description: _(
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])
} }
+21 -14
View File
@@ -1,3 +1,4 @@
import React from 'react'
import { import {
DEFAULT_LABEL_SETTINGS, DEFAULT_LABEL_SETTINGS,
BskyAgent, BskyAgent,
@@ -25,22 +26,28 @@ export function useMyLabelers() {
), ),
) )
const labelers = useLabelersDetailedInfoQuery({dids}) const labelers = useLabelersDetailedInfoQuery({dids})
return { const isLoading = prefs.isLoading || labelers.isLoading
isLoading: prefs.isLoading || labelers.isLoading, const error = prefs.error || labelers.error
error: prefs.error || labelers.error, return React.useMemo(() => {
data: labelers.data, return {
} isLoading,
error,
data: labelers.data,
}
}, [labelers, isLoading, error])
} }
export function useLabelDefinitions() { export function useLabelDefinitions() {
const labelers = useMyLabelers() const labelers = useMyLabelers()
return { return React.useMemo(() => {
labelDefs: Object.fromEntries( return {
(labelers.data || []).map(labeler => [ labelDefs: Object.fromEntries(
labeler.creator.did, (labelers.data || []).map(labeler => [
interpretLabelValueDefinitions(labeler), labeler.creator.did,
]), interpretLabelValueDefinitions(labeler),
), ]),
labelers: labelers.data || [], ),
} labelers: labelers.data || [],
}
}, [labelers])
} }