diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 9047f76998..eb5aa526a4 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -18,6 +18,7 @@ import { useProfileUpdateMutation, } from '#/state/queries/profile' import {ScrollView} from '#/view/com/util/Views' +import {logger} from '#/logger' import { UsePreferencesQueryResponse, @@ -25,6 +26,7 @@ import { useSetContentLabelMutation, } from '#/state/queries/preferences' import {useModServicesDetailedInfoQuery} from '#/state/queries/modservice' +import {useModServiceLabelGroupEnableMutation} from '#/state/queries/modservice' import {useTheme, atoms as a, useBreakpoints, native} from '#/alf' import {Divider} from '#/components/Divider' @@ -522,32 +524,15 @@ function LabelGroup({ {mods.map((mod, i) => { return ( - <> + {i !== 0 && } - {}}> - - - {getModerationServiceTitle({ - displayName: mod.creator.displayName, - handle: mod.creator.handle, - })} - - - - - + + ) })} @@ -558,6 +543,82 @@ function LabelGroup({ ) } +function LabelerToggle({ + labelGroup, + labeler, + preferences, +}: { + labelGroup: LabelGroupDefinition['id'] + labeler: AppBskyModerationDefs.ModServiceViewDetailed + preferences: UsePreferencesQueryResponse +}) { + const t = useTheme() + const { + mutateAsync: toggleGroupEnabled, + variables: optimisticToggleGroupEnabled, + } = useModServiceLabelGroupEnableMutation() + + const labelerPrefs = React.useMemo( + () => + preferences.moderationOpts.mods.find( + ({did}) => did === labeler.creator.did, + ), + [preferences.moderationOpts.mods, labeler.creator.did], + ) + const isLabelerEnabled = !!labelerPrefs?.enabled + const isEnabled = isLabelerEnabled + ? optimisticToggleGroupEnabled?.enabled ?? + !labelerPrefs?.disabledLabelGroups?.includes(labelGroup) + : false + const title = getModerationServiceTitle({ + displayName: labeler.creator.displayName, + handle: labeler.creator.handle, + }) + + const onToggleEnabled = React.useCallback(async () => { + try { + if (!labelerPrefs) throw new Error(`labelerPrefs not found`) + + await toggleGroupEnabled({ + did: labelerPrefs.did, + group: labelGroup, + enabled: !isEnabled, + }) + } catch (e: any) { + logger.error(`Failed to toggle label group enabled`, { + message: e.message, + labelGroup, + }) + } + }, [toggleGroupEnabled, isEnabled, labelerPrefs, labelGroup]) + + return ( + + + + {title}{' '} + + {isLabelerEnabled ? '' : '(labeler disabled)'} + + + + + + ) +} + function PwiOptOut() { const t = useTheme() const {_} = useLingui()