Paul Frazee
94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
|
|
import {useLingui} from '@lingui/react'
|
|
import {msg} from '@lingui/macro'
|
|
|
|
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
|
|
import {
|
|
usePreferencesQuery,
|
|
usePreferencesSetContentLabelMutation,
|
|
} from '#/state/queries/preferences'
|
|
|
|
import {useTheme, atoms as a} from '#/alf'
|
|
import {Text} from '#/components/Typography'
|
|
import * as ToggleButton from '#/components/forms/ToggleButton'
|
|
|
|
export function GlobalModerationLabelPref({
|
|
labelValueDefinition,
|
|
disabled,
|
|
}: {
|
|
labelValueDefinition: InterpretedLabelValueDefinition
|
|
disabled?: boolean
|
|
}) {
|
|
const {_} = useLingui()
|
|
const t = useTheme()
|
|
|
|
const {identifier} = labelValueDefinition
|
|
const {data: preferences} = usePreferencesQuery()
|
|
const {mutate, variables} = usePreferencesSetContentLabelMutation()
|
|
const savedPref = preferences?.moderationPrefs.labels[identifier]
|
|
const pref = variables?.visibility ?? savedPref ?? 'warn'
|
|
|
|
const allLabelStrings = useGlobalLabelStrings()
|
|
const labelStrings =
|
|
labelValueDefinition.identifier in allLabelStrings
|
|
? allLabelStrings[labelValueDefinition.identifier]
|
|
: {
|
|
name: labelValueDefinition.identifier,
|
|
description: `Labeled "${labelValueDefinition.identifier}"`,
|
|
}
|
|
|
|
const labelOptions = {
|
|
hide: _(msg`Hide`),
|
|
warn: _(msg`Warn`),
|
|
ignore: _(msg`Show`),
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
a.flex_row,
|
|
a.justify_between,
|
|
a.gap_sm,
|
|
a.py_md,
|
|
a.pl_lg,
|
|
a.pr_md,
|
|
a.align_center,
|
|
]}>
|
|
<View style={[a.gap_xs, {width: '50%'}]}>
|
|
<Text style={[a.font_bold]}>{labelStrings.name}</Text>
|
|
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
|
|
{labelStrings.description}
|
|
</Text>
|
|
</View>
|
|
<View style={[a.justify_center, {minHeight: 35}]}>
|
|
{!disabled && (
|
|
<ToggleButton.Group
|
|
label={_(
|
|
msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
|
|
)}
|
|
values={[pref]}
|
|
onChange={newPref =>
|
|
mutate({
|
|
label: identifier,
|
|
visibility: newPref[0] as LabelPreference,
|
|
labelerDid: undefined,
|
|
})
|
|
}>
|
|
<ToggleButton.Button name="ignore" label={labelOptions.ignore}>
|
|
{labelOptions.ignore}
|
|
</ToggleButton.Button>
|
|
<ToggleButton.Button name="warn" label={labelOptions.warn}>
|
|
{labelOptions.warn}
|
|
</ToggleButton.Button>
|
|
<ToggleButton.Button name="hide" label={labelOptions.hide}>
|
|
{labelOptions.hide}
|
|
</ToggleButton.Button>
|
|
</ToggleButton.Group>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|