Ensure profile labels can be appealed separately from account labels (#5154)

Author: estrattonbailey

src/components/moderation/LabelsOnMe.tsx

@@ -14,19 +14,18 @@ import {
 } from '#/components/moderation/LabelsOnMeDialog'
 
 export function LabelsOnMe({
-  details,
+  type,
   labels,
   size,
   style,
 }: {
-  details: {did: string} | {uri: string; cid: string}
+  type: 'account' | 'content'
   labels: ComAtprotoLabelDefs.Label[] | undefined
   size?: ButtonSize
   style?: StyleProp<ViewStyle>
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const isAccount = 'did' in details
   const control = useLabelsOnMeDialogControl()
 
   if (!labels || !currentAccount) {
@@ -39,7 +38,7 @@ export function LabelsOnMe({
 
   return (
     <View style={[a.flex_row, style]}>
-      <LabelsOnMeDialog control={control} subject={details} labels={labels} />
+      <LabelsOnMeDialog control={control} labels={labels} type={type} />
 
       <Button
         variant="solid"
@@ -51,7 +50,7 @@ export function LabelsOnMe({
         }}>
         <ButtonIcon position="left" icon={CircleInfo} />
         <ButtonText style={[a.leading_snug]}>
-          {isAccount ? (
+          {type === 'account' ? (
             <Plural
               value={labels.length}
               one="# label has been placed on this account"
@@ -82,6 +81,6 @@ export function LabelsOnMyPost({
     return null
   }
   return (
-    <LabelsOnMe details={post} labels={post.labels} size="tiny" style={style} />
+    <LabelsOnMe type="content" labels={post.labels} size="tiny" style={style} />
   )
 }

src/components/moderation/LabelsOnMeDialog.tsx

@@ -5,6 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'
 
+import {useLabelSubject} from '#/lib/moderation'
 import {useLabelInfo} from '#/lib/moderation/useLabelInfo'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -18,21 +19,13 @@ import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {Divider} from '../Divider'
 import {Loader} from '../Loader'
-export {useDialogControl as useLabelsOnMeDialogControl} from '#/components/Dialog'
 
-type Subject =
-  | {
-      uri: string
-      cid: string
-    }
-  | {
-      did: string
-    }
+export {useDialogControl as useLabelsOnMeDialogControl} from '#/components/Dialog'
 
 export interface LabelsOnMeDialogProps {
   control: Dialog.DialogOuterProps['control']
-  subject: Subject
   labels: ComAtprotoLabelDefs.Label[]
+  type: 'account' | 'content'
 }
 
 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
@@ -51,8 +44,8 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   const [appealingLabel, setAppealingLabel] = React.useState<
     ComAtprotoLabelDefs.Label | undefined
   >(undefined)
-  const {subject, labels} = props
-  const isAccount = 'did' in subject
+  const {labels} = props
+  const isAccount = props.type === 'account'
   const containsSelfLabel = React.useMemo(
     () => labels.some(l => l.src === currentAccount?.did),
     [currentAccount?.did, labels],
@@ -68,7 +61,6 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
       {appealingLabel ? (
         <AppealForm
           label={appealingLabel}
-          subject={subject}
           control={props.control}
           onPressBack={() => setAppealingLabel(undefined)}
         />
@@ -188,19 +180,18 @@ function Label({
 
 function AppealForm({
   label,
-  subject,
   control,
   onPressBack,
 }: {
   label: ComAtprotoLabelDefs.Label
-  subject: Subject
   control: Dialog.DialogOuterProps['control']
   onPressBack: () => void
 }) {
   const {_} = useLingui()
   const {labeler, strings} = useLabelInfo(label)
   const {gtMobile} = useBreakpoints()
   const [details, setDetails] = React.useState('')
+  const {subject} = useLabelSubject({label})
   const isAccountReport = 'did' in subject
   const agent = useAgent()
   const sourceName = labeler

src/lib/moderation.ts

@@ -1,6 +1,8 @@
+import React from 'react'
 import {
   AppBskyLabelerDefs,
   BskyAgent,
+  ComAtprotoLabelDefs,
   InterpretedLabelValueDefinition,
   LABELS,
   ModerationCause,
@@ -82,3 +84,34 @@ export function isLabelerSubscribed(
   }
   return modOpts.prefs.labelers.find(l => l.did === labeler)
 }
+
+export type Subject =
+  | {
+      uri: string
+      cid: string
+    }
+  | {
+      did: string
+    }
+
+export function useLabelSubject({label}: {label: ComAtprotoLabelDefs.Label}): {
+  subject: Subject
+} {
+  return React.useMemo(() => {
+    const {cid, uri} = label
+    if (cid) {
+      return {
+        subject: {
+          uri,
+          cid,
+        },
+      }
+    } else {
+      return {
+        subject: {
+          did: uri,
+        },
+      }
+    }
+  }, [label])
+}

src/screens/Profile/Header/Shell.tsx

@@ -86,7 +86,7 @@ let ProfileHeaderShell = ({
           style={[a.px_lg, a.py_xs]}
           pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
-            <LabelsOnMe details={{did: profile.did}} labels={profile.labels} />
+            <LabelsOnMe type="account" labels={profile.labels} />
           ) : (
             <ProfileHeaderAlerts moderation={moderation} />
           )}