From 5c56912993a96546d8d4dae75dac7867eb21fd79 Mon Sep 17 00:00:00 2001
From: Lenny Peters <lpeters3@lululemon.com>
Date: Tue, 27 Aug 2024 10:07:17 -0700
Subject: [PATCH 1/2] =?UTF-8?q?style:=20=F0=9F=92=84=20color=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App.js      | 18 +++++++++++-------
 src/components/Fallback.js | 19 +++++++++++++++++++
 src/styles/global.scss     |  3 +++
 3 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Fallback.js

diff --git a/src/components/App.js b/src/components/App.js
index 163501d..ea39df3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,4 +1,6 @@
 import React, { Suspense, lazy } from "react";
+import ErrorBoundary from "./ErrorBoundary";
+import Fallback from "./Fallback";
 const Counter = lazy(() => import("./Counter"));
 
 const App = () => {
@@ -7,14 +9,16 @@ const App = () => {
     <div>
       <header>
         {/* messing up on purpose */}
-        <h1>{testMessage}</h1>
+        <h1 className="red">{testMessage}</h1>
       </header>
-      <Suspense fallback={<div>Loading...</div>}>
-        {/* another mistake */}
-        <main id="content">
-          <Counter />
-        </main>
-      </Suspense>
+      <ErrorBoundary fallback={Fallback}>
+        <Suspense fallback={<div>Loading...</div>}>
+          {/* another mistake */}
+          <main id="content">
+            <Counter />
+          </main>
+        </Suspense>
+      </ErrorBoundary>
     </div>
   );
 };
diff --git a/src/components/Fallback.js b/src/components/Fallback.js
new file mode 100644
index 0000000..2d07465
--- /dev/null
+++ b/src/components/Fallback.js
@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Fallback = ({ message, criticalRenderPath }) => {
+  return (
+    <div data-testid="default-fallback">
+      {criticalRenderPath && (
+        <p>{message || "Something went wrong, please retry"}</p>
+      )}
+    </div>
+  );
+};
+
+Fallback.propTypes = {
+  message: PropTypes.string,
+  criticalRenderPath: PropTypes.bool,
+};
+
+export default Fallback;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d353c5b..2185b9d 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -10,3 +10,6 @@ button {
   margin-right: 16px;
 }
 
+.red {
+  color: red;
+}

From edb484b206f1962b776036f0e3d6c46f5c1d09e7 Mon Sep 17 00:00:00 2001
From: Lenny Peters <lpeters3@lululemon.com>
Date: Tue, 27 Aug 2024 11:00:23 -0700
Subject: [PATCH 2/2] =?UTF-8?q?test:=20=F0=9F=92=8D=20updating?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 192148a..0c759cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ yarn-error.log*
 # IDE's
 .vscode
 .idea
+src/components
\ No newline at end of file