diff --git a/src/screens/ProfileModerationService/Header.tsx b/src/screens/ProfileModerationService/Header.tsx index 67fee31d97..f7ba831f02 100644 --- a/src/screens/ProfileModerationService/Header.tsx +++ b/src/screens/ProfileModerationService/Header.tsx @@ -19,7 +19,10 @@ import { } from '#/view/com/util/forms/NativeDropdown' import {useSession} from '#/state/session' import {useModalControls} from '#/state/modals' -import {useModServiceSubscriptionMutation} from '#/state/queries/modservice' +import { + useModServiceSubscriptionMutation, + useModServiceEnableMutation, +} from '#/state/queries/modservice' import {UsePreferencesQueryResponse} from '#/state/queries/preferences' import {useTheme, atoms as a, tokens, web, native, useBreakpoints} from '#/alf' @@ -44,13 +47,23 @@ export function Header({ const navigation = useNavigation() const {_} = useLingui() const canGoBack = navigation.canGoBack() - const {mutateAsync: service, variables} = useModServiceSubscriptionMutation() + const {mutateAsync: toggleSubscription, variables} = + useModServiceSubscriptionMutation() const isSubscribed = variables?.subscribe ?? preferences.moderationOpts.mods.find( mod => mod.did === modservice.creator.did, ) + const {mutateAsync: toggleEnabled, variables: enabledVariables} = + useModServiceEnableMutation() + const isEnabled = + enabledVariables?.enabled ?? + preferences.moderationOpts.mods.find( + mod => mod.did === modservice.creator.did && mod.enabled, + ) ?? + variables?.subscribe const [subscriptionError, setSubscriptionError] = React.useState('') + const [enablementError, setEnablementError] = React.useState('') const onPressBack = React.useCallback(() => { if (navigation.canGoBack()) { @@ -64,13 +77,27 @@ export function Header({ setDrawerOpen(true) }, [setDrawerOpen]) - const toggleSubscribe = React.useCallback(async () => { + const onPressSubscribe = React.useCallback(async () => { try { - await service({did: modservice.creator.did, subscribe: !isSubscribed}) + await toggleSubscription({ + did: modservice.creator.did, + subscribe: !isSubscribed, + }) } catch (e: any) { setSubscriptionError(e.message) } - }, [service, isSubscribed, modservice.creator.did]) + }, [toggleSubscription, isSubscribed, modservice.creator.did]) + + const onPressEnable = React.useCallback(async () => { + try { + await toggleEnabled({ + did: modservice.creator.did, + enabled: !isEnabled, + }) + } catch (e: any) { + setEnablementError(e.message) + } + }, [toggleEnabled, isEnabled, modservice.creator.did]) return ( @@ -95,7 +122,7 @@ export function Header({ variant="solid" color="primary" label={_(msg`Subscribe to this moderation service`)} - onPress={toggleSubscribe}> + onPress={onPressSubscribe}> {isSubscribed ? ( Unsubscribe @@ -139,9 +166,7 @@ export function Header({ onPress={emitSoftReset} style={[a.justify_start]}> - {modservice.displayName - ? sanitizeDisplayName(modservice.displayName) - : modservice.creator.displayName + {modservice.creator.displayName ? sanitizeDisplayName(modservice.creator.displayName) : sanitizeHandle(modservice.creator.handle, '@')} @@ -154,12 +179,33 @@ export function Header({ {gtMobile && ( + {isSubscribed && ( + + )} +