diff --git a/src/screens/ProfileModerationService/PreferenceRow.tsx b/src/screens/ProfileModerationService/PreferenceRow.tsx index 17bc0a887e..16f3d83f15 100644 --- a/src/screens/ProfileModerationService/PreferenceRow.tsx +++ b/src/screens/ProfileModerationService/PreferenceRow.tsx @@ -2,24 +2,45 @@ import React from 'react' import {View} from 'react-native' import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {LABEL_GROUPS, AppBskyModerationDefs} from '@atproto/api' +// TODO +import {ModPrefItem} from '@atproto/api/dist/client/types/app/bsky/actor/defs' import {useLabelGroupStrings} from '#/lib/moderation/useLabelGroupStrings' +import {useModServiceLabelGroupEnableMutation} from '#/state/queries/modservice' import {useTheme, atoms as a} from '#/alf' import {Text} from '#/components/Typography' -import * as ToggleButton from '#/components/forms/ToggleButton' +import * as Toggle from '#/components/forms/Toggle' -export function PreferenceRow({labelGroup}: {labelGroup: string}) { +export function PreferenceRow({ + labelGroup, + modservicePreferences, +}: { + labelGroup: keyof typeof LABEL_GROUPS + modservicePreferences?: ModPrefItem +}) { const t = useTheme() const {_} = useLingui() const labelGroupStrings = useLabelGroupStrings() const groupInfoStrings = labelGroupStrings[labelGroup] + const {mutateAsync, variables} = useModServiceLabelGroupEnableMutation() + const enabled = + variables?.enabled ?? + !modservicePreferences?.disabledLabelGroups?.includes(labelGroup) - const labels = { - hide: _(msg`Hide`), - warn: _(msg`Warn`), - show: _(msg`Show`), - } + const onToggleEnabled = React.useCallback(async () => { + try { + await mutateAsync({ + // @ts-ignore TODO + did: modservicePreferences?.did, + group: labelGroup, + enabled: !enabled, + }) + } catch (e: any) { + console.error(e) + } + }, [mutateAsync, enabled]) return ( @@ -38,22 +58,16 @@ export function PreferenceRow({labelGroup}: {labelGroup: string}) { - {}}> - - {labels.hide} - - - {labels.warn} - - - {labels.show} - - + {modservicePreferences && ( + + {enabled ? 'Enabled' : 'Disabled'} + + + )} ) diff --git a/src/screens/ProfileModerationService/index.tsx b/src/screens/ProfileModerationService/index.tsx index 2aeb18b355..854990b33f 100644 --- a/src/screens/ProfileModerationService/index.tsx +++ b/src/screens/ProfileModerationService/index.tsx @@ -143,6 +143,11 @@ export function ProfileModserviceScreenInner({ def => def.configurable, ) }, [modservice.policies.labelValues]) + const modservicePreferences = React.useMemo(() => { + return preferences.moderationOpts.mods.find( + p => p.did === modservice.creator.did, + ) + }, [modservice.creator.did, preferences.moderationOpts.mods]) useSetTitle(modservice.creator.displayName || modservice.creator.handle) @@ -179,7 +184,7 @@ export function ProfileModserviceScreenInner({ }}>
- + {modservice.description ? ( + + + + + Configure moderation service + + + This moderation service supports the following types of content. + Configure which types of content you'd like to respect from this + service. + + + - {groups.map(def => { + {groups.map((def, i) => { return ( - - + {i !== 0 && } + ) })} diff --git a/src/state/queries/modservice.ts b/src/state/queries/modservice.ts index 17701362c1..e7cc06b7e7 100644 --- a/src/state/queries/modservice.ts +++ b/src/state/queries/modservice.ts @@ -48,3 +48,19 @@ export function useModServiceEnableMutation() { }, }) } + +export function useModServiceLabelGroupEnableMutation() { + const queryClient = useQueryClient() + + return useMutation({ + async mutationFn({did, group, enabled}: {did: string; group: string, enabled: boolean}) { + console.log('useModServiceLabelGroupEnableMutation', did, group, enabled) + await getAgent().setModServiceLabelGroupEnabled(did, group, enabled) + }, + onSuccess() { + queryClient.invalidateQueries({ + queryKey: preferencesQueryKey, + }) + }, + }) +}