From 9163b13e92a8285deed1c812897035a037202ba2 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Thu, 24 Aug 2023 10:11:19 -0500
Subject: [PATCH] add error notice component to resource page

---
 src/components/notice.tsx     | 17 +++++++++++++++++
 src/pages/resources/index.tsx | 10 +++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/notice.tsx

diff --git a/src/components/notice.tsx b/src/components/notice.tsx
new file mode 100644
index 0000000..e0db851
--- /dev/null
+++ b/src/components/notice.tsx
@@ -0,0 +1,17 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"
+
+export const ErrorNotice = ({header, body, icon}: {header?: string, body?: string, icon?: boolean}) => {
+  return <>
+    {header ? (
+      <div className="rounded-xl mx-auto w-fit px-4 py-4 bg-red-100 border-red-300 border text-center font-semibold text-red-600">
+        {icon ? (
+          <div className="mx-auto grid place-items-center">
+            <ExclamationTriangleIcon className="w-10 h-10" />
+          </div>
+        ) : undefined}
+        <span className="text-lg font-semibold text-red-500">{header}</span>
+        {body ? (<p className="font-normal text-stone-600 text-sm mx-8 my-2">{body}</p>) : undefined}
+      </div>
+    ) : undefined}
+    </>
+}
\ No newline at end of file
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index d27cb1d..dbcb3f9 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -8,6 +8,7 @@ import { parseQueryData } from "~/utils/parseSearchForm";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
 import { LoadingBarChart } from "~/components/LoadingBarChart";
+import { ErrorNotice } from "~/components/notice";
 
 const Resources = () => {
   const router = useRouter();
@@ -31,9 +32,16 @@ const Resources = () => {
   const printLink = `${router.route}/print?${printQueryStr}`;
 
   const ConditionalTable = () => {
-    if (!resourceQuery.data) {
+    if (resourceQuery.isLoading) {
       return <LoadingBarChart width={200} height={200} />;
     }
+    
+    if (!resourceQuery.data || resourceQuery.isError) {
+      return <div className="my-28">
+        <ErrorNotice icon header="Unable to pull available resources. Please try again."
+        body="If this issue persists, please contact a site administrator" />
+        </div>
+    }
 
     const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);