Eric Bailey
803 lines
25 KiB
TypeScript
803 lines
25 KiB
TypeScript
import React from 'react'
|
|
import {Pressable, View} from 'react-native'
|
|
import {type ScrollView} from 'react-native-gesture-handler'
|
|
import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {wait} from '#/lib/async/wait'
|
|
import {getLabelingServiceTitle} from '#/lib/moderation'
|
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
|
import {Logger} from '#/logger'
|
|
import {isNative} from '#/platform/detection'
|
|
import {useMyLabelersQuery} from '#/state/queries/preferences'
|
|
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
|
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
|
import {atoms as a, useGutters, useTheme} from '#/alf'
|
|
import * as Admonition from '#/components/Admonition'
|
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
import * as Dialog from '#/components/Dialog'
|
|
import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
|
|
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
|
|
import {
|
|
Check_Stroke2_Corner0_Rounded as CheckThin,
|
|
CheckThick_Stroke2_Corner0_Rounded as Check,
|
|
} from '#/components/icons/Check'
|
|
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
|
|
import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
|
import {createStaticClick, InlineLinkText, Link} from '#/components/Link'
|
|
import {Loader} from '#/components/Loader'
|
|
import {Text} from '#/components/Typography'
|
|
import {useSubmitReportMutation} from './action'
|
|
import {
|
|
BSKY_LABELER_ONLY_REPORT_REASONS,
|
|
NEW_TO_OLD_REASONS_MAP,
|
|
SUPPORT_PAGE,
|
|
} from './const'
|
|
import {useCopyForSubject} from './copy'
|
|
import {initialState, reducer} from './state'
|
|
import {type ReportDialogProps, type ReportSubject} from './types'
|
|
import {parseReportSubject} from './utils/parseReportSubject'
|
|
import {
|
|
type ReportCategoryConfig,
|
|
type ReportOption,
|
|
useReportOptions,
|
|
} from './utils/useReportOptions'
|
|
|
|
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
|
|
|
|
const logger = Logger.create(Logger.Context.ReportDialog)
|
|
|
|
export function ReportDialog(
|
|
props: Omit<ReportDialogProps, 'subject'> & {
|
|
subject: ReportSubject
|
|
},
|
|
) {
|
|
const subject = React.useMemo(
|
|
() => parseReportSubject(props.subject),
|
|
[props.subject],
|
|
)
|
|
const onClose = React.useCallback(() => {
|
|
logger.metric('reportDialog:close', {}, {statsig: false})
|
|
}, [])
|
|
return (
|
|
<Dialog.Outer control={props.control} onClose={onClose}>
|
|
<Dialog.Handle />
|
|
{subject ? <Inner {...props} subject={subject} /> : <Invalid />}
|
|
</Dialog.Outer>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* This should only be shown if the dialog is configured incorrectly by a
|
|
* developer, but nevertheless we should have a graceful fallback.
|
|
*/
|
|
function Invalid() {
|
|
const {_} = useLingui()
|
|
return (
|
|
<Dialog.ScrollableInner label={_(msg`Report dialog`)}>
|
|
<Text style={[a.font_bold, a.text_xl, a.leading_snug, a.pb_xs]}>
|
|
<Trans>Invalid report subject</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md, a.leading_snug]}>
|
|
<Trans>
|
|
Something wasn't quite right with the data you're trying to report.
|
|
Please contact support.
|
|
</Trans>
|
|
</Text>
|
|
<Dialog.Close />
|
|
</Dialog.ScrollableInner>
|
|
)
|
|
}
|
|
|
|
function Inner(props: ReportDialogProps) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const ref = React.useRef<ScrollView>(null)
|
|
const {
|
|
data: allLabelers,
|
|
isLoading: isLabelerLoading,
|
|
error: labelersLoadError,
|
|
refetch: refetchLabelers,
|
|
} = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
|
|
const isLoading = useDelayedLoading(500, isLabelerLoading)
|
|
const copy = useCopyForSubject(props.subject)
|
|
const {sortedCategories, getCategory} = useReportOptions()
|
|
const [state, dispatch] = React.useReducer(reducer, initialState)
|
|
|
|
/**
|
|
* Submission handling
|
|
*/
|
|
const {mutateAsync: submitReport} = useSubmitReportMutation()
|
|
const [isPending, setPending] = React.useState(false)
|
|
const [isSuccess, setSuccess] = React.useState(false)
|
|
|
|
/**
|
|
* Labelers that support this `subject` and its NSID collection
|
|
*/
|
|
const supportedLabelers = React.useMemo(() => {
|
|
if (!allLabelers) return []
|
|
return allLabelers
|
|
.filter(l => {
|
|
const subjectTypes: string[] | undefined = l.subjectTypes
|
|
if (subjectTypes === undefined) return true
|
|
if (props.subject.type === 'account') {
|
|
return subjectTypes.includes('account')
|
|
} else if (props.subject.type === 'chatMessage') {
|
|
return subjectTypes.includes('chat')
|
|
} else {
|
|
return subjectTypes.includes('record')
|
|
}
|
|
})
|
|
.filter(l => {
|
|
const collections: string[] | undefined = l.subjectCollections
|
|
if (collections === undefined) return true
|
|
// all chat collections accepted, since only Bluesky handles chats
|
|
if (props.subject.type === 'chatMessage') return true
|
|
return collections.includes(props.subject.nsid)
|
|
})
|
|
.filter(l => {
|
|
if (!state.selectedOption) return true
|
|
// some reasons ONLY go to Bluesky
|
|
if (BSKY_LABELER_ONLY_REPORT_REASONS.has(state.selectedOption.reason)) {
|
|
return l.creator.did === BSKY_LABELER_DID
|
|
}
|
|
const reasonTypes: string[] | undefined = l.reasonTypes
|
|
if (reasonTypes === undefined) return true
|
|
return (
|
|
reasonTypes.includes(state.selectedOption.reason) ||
|
|
reasonTypes.includes(
|
|
NEW_TO_OLD_REASONS_MAP[state.selectedOption.reason],
|
|
)
|
|
)
|
|
})
|
|
}, [props, allLabelers, state.selectedOption])
|
|
const hasSupportedLabelers = !!supportedLabelers.length
|
|
const hasSingleSupportedLabeler = supportedLabelers.length === 1
|
|
|
|
console.log(supportedLabelers)
|
|
|
|
const onSubmit = React.useCallback(async () => {
|
|
dispatch({type: 'clearError'})
|
|
|
|
logger.info('submitting')
|
|
|
|
try {
|
|
setPending(true)
|
|
// wait at least 1s, make it feel substantial
|
|
await wait(
|
|
1e3,
|
|
submitReport({
|
|
subject: props.subject,
|
|
state,
|
|
}),
|
|
)
|
|
setSuccess(true)
|
|
logger.metric(
|
|
'reportDialog:success',
|
|
{
|
|
reason: state.selectedOption?.reason!,
|
|
labeler: state.selectedLabeler?.creator.handle!,
|
|
details: !!state.details,
|
|
},
|
|
{statsig: false},
|
|
)
|
|
// give time for user feedback
|
|
setTimeout(() => {
|
|
props.control.close()
|
|
}, 1e3)
|
|
} catch (e: any) {
|
|
logger.metric('reportDialog:failure', {}, {statsig: false})
|
|
logger.error(e, {
|
|
source: 'ReportDialog',
|
|
})
|
|
dispatch({
|
|
type: 'setError',
|
|
error: _(msg`Something went wrong. Please try again.`),
|
|
})
|
|
} finally {
|
|
setPending(false)
|
|
}
|
|
}, [_, submitReport, state, dispatch, props, setPending, setSuccess])
|
|
|
|
React.useEffect(() => {
|
|
logger.metric(
|
|
'reportDialog:open',
|
|
{
|
|
subjectType: props.subject.type,
|
|
},
|
|
{statsig: false},
|
|
)
|
|
}, [props.subject])
|
|
|
|
return (
|
|
<Dialog.ScrollableInner
|
|
testID="report:dialog"
|
|
label={_(msg`Report dialog`)}
|
|
ref={ref}
|
|
style={[a.w_full, {maxWidth: 500}]}>
|
|
<View style={[a.gap_2xl, isNative && a.pt_md]}>
|
|
<StepOuter>
|
|
<StepTitle
|
|
index={1}
|
|
title={copy.subtitle}
|
|
activeIndex1={state.activeStepIndex1}
|
|
/>
|
|
{isLoading ? (
|
|
<View style={[a.gap_sm]}>
|
|
<OptionCardSkeleton />
|
|
<OptionCardSkeleton />
|
|
<OptionCardSkeleton />
|
|
<OptionCardSkeleton />
|
|
<OptionCardSkeleton />
|
|
{/* Here to capture focus for a hot sec to prevent flash */}
|
|
<Pressable accessible={false} />
|
|
</View>
|
|
) : labelersLoadError || !allLabelers ? (
|
|
<Admonition.Outer type="error">
|
|
<Admonition.Row>
|
|
<Admonition.Icon />
|
|
<Admonition.Content>
|
|
<Admonition.Text>
|
|
<Trans>Something went wrong, please try again</Trans>
|
|
</Admonition.Text>
|
|
</Admonition.Content>
|
|
<Admonition.Button
|
|
color="negative_subtle"
|
|
label={_(msg`Retry loading report options`)}
|
|
onPress={() => refetchLabelers()}>
|
|
<ButtonText>
|
|
<Trans>Retry</Trans>
|
|
</ButtonText>
|
|
<ButtonIcon icon={Retry} />
|
|
</Admonition.Button>
|
|
</Admonition.Row>
|
|
</Admonition.Outer>
|
|
) : (
|
|
<>
|
|
{state.selectedCategory ? (
|
|
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
|
<View style={[a.flex_1]}>
|
|
<CategoryCard option={state.selectedCategory} />
|
|
</View>
|
|
<Button
|
|
testID="report:clearCategory"
|
|
label={_(msg`Change report reason`)}
|
|
size="tiny"
|
|
variant="solid"
|
|
color="secondary"
|
|
shape="round"
|
|
onPress={() => {
|
|
dispatch({type: 'clearCategory'})
|
|
}}>
|
|
<ButtonIcon icon={X} />
|
|
</Button>
|
|
</View>
|
|
) : (
|
|
<View style={[a.gap_sm]}>
|
|
{sortedCategories.map(o => (
|
|
<CategoryCard
|
|
key={o.key}
|
|
option={o}
|
|
onSelect={() => {
|
|
dispatch({
|
|
type: 'selectCategory',
|
|
option: o,
|
|
otherOption: getCategory('other').options[0],
|
|
})
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{['post', 'account'].includes(props.subject.type) && (
|
|
<Link
|
|
to={SUPPORT_PAGE}
|
|
label={_(
|
|
msg`Need to report a copyright violation, legal request, or regulatory compliance issue?`,
|
|
)}>
|
|
{({hovered, pressed}) => (
|
|
<View
|
|
style={[
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.w_full,
|
|
a.px_md,
|
|
a.py_sm,
|
|
a.rounded_sm,
|
|
a.border,
|
|
hovered || pressed
|
|
? [t.atoms.border_contrast_high]
|
|
: [t.atoms.border_contrast_low],
|
|
]}>
|
|
<Text style={[a.flex_1, a.italic, a.leading_snug]}>
|
|
<Trans>
|
|
Need to report a copyright violation, legal
|
|
request, or regulatory compliance issue?
|
|
</Trans>
|
|
</Text>
|
|
<SquareArrowTopRight
|
|
size="sm"
|
|
fill={t.atoms.text.color}
|
|
/>
|
|
</View>
|
|
)}
|
|
</Link>
|
|
)}
|
|
</View>
|
|
)}
|
|
</>
|
|
)}
|
|
</StepOuter>
|
|
|
|
<StepOuter>
|
|
<StepTitle
|
|
index={2}
|
|
title={_(msg`Select a reason`)}
|
|
activeIndex1={state.activeStepIndex1}
|
|
/>
|
|
{state.selectedOption ? (
|
|
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
|
<View style={[a.flex_1]}>
|
|
<OptionCard option={state.selectedOption} />
|
|
</View>
|
|
<Button
|
|
testID="report:clearReportOption"
|
|
label={_(msg`Change report reason`)}
|
|
size="tiny"
|
|
variant="solid"
|
|
color="secondary"
|
|
shape="round"
|
|
onPress={() => {
|
|
dispatch({type: 'clearOption'})
|
|
}}>
|
|
<ButtonIcon icon={X} />
|
|
</Button>
|
|
</View>
|
|
) : state.selectedCategory ? (
|
|
<View style={[a.gap_sm]}>
|
|
{getCategory(state.selectedCategory.key).options.map(o => (
|
|
<OptionCard
|
|
key={o.reason}
|
|
option={o}
|
|
onSelect={() => {
|
|
dispatch({type: 'selectOption', option: o})
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
) : null}
|
|
</StepOuter>
|
|
|
|
<StepOuter>
|
|
<StepTitle
|
|
index={3}
|
|
title={_(msg`Select moderation service`)}
|
|
activeIndex1={state.activeStepIndex1}
|
|
/>
|
|
{state.activeStepIndex1 >= 3 && (
|
|
<>
|
|
{state.selectedLabeler ? (
|
|
<>
|
|
{hasSingleSupportedLabeler ? (
|
|
<LabelerCard labeler={state.selectedLabeler} />
|
|
) : (
|
|
<View style={[a.flex_row, a.align_center, a.gap_md]}>
|
|
<View style={[a.flex_1]}>
|
|
<LabelerCard labeler={state.selectedLabeler} />
|
|
</View>
|
|
<Button
|
|
label={_(msg`Change moderation service`)}
|
|
size="tiny"
|
|
variant="solid"
|
|
color="secondary"
|
|
shape="round"
|
|
onPress={() => {
|
|
dispatch({type: 'clearLabeler'})
|
|
}}>
|
|
<ButtonIcon icon={X} />
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{hasSupportedLabelers ? (
|
|
<View style={[a.gap_sm]}>
|
|
{hasSingleSupportedLabeler ? (
|
|
<>
|
|
<LabelerCard labeler={supportedLabelers[0]} />
|
|
<ActionOnce
|
|
check={() => !state.selectedLabeler}
|
|
callback={() => {
|
|
dispatch({
|
|
type: 'selectLabeler',
|
|
labeler: supportedLabelers[0],
|
|
})
|
|
}}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
{supportedLabelers.map(l => (
|
|
<LabelerCard
|
|
key={l.creator.did}
|
|
labeler={l}
|
|
onSelect={() => {
|
|
dispatch({type: 'selectLabeler', labeler: l})
|
|
}}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
</View>
|
|
) : (
|
|
// should never happen in our app
|
|
<Admonition.Admonition type="warning">
|
|
<Trans>
|
|
Unfortunately, none of your subscribed labelers supports
|
|
this report type.
|
|
</Trans>
|
|
</Admonition.Admonition>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</StepOuter>
|
|
|
|
<StepOuter>
|
|
<StepTitle
|
|
index={4}
|
|
title={_(msg`Submit report`)}
|
|
activeIndex1={state.activeStepIndex1}
|
|
/>
|
|
{state.activeStepIndex1 === 4 && (
|
|
<>
|
|
<View style={[a.pb_xs, a.gap_xs]}>
|
|
<Text style={[a.leading_snug, a.pb_xs]}>
|
|
<Trans>
|
|
Your report will be sent to{' '}
|
|
<Text style={[a.font_semi_bold, a.leading_snug]}>
|
|
{state.selectedLabeler?.creator.displayName}
|
|
</Text>
|
|
.
|
|
</Trans>{' '}
|
|
{!state.detailsOpen ? (
|
|
<InlineLinkText
|
|
label={_(msg`Add more details (optional)`)}
|
|
{...createStaticClick(() => {
|
|
dispatch({type: 'showDetails'})
|
|
})}>
|
|
<Trans>Add more details (optional)</Trans>
|
|
</InlineLinkText>
|
|
) : null}
|
|
</Text>
|
|
|
|
{state.detailsOpen && (
|
|
<View>
|
|
<Dialog.Input
|
|
testID="report:details"
|
|
multiline
|
|
value={state.details}
|
|
onChangeText={details => {
|
|
dispatch({type: 'setDetails', details})
|
|
}}
|
|
label={_(msg`Additional details (limit 300 characters)`)}
|
|
style={{paddingRight: 60}}
|
|
numberOfLines={4}
|
|
/>
|
|
<View
|
|
style={[
|
|
a.absolute,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.pr_md,
|
|
a.pb_sm,
|
|
{
|
|
bottom: 0,
|
|
right: 0,
|
|
},
|
|
]}>
|
|
<CharProgress count={state.details?.length || 0} />
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Button
|
|
testID="report:submit"
|
|
label={_(msg`Submit report`)}
|
|
size="large"
|
|
variant="solid"
|
|
color="primary"
|
|
disabled={isPending || isSuccess}
|
|
onPress={onSubmit}>
|
|
<ButtonText>
|
|
<Trans>Submit report</Trans>
|
|
</ButtonText>
|
|
<ButtonIcon
|
|
icon={isSuccess ? CheckThin : isPending ? Loader : PaperPlane}
|
|
/>
|
|
</Button>
|
|
|
|
{state.error && (
|
|
<Admonition.Admonition type="error">
|
|
{state.error}
|
|
</Admonition.Admonition>
|
|
)}
|
|
</>
|
|
)}
|
|
</StepOuter>
|
|
</View>
|
|
|
|
<Dialog.Close />
|
|
</Dialog.ScrollableInner>
|
|
)
|
|
}
|
|
|
|
function ActionOnce({
|
|
check,
|
|
callback,
|
|
}: {
|
|
check: () => boolean
|
|
callback: () => void
|
|
}) {
|
|
React.useEffect(() => {
|
|
if (check()) {
|
|
callback()
|
|
}
|
|
}, [check, callback])
|
|
return null
|
|
}
|
|
|
|
function StepOuter({children}: {children: React.ReactNode}) {
|
|
return <View style={[a.gap_md, a.w_full]}>{children}</View>
|
|
}
|
|
|
|
function StepTitle({
|
|
index,
|
|
title,
|
|
activeIndex1,
|
|
}: {
|
|
index: number
|
|
title: string
|
|
activeIndex1: number
|
|
}) {
|
|
const t = useTheme()
|
|
const active = activeIndex1 === index
|
|
const completed = activeIndex1 > index
|
|
return (
|
|
<View style={[a.flex_row, a.gap_sm, a.pr_3xl]}>
|
|
<View
|
|
style={[
|
|
a.justify_center,
|
|
a.align_center,
|
|
a.rounded_full,
|
|
a.border,
|
|
{
|
|
width: 24,
|
|
height: 24,
|
|
backgroundColor: active
|
|
? t.palette.primary_500
|
|
: completed
|
|
? t.palette.primary_100
|
|
: t.atoms.bg_contrast_25.backgroundColor,
|
|
borderColor: active
|
|
? t.palette.primary_500
|
|
: completed
|
|
? t.palette.primary_400
|
|
: t.atoms.border_contrast_low.borderColor,
|
|
},
|
|
]}>
|
|
{completed ? (
|
|
<Check width={12} />
|
|
) : (
|
|
<Text
|
|
style={[
|
|
a.font_bold,
|
|
a.text_center,
|
|
t.atoms.text,
|
|
{
|
|
color: active
|
|
? 'white'
|
|
: completed
|
|
? t.palette.primary_700
|
|
: t.atoms.text_contrast_medium.color,
|
|
fontVariant: ['tabular-nums'],
|
|
width: 24,
|
|
height: 24,
|
|
lineHeight: 24,
|
|
},
|
|
]}>
|
|
{index}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
<Text
|
|
style={[
|
|
a.flex_1,
|
|
a.font_bold,
|
|
a.text_lg,
|
|
a.leading_snug,
|
|
active ? t.atoms.text : t.atoms.text_contrast_medium,
|
|
{
|
|
top: 1,
|
|
},
|
|
]}>
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function CategoryCard({
|
|
option,
|
|
onSelect,
|
|
}: {
|
|
option: ReportCategoryConfig
|
|
onSelect?: (option: ReportCategoryConfig) => void
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const gutters = useGutters(['compact'])
|
|
const onPress = React.useCallback(() => {
|
|
onSelect?.(option)
|
|
}, [onSelect, option])
|
|
return (
|
|
<Button
|
|
testID={`report:option:${option.title}`}
|
|
label={_(msg`Create report for ${option.title}`)}
|
|
onPress={onPress}
|
|
disabled={!onSelect}>
|
|
{({hovered, pressed}) => (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
gutters,
|
|
a.py_sm,
|
|
a.rounded_sm,
|
|
a.border,
|
|
t.atoms.bg_contrast_25,
|
|
hovered || pressed
|
|
? [t.atoms.border_contrast_high]
|
|
: [t.atoms.border_contrast_low],
|
|
]}>
|
|
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
|
|
{option.title}
|
|
</Text>
|
|
<Text
|
|
style={[a.text_sm, , a.leading_snug, t.atoms.text_contrast_medium]}>
|
|
{option.description}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
function OptionCard({
|
|
option,
|
|
onSelect,
|
|
}: {
|
|
option: ReportOption
|
|
onSelect?: (option: ReportOption) => void
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const gutters = useGutters(['compact'])
|
|
const onPress = React.useCallback(() => {
|
|
onSelect?.(option)
|
|
}, [onSelect, option])
|
|
return (
|
|
<Button
|
|
testID={`report:option:${option.title}`}
|
|
label={_(
|
|
msg({
|
|
message: `Create report for ${option.title}`,
|
|
comment:
|
|
'Accessibility label for button to create a moderation report for the selected option',
|
|
}),
|
|
)}
|
|
onPress={onPress}
|
|
disabled={!onSelect}>
|
|
{({hovered, pressed}) => (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
gutters,
|
|
a.py_sm,
|
|
a.rounded_sm,
|
|
a.border,
|
|
t.atoms.bg_contrast_25,
|
|
hovered || pressed
|
|
? [t.atoms.border_contrast_high]
|
|
: [t.atoms.border_contrast_low],
|
|
]}>
|
|
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
|
|
{option.title}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
function OptionCardSkeleton() {
|
|
const t = useTheme()
|
|
return (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
a.rounded_sm,
|
|
a.border,
|
|
t.atoms.bg_contrast_25,
|
|
t.atoms.border_contrast_low,
|
|
{height: 55}, // magic, based on web
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function LabelerCard({
|
|
labeler,
|
|
onSelect,
|
|
}: {
|
|
labeler: AppBskyLabelerDefs.LabelerViewDetailed
|
|
onSelect?: (option: AppBskyLabelerDefs.LabelerViewDetailed) => void
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const onPress = React.useCallback(() => {
|
|
onSelect?.(labeler)
|
|
}, [onSelect, labeler])
|
|
const title = getLabelingServiceTitle({
|
|
displayName: labeler.creator.displayName,
|
|
handle: labeler.creator.handle,
|
|
})
|
|
return (
|
|
<Button
|
|
testID={`report:labeler:${labeler.creator.handle}`}
|
|
label={_(msg`Send report to ${title}`)}
|
|
onPress={onPress}
|
|
disabled={!onSelect}>
|
|
{({hovered, pressed}) => (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
a.p_sm,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.gap_sm,
|
|
a.rounded_md,
|
|
a.border,
|
|
t.atoms.bg_contrast_25,
|
|
hovered || pressed
|
|
? [t.atoms.border_contrast_high]
|
|
: [t.atoms.border_contrast_low],
|
|
]}>
|
|
<UserAvatar
|
|
type="labeler"
|
|
size={36}
|
|
avatar={labeler.creator.avatar}
|
|
/>
|
|
<View style={[a.flex_1]}>
|
|
<Text style={[a.text_md, a.font_semi_bold, a.leading_snug]}>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
a.text_sm,
|
|
,
|
|
a.leading_snug,
|
|
t.atoms.text_contrast_medium,
|
|
]}>
|
|
<Trans>By {sanitizeHandle(labeler.creator.handle, '@')}</Trans>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|