From 5f39ca31872af0554d79d9a6d0b070110385e9bd Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 21 Mar 2024 12:21:36 -0500 Subject: Mods UI fixes (#3296) * Fix report dialog buttons on Android by adjusting styles * Dry up label pref comp --- src/components/moderation/LabelPreference.tsx | 294 ++++++++++++++++++++++++++ 1 file changed, 294 insertions(+) create mode 100644 src/components/moderation/LabelPreference.tsx (limited to 'src/components/moderation/LabelPreference.tsx') diff --git a/src/components/moderation/LabelPreference.tsx b/src/components/moderation/LabelPreference.tsx new file mode 100644 index 000000000..7d4bd9c32 --- /dev/null +++ b/src/components/moderation/LabelPreference.tsx @@ -0,0 +1,294 @@ +import React from 'react' +import {View} from 'react-native' +import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' +import { + usePreferencesQuery, + usePreferencesSetContentLabelMutation, +} from '#/state/queries/preferences' +import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription' +import {getLabelStrings} from '#/lib/moderation/useLabelInfo' + +import {useTheme, atoms as a, useBreakpoints} from '#/alf' +import {Text} from '#/components/Typography' +import {InlineLink} from '#/components/Link' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo' +import * as ToggleButton from '#/components/forms/ToggleButton' + +export function Outer({children}: React.PropsWithChildren<{}>) { + return ( + + {children} + + ) +} + +export function Content({ + children, + name, + description, +}: React.PropsWithChildren<{ + name: string + description: string +}>) { + const t = useTheme() + const {gtPhone} = useBreakpoints() + + return ( + + {name} + + {description} + + + {children} + + ) +} + +export function Buttons({ + name, + values, + onChange, + ignoreLabel, + warnLabel, + hideLabel, +}: { + name: string + values: ToggleButton.GroupProps['values'] + onChange: ToggleButton.GroupProps['onChange'] + ignoreLabel?: string + warnLabel?: string + hideLabel?: string +}) { + const {_} = useLingui() + const {gtPhone} = useBreakpoints() + + return ( + + + {ignoreLabel && ( + + {ignoreLabel} + + )} + {warnLabel && ( + + {warnLabel} + + )} + {hideLabel && ( + + {hideLabel} + + )} + + + ) +} + +/** + * For use on the global Moderation screen to set prefs for a "global" label, + * not scoped to a single labeler. + */ +export function GlobalLabelPreference({ + labelDefinition, + disabled, +}: { + labelDefinition: InterpretedLabelValueDefinition + disabled?: boolean +}) { + const {_} = useLingui() + + const {identifier} = labelDefinition + 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 = + labelDefinition.identifier in allLabelStrings + ? allLabelStrings[labelDefinition.identifier] + : { + name: labelDefinition.identifier, + description: `Labeled "${labelDefinition.identifier}"`, + } + + const labelOptions = { + hide: _(msg`Hide`), + warn: _(msg`Warn`), + ignore: _(msg`Show`), + } + + return ( + + + {!disabled && ( + { + mutate({ + label: identifier, + visibility: values[0] as LabelPreference, + labelerDid: undefined, + }) + }} + ignoreLabel={labelOptions.ignore} + warnLabel={labelOptions.warn} + hideLabel={labelOptions.hide} + /> + )} + + ) +} + +/** + * For use on individual labeler pages + */ +export function LabelerLabelPreference({ + labelDefinition, + disabled, + labelerDid, +}: { + labelDefinition: InterpretedLabelValueDefinition + disabled?: boolean + labelerDid?: string +}) { + const {i18n} = useLingui() + const t = useTheme() + const {gtPhone} = useBreakpoints() + + const isGlobalLabel = !labelDefinition.definedBy + const {identifier} = labelDefinition + const {data: preferences} = usePreferencesQuery() + const {mutate, variables} = usePreferencesSetContentLabelMutation() + const savedPref = + labelerDid && !isGlobalLabel + ? preferences?.moderationPrefs.labelers.find(l => l.did === labelerDid) + ?.labels[identifier] + : preferences?.moderationPrefs.labels[identifier] + const pref = + variables?.visibility ?? + savedPref ?? + labelDefinition.defaultSetting ?? + 'warn' + + // does the 'warn' setting make sense for this label? + const canWarn = !( + labelDefinition.blurs === 'none' && labelDefinition.severity === 'none' + ) + // is this label adult only? + const adultOnly = labelDefinition.flags.includes('adult') + // is this label disabled because it's adult only? + const adultDisabled = + adultOnly && !preferences?.moderationPrefs.adultContentEnabled + // are there any reasons we cant configure this label here? + const cantConfigure = isGlobalLabel || adultDisabled + const showConfig = !disabled && (gtPhone || !cantConfigure) + + // adjust the pref based on whether warn is available + let prefAdjusted = pref + if (adultDisabled) { + prefAdjusted = 'hide' + } else if (!canWarn && pref === 'warn') { + prefAdjusted = 'ignore' + } + + // grab localized descriptions of the label and its settings + const currentPrefLabel = useLabelBehaviorDescription( + labelDefinition, + prefAdjusted, + ) + const hideLabel = useLabelBehaviorDescription(labelDefinition, 'hide') + const warnLabel = useLabelBehaviorDescription(labelDefinition, 'warn') + const ignoreLabel = useLabelBehaviorDescription(labelDefinition, 'ignore') + const globalLabelStrings = useGlobalLabelStrings() + const labelStrings = getLabelStrings( + i18n.locale, + globalLabelStrings, + labelDefinition, + ) + + return ( + + + {cantConfigure && ( + + + + + {adultDisabled ? ( + Adult content is disabled. + ) : isGlobalLabel ? ( + + Configured in{' '} + + moderation settings + + . + + ) : null} + + + )} + + + {showConfig && ( + + {cantConfigure ? ( + + + {currentPrefLabel} + + + ) : ( + { + mutate({ + label: identifier, + visibility: values[0] as LabelPreference, + labelerDid, + }) + }} + ignoreLabel={ignoreLabel} + warnLabel={canWarn ? warnLabel : undefined} + hideLabel={hideLabel} + /> + )} + + )} + + ) +} -- cgit 1.4.1