add optional name and email fields for feedback

src/components/Feedback/Feedback.tsx

@@ -1,8 +1,9 @@
 import { Stack } from '@mui/material';
 import React, { useRef, useState } from 'react';
+import Badge from '../../design-system/components/Badge';
 import Button from '../../design-system/components/Button';
 import Box from '../Box';
-import Badge from '../../design-system/components/Badge';
+import InputField from '../../design-system/components/InputField';
 
 enum FeedbackState {
   SUCCESS = 0,
@@ -13,21 +14,28 @@ enum FeedbackState {
 const Feedback = () => {
   const [submitState, setSubmitState] = useState(FeedbackState.PENDING);
 
-  const textArea = useRef<HTMLTextAreaElement>();
-  const submitFeedback = () => {
+  const feedbackTextArea = useRef<HTMLTextAreaElement>();
+  const nameInput = useRef<HTMLInputElement>();
+  const emailInput = useRef<HTMLInputElement>();
+
+  const submitFeedback = async () => {
     setSubmitState(FeedbackState.PENDING);
 
     // Only attempt submit if the user has typed something in the text area
-    const hasUserInputText = textArea.current?.value.length > 0;
+    const hasUserInputText = feedbackTextArea.current?.value.length > 0;
 
     if (hasUserInputText) {
-      const input = textArea.current.value;
+      const input = `
+Feedback :love_letter: : ${feedbackTextArea.current.value}
+Name: ${nameInput.current.value ?? 'Not provided'}
+Email: ${emailInput.current.value ?? 'Not provided'}
+      `;
       const payload = {
         text: input,
       };
 
       try {
-        fetch('/api/feedback', {
+        await fetch('/api/feedback', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -36,7 +44,11 @@ const Feedback = () => {
         });
 
         // eslint-disable-next-line functional/immutable-data
-        textArea.current.value = '';
+        feedbackTextArea.current.value = '';
+        // eslint-disable-next-line functional/immutable-data
+        nameInput.current.value = '';
+        // eslint-disable-next-line functional/immutable-data
+        emailInput.current.value = '';
 
         setSubmitState(FeedbackState.SUCCESS);
       } catch (e) {
@@ -47,23 +59,34 @@ const Feedback = () => {
 
   return (
     <Stack spacing="1rem" padding="0.5rem" width="fit-content">
-      {submitState === FeedbackState.SUCCESS && <Badge>Thank you!</Badge>}
+      <label htmlFor="nameInput">Name (optional)</label>
+      <InputField id="nameInput" ref={nameInput} type="text" />
+
+      <label htmlFor="emailInput">Email (optional)</label>
+      <InputField id="emailInput" ref={emailInput} type="email" />
 
+      <label htmlFor="feedbackTextArea">Feedback</label>
       <Box
         as="textarea"
-        ref={textArea}
-        //_placeholder={{ fontWeight: 'thin', fontStyle: 'italic' }}
+        id="feedbackTextArea"
+        ref={feedbackTextArea}
         resize={'none'}
         height="16rem"
-        width="20rem"
+        width={['15rem', '20rem']}
         placeholder={`The Toilet Map is a free and open source project that we maintain in our spare time.
 
 We'd be so grateful if you could take a moment to give us feedback on how we could make your experience even better.`}
-      />
+        aria-description={`The Toilet Map is a free and open source project that we maintain in our spare time.
+
+  We'd be so grateful if you could take a moment to give us feedback on how we could make your experience even better.`}
+      ></Box>
+
+      {submitState === FeedbackState.SUCCESS && <Badge>Thank you!</Badge>}
       <Button
         htmlElement="button"
         variant="primary"
         type="submit"
+        aria-label="Submit Feedback"
         onClick={submitFeedback}
       >
         Submit

src/design-system/components/InputField/InputField.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
 
-const InputField = forwardRef<HTMLInputElement>((props, ref) => {
+type InputProps = React.HTMLProps<HTMLInputElement>;
+
+const InputField = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   return <input ref={ref} className="input" {...props} />;
 });
 

src/pages/api/feedback/index.page.ts

@@ -2,14 +2,19 @@ import { NextApiRequest, NextApiResponse } from 'next';
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   const feedback = req.body;
-  fetch(process.env.SLACK_FEEDBACK_WEBHOOK, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ text: feedback?.text }),
-  });
-  res.send(200);
+  try {
+    await fetch(process.env.SLACK_FEEDBACK_WEBHOOK, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ text: feedback?.text }),
+    });
+    res.send(200);
+  } catch (error) {
+    console.error('There was an error sending the feedback to Slack', error);
+    res.send(500);
+  }
 }
 
 export default handler;