update state handling and add email field

src/components/Feedback/Feedback.tsx

@@ -1,10 +1,16 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { submitFeedback } from "~/src/lib/api/FeedbackApi";
 import { FeedbackBoxViewType } from "@nypl/design-system-react-components";
 import { FeedbackContext } from "~/src/context/FeedbackContext";
 
+const DEFAULT_DESCRIPTION_TEXT = "Please share your question or feedback.";
+const ERROR_DESCRIPTION_TEXT = "We are here to help!";
+
 const Feedback: React.FC<any> = ({ location }) => {
   const [view, setView] = useState<FeedbackBoxViewType>("form");
+  const [descriptionText, setDescriptionText] = useState(
+    DEFAULT_DESCRIPTION_TEXT
+  );
   const {
     FeedbackBox,
     isOpen,
@@ -16,6 +22,11 @@ const Feedback: React.FC<any> = ({ location }) => {
     setNotificationText,
   } = useContext(FeedbackContext);
 
+  useEffect(() => {
+    if (isError) setDescriptionText(ERROR_DESCRIPTION_TEXT);
+    else setDescriptionText(DEFAULT_DESCRIPTION_TEXT);
+  }, [isError]);
+
   const onCloseAndReset = () => {
     if (isError) setIsError(false);
     if (notificationText) setNotificationText(null);
@@ -28,8 +39,9 @@ const Feedback: React.FC<any> = ({ location }) => {
   ) => {
     submitFeedback({
       feedback: values.comment,
-      category: values.category,
+      category: isError ? "Bug" : values.category,
       url: location,
+      email: values.email,
     })
       .then((res) => {
         if (res.ok) setView("confirmation");
@@ -41,9 +53,6 @@ const Feedback: React.FC<any> = ({ location }) => {
     setView("confirmation");
   };
 
-  const DEFAULT_DESCRIPTION_TEXT = "Please share your question or feedback.";
-  const ERROR_DESCRIPTION_TEXT = "We are here to help!";
-
   return (
     <FeedbackBox
       showCategoryField={!isError}
@@ -53,9 +62,7 @@ const Feedback: React.FC<any> = ({ location }) => {
       onOpen={onOpen}
       onSubmit={handleFeedbackSubmit}
       confirmationText="Thank you, your feedback has been submitted."
-      descriptionText={
-        isError ? ERROR_DESCRIPTION_TEXT : DEFAULT_DESCRIPTION_TEXT
-      }
+      descriptionText={descriptionText}
       notificationText={notificationText}
       id="feedbackBox-id"
       title="Help and Feedback"

src/context/FeedbackContext.tsx

@@ -8,19 +8,21 @@ type FeedbackContextType = {
   FeedbackBox: ChakraComponent<any>;
   onClose: () => void;
   isOpen?: boolean;
-  isError?: boolean;
-  setIsError: (value: boolean) => void;
-  notificationText: string;
-  setNotificationText: (value: string) => void;
+  isError: boolean | null;
+  setIsError: React.Dispatch<React.SetStateAction<boolean | null>>;
+  notificationText: string | null;
+  setNotificationText: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
-export const FeedbackContext = createContext<FeedbackContextType | null>(null);
+export const FeedbackContext = createContext<FeedbackContextType | undefined>(
+  undefined
+);
 
 export const FeedbackProvider: React.FC<{
   children?: React.ReactNode;
 }> = ({ children }) => {
   const { FeedbackBox, isOpen, onOpen, onClose } = useFeedbackBox();
-  const [isError, setIsError] = useState(false);
+  const [isError, setIsError] = useState(null);
   const [notificationText, setNotificationText] = useState(null);
 
   return (

src/pages/_error.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { NextPageContext } from "next";
 import Layout from "../components/Layout/Layout";
 import Link from "../components/Link/Link";
@@ -44,8 +44,10 @@ const Error = ({ statusCode }) => {
   const { onOpen, setNotificationText, setIsError } =
     useContext(FeedbackContext);
 
-  setIsError(true);
-  setNotificationText(getNotificationText(statusCode));
+  useEffect(() => {
+    setIsError(true);
+    setNotificationText(getNotificationText(statusCode));
+  }, [setIsError, setNotificationText, statusCode]);
 
   return (
     <Layout>
@@ -67,7 +69,7 @@ const Error = ({ statusCode }) => {
           {errorMap[statusCode].heading}
         </Heading>
         <Box>
-          <Text noSpace display={{ base: "inline-block", md: "block" }}>
+          <Text noSpace display={{ base: "inline", md: "block" }}>
             {errorMap[statusCode].subText}
           </Text>
           <Text noSpace display="inline">

src/types/Feedback.ts

@@ -2,4 +2,5 @@ export type Feedback = {
   feedback: string;
   category: string;
   url: string;
+  email?: string;
 };