altered CloudStorageSelector and useUseInfo to reflect new subscripti…

src/components/Storage/CloudStorageSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState } from 'react'
 import {
   CloudStorage,
   createStorage,
@@ -28,14 +28,14 @@ export default ({
   const [active, setActive] = useState(0)
   const [userInfo, updateUserInfo, gettingInfo] = useUserCloudInfo(user)
 
-  if (userInfo === 'loading') {
-    return <div>Loading...</div>
-  }
-
-  const { subscription, storages } = userInfo
-  const canCreateCloudStorages = subscription != null || storages.length < 1
+  const { subscription, storages, usage } = userInfo
+  const canCreateCloudStorages =
+    subscription == null ? usage < 100 : usage < subscription.quantity
 
   const createStorageCallback = async () => {
+    if (loading || gettingInfo) {
+      return
+    }
     setLoading(true)
     const cloudStorage =
       active > 0
@@ -51,11 +51,11 @@ export default ({
     setLoading(false)
   }
 
-  const reloadStorageInfo = useCallback(() => {
+  const reloadStorageInfo = () => {
     if (!gettingInfo) {
       updateUserInfo()
     }
-  }, [updateUserInfo, gettingInfo])
+  }
 
   return (
     <div>
@@ -86,10 +86,7 @@ export default ({
               ))}
             </select>
             <span onClick={reloadStorageInfo}>
-              <Icon
-                path={gettingInfo ? mdiLoading : mdiRefresh}
-                size='20px'
-              />
+              <Icon path={gettingInfo ? mdiLoading : mdiRefresh} size='20px' />
             </span>
           </div>
           {active === 0 && (
@@ -104,7 +101,9 @@ export default ({
           )}
           <div>
             <button onClick={createStorageCallback}>
-              {!loading ? buttonText || 'Link Storage' : 'Creating...'}
+              {!(loading || gettingInfo)
+                ? buttonText || 'Link Storage'
+                : 'Working...'}
             </button>
           </div>
         </>

src/lib/accounts/api/storage.ts

@@ -2,8 +2,8 @@ import { apiPost, apiGet } from './utils'
 
 export interface CloudStorage {
   id: number
-  active: boolean
   name: string
+  size: number
 }
 
 interface User {

src/lib/accounts/api/subscription.ts

@@ -2,6 +2,7 @@ import { apiGet } from './utils'
 
 export interface Subscription {
   id: number
+  quantity: number
   status: 'active' | 'past_due' | 'incomplete'
 }
 

src/lib/accounts/users.ts

@@ -12,6 +12,7 @@ export interface User {
 export interface UserCloudInfo {
   storages: CloudStorage[]
   subscription: Subscription | undefined
+  usage: number
 }
 
 interface UserRepo {
@@ -40,9 +41,11 @@ export const useUsers = (): [User[], UserRepo] => {
 const cache: { [key: number]: UserCloudInfo } = {}
 export const useUserCloudInfo = (
   user: User
-): ['loading' | UserCloudInfo, () => void, boolean] => {
-  const [info, setInfo] = useState<'loading' | UserCloudInfo>(() => {
-    return cache[user.id] != undefined ? cache[user.id] : 'loading'
+): [UserCloudInfo, () => void, boolean] => {
+  const [info, setInfo] = useState<UserCloudInfo>(() => {
+    return cache[user.id] != undefined
+      ? cache[user.id]
+      : { storages: [] as CloudStorage[], usage: 1, subscription: undefined }
   })
   const [forceFlag, setForceFlag] = useState(true)
   const [running, setRunning] = useState(false)
@@ -65,10 +68,17 @@ export const useUserCloudInfo = (
   return [info, () => setForceFlag(!forceFlag), running]
 }
 
-const getUserCloudInfo = (user: User): Promise<UserCloudInfo> => {
-  return Promise.all([getStorages(user), getSubscription(user)]).then(
-    ([storages, subscription]) => ({ storages, subscription })
-  )
+const getUserCloudInfo = async (user: User): Promise<UserCloudInfo> => {
+  const [storages, subscription] = await Promise.all([
+    getStorages(user),
+    getSubscription(user)
+  ])
+
+  return {
+    storages,
+    subscription,
+    usage: storages.reduce((sum, storage) => sum + storage.size, 0)
+  }
 }
 
 const removeUser = (user: User, users: User[]) => {