stream.place
Live video on the AT Protocol
add report modal
authored by
Natalie B.
and committed by
Eli Mallon
3e2a8f0a
bec9dfe2
+87
+87
js/app/components/mobile/report-modal.tsx
+87
js/app/components/mobile/report-modal.tsx
···
1
+
import {
2
+
Dialog,
3
+
DialogFooter,
4
+
DropdownMenuRadioGroup,
5
+
DropdownMenuRadioItem,
6
+
} from "@streamplace/components";
7
+
import React, { useState } from "react";
8
+
import { Button } from "react-native";
9
+
10
+
const REPORT_REASONS = [
11
+
"Terrorism",
12
+
"Nudity or Sexually Explicit",
13
+
"Hateful Conduct",
14
+
"Bullying or Harassment",
15
+
"Violence or Gore",
16
+
"Self-Harm",
17
+
"Spam, Scams, Bots, or Tampering",
18
+
"Miscategorized Content",
19
+
"Missing or Incorrect Content Classification Label",
20
+
"Search",
21
+
];
22
+
23
+
interface ReportModalProps {
24
+
open: boolean;
25
+
onOpenChange: (open: boolean) => void;
26
+
onSubmit: (reason: string) => void;
27
+
title?: string;
28
+
description?: string;
29
+
}
30
+
31
+
export const ReportModal: React.FC<ReportModalProps> = ({
32
+
open,
33
+
onOpenChange,
34
+
onSubmit,
35
+
title = "Report",
36
+
description = "Why are you submitting this report?",
37
+
}) => {
38
+
const [selectedReason, setSelectedReason] = useState<string | null>(null);
39
+
40
+
const handleCancel = () => {
41
+
setSelectedReason(null);
42
+
onOpenChange(false);
43
+
};
44
+
45
+
const handleSubmit = () => {
46
+
if (selectedReason) {
47
+
onSubmit(selectedReason);
48
+
setSelectedReason(null);
49
+
onOpenChange(false);
50
+
}
51
+
};
52
+
53
+
return (
54
+
<Dialog
55
+
open={open}
56
+
onOpenChange={onOpenChange}
57
+
title={title}
58
+
description={description}
59
+
showCloseButton
60
+
dismissible
61
+
variant="default"
62
+
size="md"
63
+
position="center"
64
+
>
65
+
<DropdownMenuRadioGroup
66
+
value={selectedReason || undefined}
67
+
onValueChange={setSelectedReason}
68
+
>
69
+
{REPORT_REASONS.map((reason) => (
70
+
<DropdownMenuRadioItem key={reason} value={reason}>
71
+
{reason}
72
+
</DropdownMenuRadioItem>
73
+
))}
74
+
</DropdownMenuRadioGroup>
75
+
<DialogFooter>
76
+
<Button title="Cancel" onPress={handleCancel} color="#888" />
77
+
<Button
78
+
title="Submit"
79
+
onPress={handleSubmit}
80
+
disabled={!selectedReason}
81
+
/>
82
+
</DialogFooter>
83
+
</Dialog>
84
+
);
85
+
};
86
+
87
+
export default ReportModal;