From 95d0509693da4f47a735ceec953373e1e7cd8faa Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 26 Nov 2020 15:24:33 +1100
Subject: [PATCH] Added banner for quota exceeded error

---
 src/contexts/DatabaseContext.js | 34 ++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/contexts/DatabaseContext.js b/src/contexts/DatabaseContext.js
index 98ee4d0..323b49a 100644
--- a/src/contexts/DatabaseContext.js
+++ b/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>
   );
 }