Added storage usage summary to settings modal
This commit is contained in:
parent
794ba22689
commit
9ee3efbadb
@ -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",
|
||||
|
@ -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
|
||||
|
@ -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==
|
||||
|
Loading…
Reference in New Issue
Block a user