From cbc14604c9114028d711b735186af3e167e7b743 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 21 Oct 2023 17:46:57 -0500
Subject: [PATCH] Move SentryFeedbackForm into a separate component

---
 src/components/sentry-feedback-form.tsx | 53 +++++++++++++++++++++++++
 src/components/site-error-boundary.tsx  | 42 ++------------------
 2 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 src/components/sentry-feedback-form.tsx

diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
new file mode 100644
index 000000000..0ef74bbae
--- /dev/null
+++ b/src/components/sentry-feedback-form.tsx
@@ -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;
\ No newline at end of file
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 2d6bb92e0..3f39efc25 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -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} />
               )
             ) : (
               <>