From 9ee3efbadbf9a60ac652ebb32aaaf2f9a30c01e8 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 26 Nov 2020 13:17:53 +1100
Subject: [PATCH] Added storage usage summary to settings modal

---
 package.json                |  1 +
 src/modals/SettingsModal.js | 34 ++++++++++++++++++++++++++++++++--
 yarn.lock                   |  2 +-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 29e085b..12a68ac 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "lodash.set": "^4.3.2",
     "normalize-wheel": "^1.0.1",
     "polygon-clipping": "^0.15.1",
+    "pretty-bytes": "^5.4.1",
     "raw.macro": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 126d371..862d289 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.js
@@ -1,5 +1,14 @@
-import React, { useState, useContext } from "react";
-import { Label, Flex, Button, useColorMode, Checkbox, Divider } from "theme-ui";
+import React, { useState, useContext, useEffect } from "react";
+import {
+  Label,
+  Flex,
+  Button,
+  useColorMode,
+  Checkbox,
+  Divider,
+  Text,
+} from "theme-ui";
+import prettyBytes from "pretty-bytes";
 
 import Modal from "../components/Modal";
 import Slider from "../components/Slider";
@@ -16,6 +25,16 @@ function SettingsModal({ isOpen, onRequestClose }) {
   const { userId } = useContext(AuthContext);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [labelSize, setLabelSize] = useSetting("map.labelSize");
+  const [storageEstimate, setStorageEstimate] = useState({
+    usage: 0,
+    quota: 0,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      navigator.storage.estimate().then(setStorageEstimate);
+    }
+  }, [isOpen]);
 
   async function handleEraseAllData() {
     localStorage.clear();
@@ -96,6 +115,17 @@ function SettingsModal({ isOpen, onRequestClose }) {
               Erase all content and reset
             </Button>
           </Flex>
+          <Flex sx={{ justifyContent: "center" }}>
+            <Text variant="caption">
+              Storage Used: {prettyBytes(storageEstimate.usage)} of{" "}
+              {prettyBytes(storageEstimate.quota)} (
+              {Math.round(
+                (storageEstimate.usage / Math.max(storageEstimate.quota, 1)) *
+                  100
+              )}
+              %)
+            </Text>
+          </Flex>
         </Flex>
       </Modal>
       <ConfirmModal
diff --git a/yarn.lock b/yarn.lock
index e99fdda..a9321ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9612,7 +9612,7 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-pretty-bytes@^5.3.0:
+pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
   integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==