From 757f12d2f36d59e2cac7e067a58b00f90481c86d Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Wed, 7 Oct 2020 15:43:00 -0400
Subject: [PATCH] Notice: rename Warn -> Notice and add composability

The Notice component can now act as a general indicator component,
exposing four types: "wait", "help", "warn", or "none". These types
display different icons and make this a much more reusable element.

We also render children passed to us, making this even more extendable.
In future, we may wish to extract all message props altogether as
children instead.
---
 src/components/App/App.css                    |  1 -
 src/components/App/App.tsx                    | 10 +++++++---
 .../{Warn/Warn.tsx => Notice/Notice.tsx}      | 20 ++++++++++++++-----
 3 files changed, 22 insertions(+), 9 deletions(-)
 rename src/components/{Warn/Warn.tsx => Notice/Notice.tsx} (55%)

diff --git a/src/components/App/App.css b/src/components/App/App.css
index 42bedec..b1cc0a6 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -25,7 +25,6 @@ pre,
 code {
   font-family: "IBM Plex Mono", "Courier New", monospace;
   font-size: 14px;
-  color: "black";
 }
 
 pre {
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 03455db..1dec31c 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,7 +6,11 @@ import Toolbar from "../Toolbar/Toolbar";
 import IconGrid from "../IconGrid/IconGrid";
 import Footer from "../Footer/Footer";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import Warn from "../Warn/Warn";
+import Notice from "../Notice/Notice";
+
+const errorFallback = <Notice message="Search error" />;
+// const waitingFallback = <Notice type="wait" message="Loading..." />;
+const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
   return (
@@ -14,8 +18,8 @@ const App: React.FC<any> = () => {
       <Header />
       <main>
         <Toolbar />
-        <ErrorBoundary fallback={<Warn message="Search error"/>}>
-          <Suspense fallback={<div>Loading...</div>}>
+        <ErrorBoundary fallback={errorFallback}>
+          <Suspense fallback={waitingFallback}>
             <IconGrid />
           </Suspense>
         </ErrorBoundary>
diff --git a/src/components/Warn/Warn.tsx b/src/components/Notice/Notice.tsx
similarity index 55%
rename from src/components/Warn/Warn.tsx
rename to src/components/Notice/Notice.tsx
index 8b213de..a89d20f 100644
--- a/src/components/Warn/Warn.tsx
+++ b/src/components/Notice/Notice.tsx
@@ -4,13 +4,14 @@ import { useRecoilValue } from "recoil";
 
 import { isDarkThemeSelector } from "../../state/selectors";
 import { searchQueryAtom } from "../../state/atoms";
-import { SmileyXEyes } from "phosphor-react";
+import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
 
-interface WarnProps {
+interface NoticeProps {
   message?: string;
+  type?: "wait" | "help" | "warn" | "none";
 }
 
-const Warn: React.FC<WarnProps> = ({ message }) => {
+const Notice: React.FC<NoticeProps> = ({ message, type = "warn", children }) => {
   const isDark = useRecoilValue(isDarkThemeSelector);
   const query = useRecoilValue(searchQueryAtom);
 
@@ -22,15 +23,24 @@ const Warn: React.FC<WarnProps> = ({ message }) => {
         animate={{ opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
-        <SmileyXEyes size={128} color="#615C68" weight="duotone" />
+        {type === "wait" && (
+          <HourglassMedium size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "help" && (
+          <Question size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "warn" && (
+          <SmileyXEyes size={128} color="#615C68" weight="duotone" />
+        )}
         {message ?? (
           <p>
             No results for "<code>{query}</code>"
           </p>
         )}
+        {children}
       </motion.div>
     </div>
   );
 };
 
-export default Warn;
+export default Notice;