refresh button for cloud storage info

src/components/Storage/CloudStorageSelector.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import {
   CloudStorage,
   createStorage,
   User,
   useUserCloudInfo
 } from '../../lib/accounts'
+import Icon from '@mdi/react'
+import { mdiRefresh, mdiLoading } from '@mdi/js'
 
 interface CloudStorageSelectProps {
   name?: string
@@ -22,9 +24,9 @@ export default ({
   buttonText
 }: CloudStorageSelectProps) => {
   const [storageName, setStorageName] = useState(name)
-  const [isLoading, setIsLoading] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [active, setActive] = useState(0)
-  const [userInfo, updateUserInfo] = useUserCloudInfo(user)
+  const [userInfo, updateUserInfo, gettingInfo] = useUserCloudInfo(user)
 
   if (userInfo === 'loading') {
     return <div>Loading...</div>
@@ -34,7 +36,7 @@ export default ({
   const canCreateCloudStorages = subscription != null || storages.length < 1
 
   const createStorageCallback = async () => {
-    setIsLoading(true)
+    setLoading(true)
     const cloudStorage =
       active > 0
         ? storages.filter(storage => storage.id === active)[0]
@@ -46,9 +48,15 @@ export default ({
       updateUserInfo()
       onLink(cloudStorage)
     }
-    setIsLoading(false)
+    setLoading(false)
   }
 
+  const reloadStorageInfo = useCallback(() => {
+    if (!gettingInfo) {
+      updateUserInfo()
+    }
+  }, [updateUserInfo, gettingInfo])
+
   return (
     <div>
       {!canCreateCloudStorages && (
@@ -77,6 +85,12 @@ export default ({
                 </option>
               ))}
             </select>
+            <span onClick={reloadStorageInfo}>
+              <Icon
+                path={gettingInfo ? mdiLoading : mdiRefresh}
+                size='20px'
+              />
+            </span>
           </div>
           {active === 0 && (
             <div>
@@ -90,7 +104,7 @@ export default ({
           )}
           <div>
             <button onClick={createStorageCallback}>
-              {!isLoading ? buttonText || 'Link Storage' : 'Creating...'}
+              {!loading ? buttonText || 'Link Storage' : 'Creating...'}
             </button>
           </div>
         </>

src/lib/accounts/users.ts

@@ -40,26 +40,29 @@ export const useUsers = (): [User[], UserRepo] => {
 const cache: { [key: number]: UserCloudInfo } = {}
 export const useUserCloudInfo = (
   user: User
-): ['loading' | UserCloudInfo, () => void] => {
+): ['loading' | UserCloudInfo, () => void, boolean] => {
   const [info, setInfo] = useState<'loading' | UserCloudInfo>(() => {
     return cache[user.id] != undefined ? cache[user.id] : 'loading'
   })
   const [forceFlag, setForceFlag] = useState(true)
+  const [running, setRunning] = useState(false)
 
   useEffect(() => {
-    let isSubscribed = true
+    let subscribed = true
+    setRunning(true)
     getUserCloudInfo(user).then(info => {
       cache[user.id] = info
-      if (isSubscribed) {
+      setRunning(false)
+      if (subscribed) {
         setInfo(info)
       }
     })
     return () => {
-      isSubscribed = false
+      subscribed = false
     }
   }, [user, forceFlag])
 
-  return [info, () => setForceFlag(!forceFlag)]
+  return [info, () => setForceFlag(!forceFlag), running]
 }
 
 const getUserCloudInfo = (user: User): Promise<UserCloudInfo> => {