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",
|
"lodash.set": "^4.3.2",
|
||||||
"normalize-wheel": "^1.0.1",
|
"normalize-wheel": "^1.0.1",
|
||||||
"polygon-clipping": "^0.15.1",
|
"polygon-clipping": "^0.15.1",
|
||||||
|
"pretty-bytes": "^5.4.1",
|
||||||
"raw.macro": "^0.4.2",
|
"raw.macro": "^0.4.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
|
@ -1,5 +1,14 @@
|
|||||||
import React, { useState, useContext } from "react";
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
import { Label, Flex, Button, useColorMode, Checkbox, Divider } from "theme-ui";
|
import {
|
||||||
|
Label,
|
||||||
|
Flex,
|
||||||
|
Button,
|
||||||
|
useColorMode,
|
||||||
|
Checkbox,
|
||||||
|
Divider,
|
||||||
|
Text,
|
||||||
|
} from "theme-ui";
|
||||||
|
import prettyBytes from "pretty-bytes";
|
||||||
|
|
||||||
import Modal from "../components/Modal";
|
import Modal from "../components/Modal";
|
||||||
import Slider from "../components/Slider";
|
import Slider from "../components/Slider";
|
||||||
@ -16,6 +25,16 @@ function SettingsModal({ isOpen, onRequestClose }) {
|
|||||||
const { userId } = useContext(AuthContext);
|
const { userId } = useContext(AuthContext);
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const [labelSize, setLabelSize] = useSetting("map.labelSize");
|
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() {
|
async function handleEraseAllData() {
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
@ -96,6 +115,17 @@ function SettingsModal({ isOpen, onRequestClose }) {
|
|||||||
Erase all content and reset
|
Erase all content and reset
|
||||||
</Button>
|
</Button>
|
||||||
</Flex>
|
</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>
|
</Flex>
|
||||||
</Modal>
|
</Modal>
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
|
@ -9612,7 +9612,7 @@ prepend-http@^1.0.0:
|
|||||||
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
|
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
|
||||||
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
||||||
|
|
||||||
pretty-bytes@^5.3.0:
|
pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
|
||||||
version "5.4.1"
|
version "5.4.1"
|
||||||
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
|
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
|
||||||
integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
|
integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
|
||||||
|
Loading…
Reference in New Issue
Block a user