Update onboarding

src/screens/Onboarding/StepModeration/ModerationOption.tsx

@@ -1,41 +1,52 @@
 import React from 'react'
 import {View} from 'react-native'
-import {LabelPreference} from '@atproto/api'
+import {LabelPreference, InterprettedLabelValueDefinition} from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
 
 import {
-  CONFIGURABLE_LABEL_GROUPS,
-  ConfigurableLabelGroup,
   usePreferencesQuery,
   usePreferencesSetContentLabelMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as ToggleButton from '#/components/forms/ToggleButton'
+import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
 
 export function ModerationOption({
-  labelGroup,
+  labelValueDefinition,
   isMounted,
 }: {
-  labelGroup: ConfigurableLabelGroup
+  labelValueDefinition: InterprettedLabelValueDefinition
   isMounted: React.MutableRefObject<boolean>
 }) {
   const {_} = useLingui()
   const t = useTheme()
-  const groupInfo = CONFIGURABLE_LABEL_GROUPS[labelGroup]
   const {data: preferences} = usePreferencesQuery()
   const {mutate, variables} = usePreferencesSetContentLabelMutation()
+  const label = labelValueDefinition.identifier
   const visibility =
-    variables?.visibility ??
-    preferences?.moderationOpts.labelGroups?.[labelGroup]
+    variables?.visibility ?? preferences?.moderationPrefs.labels?.[label]
+
+  const allLabelStrings = useGlobalLabelStrings()
+  const labelStrings =
+    labelValueDefinition.identifier in allLabelStrings
+      ? allLabelStrings[labelValueDefinition.identifier]
+      : {
+          name: labelValueDefinition.identifier,
+          description: `Labeled "${labelValueDefinition.identifier}"`,
+        }
 
   const onChange = React.useCallback(
     (vis: string[]) => {
-      mutate({labelGroup, visibility: vis[0] as LabelPreference})
+      mutate({
+        label,
+        visibility: vis[0] as LabelPreference,
+        labelerDid: undefined,
+      })
     },
-    [mutate, labelGroup],
+    [mutate, label],
   )
 
   const labels = {
@@ -57,26 +68,26 @@ export function ModerationOption({
       layout={Layout.easing(Easing.ease).duration(200)}
       entering={isMounted.current ? FadeIn : undefined}>
       <View style={[a.gap_xs, {width: '50%'}]}>
-        <Text style={[a.font_bold]}>{groupInfo.title}</Text>
+        <Text style={[a.font_bold]}>{labelStrings.name}</Text>
         <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
-          {groupInfo.subtitle}
+          {labelStrings.description}
         </Text>
       </View>
       <View style={[a.justify_center, {minHeight: 35}]}>
         <ToggleButton.Group
           label={_(
-            msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
+            msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
           )}
           values={[visibility ?? 'hide']}
           onChange={onChange}>
-          <ToggleButton.Button name="hide" label={labels.hide}>
-            {labels.hide}
+          <ToggleButton.Button name="ignore" label={labels.show}>
+            {labels.show}
           </ToggleButton.Button>
           <ToggleButton.Button name="warn" label={labels.warn}>
             {labels.warn}
           </ToggleButton.Button>
-          <ToggleButton.Button name="ignore" label={labels.show}>
-            {labels.show}
+          <ToggleButton.Button name="hide" label={labels.hide}>
+            {labels.hide}
           </ToggleButton.Button>
         </ToggleButton.Group>
       </View>