Rough enablement

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 (
     <View
@@ -28,7 +49,6 @@ export function PreferenceRow({labelGroup}: {labelGroup: string}) {
         a.justify_between,
         a.gap_sm,
         a.py_xs,
-        a.px_xs,
         a.align_center,
       ]}>
       <View style={[a.gap_xs, {width: '50%'}]}>
@@ -38,22 +58,16 @@ export function PreferenceRow({labelGroup}: {labelGroup: string}) {
         </Text>
       </View>
       <View style={[a.justify_center, {minHeight: 35}]}>
-        <ToggleButton.Group
-          label={_(
-            msg`Configure content filtering setting for category: ${groupInfoStrings.name.toLowerCase()}`,
-          )}
-          values={['warn']}
-          onChange={() => {}}>
-          <ToggleButton.Button name="hide" label={labels.hide}>
-            {labels.hide}
-          </ToggleButton.Button>
-          <ToggleButton.Button name="warn" label={labels.warn}>
-            {labels.warn}
-          </ToggleButton.Button>
-          <ToggleButton.Button name="ignore" label={labels.show}>
-            {labels.show}
-          </ToggleButton.Button>
-        </ToggleButton.Group>
+        {modservicePreferences && (
+          <Toggle.Item
+            name="enable"
+            value={enabled}
+            onChange={onToggleEnabled}
+            label="Enable">
+            <Toggle.Label>{enabled ? 'Enabled' : 'Disabled'}</Toggle.Label>
+            <Toggle.Switch />
+          </Toggle.Item>
+        )}
       </View>
     </View>
   )

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({
       }}>
       <Header modservice={modservice} preferences={preferences} />
 
-      <View style={[a.gap_md]}>
+      <View style={[a.gap_md, a.pb_xl]}>
         {modservice.description ? (
           <RichText
             testID="modinfoDescription"
@@ -248,12 +253,28 @@ export function ProfileModserviceScreenInner({
         </View>
       </View>
 
+      <Divider />
+
+      <View style={[a.gap_sm, a.mt_xl]}>
+        <Text style={[a.text_md, a.font_bold]}>
+          Configure moderation service
+        </Text>
+        <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+          This moderation service supports the following types of content.
+          Configure which types of content you'd like to respect from this
+          service.
+        </Text>
+      </View>
+
       <View style={[a.gap_md, a.mt_xl]}>
-        {groups.map(def => {
+        {groups.map((def, i) => {
           return (
             <React.Fragment key={def.id}>
-              <Divider />
-              <PreferenceRow labelGroup={def.id} />
+              {i !== 0 && <Divider />}
+              <PreferenceRow
+                labelGroup={def.id}
+                modservicePreferences={modservicePreferences}
+              />
             </React.Fragment>
           )
         })}

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,
+      })
+    },
+  })
+}