fix pretty bytes with NaN

web/src/pages/Settings.tsx

@@ -26,7 +26,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   // })
 
   const save = (settings: any) => {
-    req.patch('/users/me/settings', { settings })
+    return req.patch('/users/me/settings', { settings })
       .then(() => {
         notification.success({  message: 'Settings saved' })
         // setExpandableRows(!expandableRows)
@@ -92,8 +92,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
               </Form.Item>
               <Form.Item label="Dark Mode" name="expandable_rows">
                 <Switch onChange={val => {
-                  save({ theme: val ? 'dark' : 'light' })
-                  return window.location.reload()
+                  return save({ theme: val ? 'dark' : 'light' }).then(window.location.reload)
                 }} checked={me?.user.settings?.theme === 'dark'} defaultChecked={me?.user.settings?.theme === 'dark'} />
               </Form.Item>
               <Form.Item label="Check Updates">

web/src/pages/components/Navbar.tsx

@@ -43,7 +43,7 @@ const Navbar: React.FC<Props> = ({ user, page }) => {
         <Popover placement="bottomRight" trigger={['click']} content={<div>
           <div style={{ padding: '10px' }}>
             Bandwidth usage: { }
-            {user?.plan === 'premium' ? <Tag color="green">Unlimited</Tag> : <Tooltip placement="left" title={<>You can download up to {prettyBytes(Math.max(0, 1_500_000_000 - Number(usage?.usage.usage)))} until {moment(usage?.usage.expire).local().format('lll')}</>}>
+            {user?.plan === 'premium' ? <Tag color="green">Unlimited</Tag> : <Tooltip placement="left" title={<>You can download up to {prettyBytes(Math.max(0, 1_500_000_000 - Number(usage?.usage.usage) || 0))} until {moment(usage?.usage.expire).local().format('lll')}</>}>
               <Progress status="exception" percent={Number((Number(usage?.usage.usage || 0) / 1_500_000_000 * 100).toFixed(1))} />
             </Tooltip>}
           </div>