diff --git a/src/components/dialogs/ReportDialog/index.tsx b/src/components/dialogs/ReportDialog/index.tsx index 7e321b5e25..1a3ac140e9 100644 --- a/src/components/dialogs/ReportDialog/index.tsx +++ b/src/components/dialogs/ReportDialog/index.tsx @@ -9,7 +9,12 @@ import {atoms as a, useTheme, tokens, native} from '#/alf' import {Text} from '#/components/Typography' import * as Dialog from '#/components/Dialog' import {GlobalDialogProps} from '#/components/dialogs' -import {Button, ButtonIcon, useButtonContext} from '#/components/Button' +import { + Button, + ButtonIcon, + ButtonText, + useButtonContext, +} from '#/components/Button' import {Divider} from '#/components/Divider' import {useLabelGroupStrings} from '#/lib/moderation' import { @@ -22,6 +27,8 @@ import * as Toggle from '#/components/forms/Toggle' import {GradientFill} from '#/components/GradientFill' import * as TextField from '#/components/forms/TextField' import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' +import {Loader} from '#/components/Loader' +import * as Toast from '#/view/com/util/Toast' export type ReportDialogProps = | { @@ -139,9 +146,11 @@ function ModServiceToggle({title}: {title: string}) { function SubmitView({ selectedLabelGroup, goBack, + onSubmitComplete, }: { selectedLabelGroup: string goBack: () => void + onSubmitComplete: () => void }) { const t = useTheme() const {_} = useLingui() @@ -149,6 +158,17 @@ function SubmitView({ const groupInfoStrings = labelGroupStrings[selectedLabelGroup] const [selectedServices, setSelectedServices] = React.useState([]) const [details, setDetails] = React.useState('') + const [submitting, setSubmitting] = React.useState(false) + + const submit = React.useCallback(async () => { + setSubmitting(true) + await new Promise(resolve => setTimeout(resolve, 1000)) + setSubmitting(false) + + Toast.show(`Thank you. Your report has been sent.`) + + onSubmitComplete() + }, [onSubmitComplete]) return ( @@ -242,8 +262,10 @@ function SubmitView({ size="large" variant="gradient" color="gradient_midnight" - label={_(msg`Submit`)}> - Submit + label={_(msg`Submit`)} + onPress={submit}> + Submit + {submitting && } @@ -262,8 +284,7 @@ export function ReportDialog({ const {_} = useLingui() const insets = useSafeAreaInsets() const control = Dialog.useDialogControl() - const [selectedLabelGroup, setSelectedLabelGroup] = - React.useState('nudity') + const [selectedLabelGroup, setSelectedLabelGroup] = React.useState('') const labelGroupStrings = useLabelGroupStrings() // REQUIRED CLEANUP @@ -307,6 +328,7 @@ export function ReportDialog({ setSelectedLabelGroup('')} + onSubmitComplete={control.close} /> ) : (