Added banner for quota exceeded error

src/contexts/DatabaseContext.js

@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { Box, Text } from "theme-ui";
+
+import Banner from "../components/Banner";
 
 import { getDatabase } from "../database";
 
@@ -7,6 +10,7 @@ const DatabaseContext = React.createContext();
 export function DatabaseProvider({ children }) {
   const [database, setDatabase] = useState();
   const [databaseStatus, setDatabaseStatus] = useState("loading");
+  const [databaseError, setDatabaseError] = useState();
 
   useEffect(() => {
     // Create a test database and open it to see if indexedDB is enabled
@@ -34,15 +38,43 @@ export function DatabaseProvider({ children }) {
       await db.open();
       window.indexedDB.deleteDatabase("__test");
     };
+
+    function handleDatabaseError(event) {
+      if (event.reason.name === "QuotaExceededError") {
+        event.preventDefault();
+        setDatabaseError({
+          name: event.reason.name,
+          message: "Storage Quota Exceeded Please Clear Space and Try Again.",
+        });
+      }
+    }
+    window.addEventListener("unhandledrejection", handleDatabaseError);
+
+    return () => {
+      window.removeEventListener("unhandledrejection", handleDatabaseError);
+    };
   }, []);
 
   const value = {
     database,
     databaseStatus,
+    databaseError,
   };
   return (
     <DatabaseContext.Provider value={value}>
-      {children}
+      <>
+        {children}
+        <Banner
+          isOpen={!!databaseError}
+          onRequestClose={() => setDatabaseError()}
+        >
+          <Box p={1}>
+            <Text as="p" variant="body2">
+              {databaseError && databaseError.message}
+            </Text>
+          </Box>
+        </Banner>
+      </>
     </DatabaseContext.Provider>
   );
 }