fix: show custom storage quota to user (#1338)

web3-storage · May 30, 2022 · 51abb35 · 51abb35
1 parent 63328b5
commit 51abb35
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 48 deletions.
diff --git a/packages/api/src/user.js b/packages/api/src/user.js
@@ -111,10 +111,13 @@ export async function userTokensPost (request, env) {
  * @param {import('./env').Env} env
  */
 export async function userAccountGet (request, env) {
-  const usedStorage = await env.db.getStorageUsed(Number(request.auth.user._id))
-
+  const [usedStorage, storageLimitBytes] = await Promise.all([
+    env.db.getStorageUsed(request.auth.user._id),
+    env.db.getUserTagValue(request.auth.user._id, 'StorageLimitBytes')
+  ])
   return new JSONResponse({
-    usedStorage
+    usedStorage,
+    storageLimitBytes
   })
 }
 

diff --git a/packages/website/components/account/storageManager/storageManager.js b/packages/website/components/account/storageManager/storageManager.js
@@ -8,15 +8,9 @@ import Button, { ButtonVariant } from 'components/button/button';
 import { useUser } from 'components/contexts/userContext';
 import { elementIsInViewport } from 'lib/utils';
 
-// Tiers available
-export const StorageTiers = {
-  TIER_1: '0',
-  TIER_2: '1',
-  TIER_3: '2',
-};
-
 // Raw TiB number of bytes, to be used in calculations
 const tebibyte = 1099511627776;
+const defaultStorageLimit = tebibyte;
 
 /**
  * @typedef {Object} StorageManagerProps
@@ -34,39 +28,23 @@ const mailTo = `mailto:${emailContent.mail}?subject=${emailContent.subject}&body
  * @returns
  */
 const StorageManager = ({ className = '', content }) => {
-  const storageTier = StorageTiers.TIER_1; // No tier available?
   const {
     storageData: { data, isLoading },
   } = useUser();
   const uploaded = useMemo(() => data?.usedStorage?.uploaded || 0, [data]);
   const psaPinned = useMemo(() => data?.usedStorage?.psaPinned || 0, [data]);
+  const limit = useMemo(() => data?.storageLimitBytes || defaultStorageLimit, [data]);
   const [componentInViewport, setComponentInViewport] = useState(false);
   const storageManagerRef = useRef(/** @type {HTMLDivElement | null} */ (null));
 
   const { maxSpaceLabel, unlockLabel, percentUploaded, percentPinned } = useMemo(
-    () =>
-      // Storage information by tier
-      ({
-        [StorageTiers.TIER_1]: {
-          maxSpaceLabel: content.tiers[0].max_space_label,
-          unlockLabel: content.tiers[0].unlock_label,
-          percentUploaded: (uploaded / tebibyte) * 100,
-          percentPinned: (psaPinned / tebibyte) * 100,
-        },
-        [StorageTiers.TIER_2]: {
-          maxSpaceLabel: content.tiers[1].max_space_label,
-          unlockLabel: content.tiers[1].unlock_label,
-          percentUploaded: (uploaded / (tebibyte * 10)) * 100,
-          percentPinned: (psaPinned / (tebibyte * 10)) * 100,
-        },
-        [StorageTiers.TIER_3]: {
-          maxSpaceLabel: `${Math.floor(uploaded + psaPinned / (tebibyte * 10) + 1) + content.tiers[2].max_space_label}`,
-          // every increment of 10 changes the amount of space used
-          percentUploaded: ((uploaded % (tebibyte * 10)) / (tebibyte * 10)) * 100,
-          percentPinned: ((psaPinned % (tebibyte * 10)) / (tebibyte * 10)) * 100,
-        },
-      }[storageTier]),
-    [storageTier, uploaded, psaPinned, content.tiers]
+    () => ({
+      maxSpaceLabel: `${Math.floor(limit / tebibyte)} ${content.max_space_tib_label}`,
+      unlockLabel: content.unlock_label,
+      percentUploaded: (uploaded / limit) * 100,
+      percentPinned: (psaPinned / limit) * 100,
+    }),
+    [uploaded, psaPinned, limit, content]
   );
 
   useEffect(() => {

diff --git a/packages/website/components/contexts/userContext.js b/packages/website/components/contexts/userContext.js
@@ -26,7 +26,10 @@ import AccountBlockedModal from 'components/account/accountBlockedModal/accountB
  * @property {string} publicAddress
  * @property {string} created
  * @property {string} updated
- * @property {import('react-query').UseQueryResult<{usedStorage: {uploaded: number, psaPinned: number}}>} storageData
+ * @property {import('react-query').UseQueryResult<{
+ *   usedStorage: {uploaded: number, psaPinned: number},
+ *   storageLimitBytes: number
+ * }>} storageData
  * @property {string} isLoadingStorage
  */
 

diff --git a/packages/website/content/pages/app/account.json b/packages/website/content/pages/app/account.json
@@ -75,19 +75,8 @@
         "request": "Submit a request"
       },
       "loading": "Loading...",
-      "tiers": [
-        {
-          "max_space_label": "1 TiB",
-          "unlock_label": "1 TiB+"
-        },
-        {
-          "max_space_label": "10 TiB",
-          "unlock_label": "10 TiB+"
-        },
-        {
-          "max_space_label": "0 TiB+"
-        }
-      ]
+      "max_space_tib_label": "TiB",
+      "unlock_label": "1 TiB+"
     },
     "file_manager": {
       "heading": "Files",