bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move SentryFeedbackForm into a separate component

Browse source
This commit is contained in:
Alex Gleason 2023-10-21 17:46:57 -05:00
parent fb190398c6
commit cbc14604c9
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 57 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/sentry-feedback-form.tsx Normal file
View file

@ -0,0 +1,53 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Textarea, Form, Button, FormGroup, FormActions } from 'soapbox/components/ui';
import { captureSentryFeedback } from 'soapbox/sentry';
interface ISentryFeedbackForm {
eventId: string;
}
/** Accept feedback for the given Sentry event. */
const SentryFeedbackForm: React.FC<ISentryFeedbackForm> = ({ eventId }) => {
const [feedback, setFeedback] = useState<string>();
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
setFeedback(e.target.value);
};
const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
if (!feedback || !eventId) return;
setIsSubmitting(true);
await captureSentryFeedback({
event_id: eventId,
comments: feedback,
}).catch(console.error);
setFeedback('');
setIsSubmitting(false);
};
return (
<Form onSubmit={handleSubmitFeedback}>
<FormGroup>
<Textarea
value={feedback}
onChange={handleFeedbackChange}
placeholder='Anything you can tell us about what happened?'
disabled={isSubmitting}
autoGrow
/>
</FormGroup>
<FormActions>
<Button type='submit' className='mx-auto' disabled={!feedback || isSubmitting}>
<FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
</Button>
</FormActions>
</Form>
);
};
export default SentryFeedbackForm;

42
src/components/site-error-boundary.tsx
View file

@ -3,13 +3,14 @@ import { ErrorBoundary } from 'react-error-boundary';
import { FormattedMessage } from 'react-intl';
import { NODE_ENV } from 'soapbox/build-config';
import { HStack, Text, Stack, Textarea, Form, Button, FormGroup, FormActions } from 'soapbox/components/ui';
import { HStack, Text, Stack, Textarea } from 'soapbox/components/ui';
import { useSoapboxConfig } from 'soapbox/hooks';
import { captureSentryException, captureSentryFeedback } from 'soapbox/sentry';
import { captureSentryException } from 'soapbox/sentry';
import KVStore from 'soapbox/storage/kv-store';
import sourceCode from 'soapbox/utils/code';
import { unregisterSW } from 'soapbox/utils/sw';
import SentryFeedbackForm from './sentry-feedback-form';
import SiteLogo from './site-logo';
interface ISiteErrorBoundary {
@ -25,8 +26,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const [componentStack, setComponentStack] = useState<string>();
const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
const [sentryEventId, setSentryEventId] = useState<string>();
const [feedback, setFeedback] = useState<string>();
const [isSubmittingFeedback, setIsSubmittingFeedback] = useState<boolean>(false);
const sentryEnabled = Boolean(sentryDsn);
const isProduction = NODE_ENV === 'production';
@ -52,23 +51,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
document.execCommand('copy');
};
const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
setFeedback(e.target.value);
};
const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
if (!feedback || !sentryEventId) return;
setIsSubmittingFeedback(true);
await captureSentryFeedback({
event_id: sentryEventId,
comments: feedback,
}).catch(console.error);
setFeedback('');
setIsSubmittingFeedback(false);
};
function handleError(error: Error, info: ErrorInfo) {
setError(error);
setComponentStack(info.componentStack);
@ -140,23 +122,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
<div className='mx-auto max-w-lg space-y-4 py-16'>
{(isProduction) ? (
(sentryEnabled && sentryEventId) && (
<Form onSubmit={handleSubmitFeedback}>
<FormGroup>
<Textarea
value={feedback}
onChange={handleFeedbackChange}
placeholder='Anything you can tell us about what happened?'
disabled={isSubmittingFeedback}
autoGrow
/>
</FormGroup>
<FormActions>
<Button type='submit' className='mx-auto' disabled={!feedback || isSubmittingFeedback}>
<FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
</Button>
</FormActions>
</Form>
<SentryFeedbackForm eventId={sentryEventId} />
)
) : (
<>