Function ReportBugForm

app/components/ReportBugDialog.tsx:35–98

()

}

const ReportBugForm: FC<{}> = () => {
	const { Form, data, state } = useFetcher()
	const { room, roomHistory } = useRoomContext()
	const { roomName } = useParams()
	const { identity } = room

	const info: BugReportInfo = {
		roomName,
		identity,
		roomHistory,
		url: typeof location !== 'undefined' ? location.href : undefined,
	}

	const [copied, copy] = useCopyToClipboard()

	const infoString = JSON.stringify(info, null, 2)

	return data ? (
		<div className="space-y-4">
			<DialogTitle>Thank you!</DialogTitle>
			<Description>Your report has been submitted!</Description>
		</div>
	) : (
		<div className="space-y-4">
			<DialogTitle>Report a bug</DialogTitle>
			<Description>
				The Calls team will be notified with tracing details.
			</Description>
			<details className="cursor-pointer">
				<summary className="text-sm text-zinc-500 dark:text-zinc-400">
					Debug Info (included automatically)
				</summary>
				<div className="space-y-4">
					{/* Empty div so the button gets padding top from stack */}
					<div></div>
					<Button
						className="text-sm"
						onClick={() => {
							copy(infoString)
						}}
					>
						{copied ? 'Copied!' : 'Copy'}
					</Button>
					<TextArea rows={10} readOnly defaultValue={infoString}></TextArea>
				</div>
			</details>

			<Form method="post" action="/api/bugReport">
				<div className="space-y-4">
					<Label className="font-bold">Description</Label>
					<TextArea name="description" rows={8}></TextArea>
				</div>
				<input name="info" type="hidden" value={JSON.stringify(info)} />
				<Button
					className="mt-4 text-sm"
					type="submit"
					disabled={state === 'submitting'}
				>