From 542490630514ffb259a6072fe4df08f5158bb293 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Thu, 10 Oct 2024 13:40:21 -0400 Subject: [PATCH 1/3] remove error codes from error page --- CHANGELOG.md | 2 ++ src/components/Feedback/Feedback.tsx | 14 ++++++++++---- src/context/FeedbackContext.tsx | 5 +++++ src/pages/_error.tsx | 24 +++++++++++------------- 4 files changed, 28 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 477be20c..02d48073 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ - Update license link for editions, works, and collections to copyright - Update License page to Copyright and add section for "In Copyright" explanation +- Remove error codes from error page +- Update styling for mobile view of error page ## [0.18.3] diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx index c8952859..02d37b8a 100644 --- a/src/components/Feedback/Feedback.tsx +++ b/src/components/Feedback/Feedback.tsx @@ -5,6 +5,7 @@ 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 ERROR_NOTIFICATION_TEXT = `You are asking for help or information about a page error.`; const Feedback: React.FC = ({ location }) => { const [view, setView] = useState("form"); @@ -18,14 +19,19 @@ const Feedback: React.FC = ({ location }) => { onClose, isError, notificationText, + statusCode, setIsError, setNotificationText, } = useContext(FeedbackContext); useEffect(() => { - if (isError) setDescriptionText(ERROR_DESCRIPTION_TEXT); - else setDescriptionText(DEFAULT_DESCRIPTION_TEXT); - }, [isError]); + if (isError) { + setDescriptionText(ERROR_DESCRIPTION_TEXT); + setNotificationText(ERROR_NOTIFICATION_TEXT); + } else { + setDescriptionText(DEFAULT_DESCRIPTION_TEXT); + } + }, [isError, setNotificationText]); const onCloseAndReset = () => { if (isError) setIsError(false); @@ -38,7 +44,7 @@ const Feedback: React.FC = ({ location }) => { values: React.ComponentProps["onSubmit"] ) => { submitFeedback({ - feedback: values.comment, + feedback: isError ? `${statusCode} - ${values.comment}` : values.comment, category: isError ? "Bug" : values.category, url: location, email: values.email, diff --git a/src/context/FeedbackContext.tsx b/src/context/FeedbackContext.tsx index 5c739612..1a95a1a5 100644 --- a/src/context/FeedbackContext.tsx +++ b/src/context/FeedbackContext.tsx @@ -12,6 +12,8 @@ type FeedbackContextType = { setIsError: React.Dispatch>; notificationText: string | null; setNotificationText: React.Dispatch>; + statusCode: number | null; + setStatusCode: React.Dispatch>; }; export const FeedbackContext = createContext( @@ -24,6 +26,7 @@ export const FeedbackProvider: React.FC<{ const { FeedbackBox, isOpen, onOpen, onClose } = useFeedbackBox(); const [isError, setIsError] = useState(null); const [notificationText, setNotificationText] = useState(null); + const [statusCode, setStatusCode] = useState(null); return ( {children} diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 7177e3a3..7fe50dec 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -14,26 +14,19 @@ import { FeedbackContext } from "../context/FeedbackContext"; const ERROR_PERSISTS = " if the error persists."; -const getNotificationText = (statusCode) => { - return `You are asking for help or information about a page error (error code ${statusCode})`; -}; - const errorMap = { 500: { - overline: "error 500", heading: "Something went wrong on our end.", subText: "We encountered an error while trying to load the page. ", tryText: "Try refreshing the page or ", }, 404: { - overline: "error 404", heading: "We couldn't find that page.", subText: "The page you were looking for doesn't exist or may have moved elsewhere. ", tryText: "Try a different URL or ", }, 400: { - overline: "error 400", heading: "There was an unexpected error.", subText: "We couldn't process your request at this time. ", tryText: "Try again later or ", @@ -41,21 +34,23 @@ const errorMap = { }; const Error = ({ statusCode }) => { - const { onOpen, isError, setNotificationText, setIsError } = + const { onOpen, isError, setIsError, setStatusCode } = useContext(FeedbackContext); useEffect(() => { if (!isError) { setIsError(true); - setNotificationText(getNotificationText(statusCode)); + setStatusCode(statusCode); } - }, [isError, setIsError, setNotificationText, statusCode]); + }, [isError, setIsError, setStatusCode, statusCode]); return ( @@ -63,10 +58,9 @@ const Error = ({ statusCode }) => { src="/images/error-img.png" alt="" marginBottom="xl" - marginTop="xxxl" + marginTop={{ base: "xl", md: "xxxl" }} width={100} /> - {errorMap[statusCode].overline} {errorMap[statusCode].heading} @@ -89,7 +83,11 @@ const Error = ({ statusCode }) => { {ERROR_PERSISTS} - + Back to Digital Research Books From b65471b504d16c1b5edc8a312995bc6eab011db4 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Thu, 10 Oct 2024 15:07:06 -0400 Subject: [PATCH 2/3] updates based on feedback --- src/components/Feedback/Feedback.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx index 02d37b8a..1b8daba9 100644 --- a/src/components/Feedback/Feedback.tsx +++ b/src/components/Feedback/Feedback.tsx @@ -44,7 +44,9 @@ const Feedback: React.FC = ({ location }) => { values: React.ComponentProps["onSubmit"] ) => { submitFeedback({ - feedback: isError ? `${statusCode} - ${values.comment}` : values.comment, + feedback: isError + ? `Error Code: ${statusCode ?? "Unknown"} - ${values.comment}` + : values.comment, category: isError ? "Bug" : values.category, url: location, email: values.email, From 2f8d9c7e2465c86f01ba68fb28047751874c97e0 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Fri, 11 Oct 2024 11:20:36 -0400 Subject: [PATCH 3/3] add default error message --- src/pages/_error.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 7fe50dec..12737eb2 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -44,6 +44,11 @@ const Error = ({ statusCode }) => { } }, [isError, setIsError, setStatusCode, statusCode]); + // default to 400 messages for unexpected error codes + const errorValues = errorMap[statusCode] + ? errorMap[statusCode] + : errorMap[400]; + return ( { width={100} /> - {errorMap[statusCode].heading} + {errorValues.heading} - {errorMap[statusCode].subText} + {errorValues.subText} - {errorMap[statusCode].tryText} + {errorValues.tryText}