suplement: update styling and menu

server/src/api/v1/Utils.ts

@@ -32,7 +32,7 @@ export class Utils {
         files: await Files.count(),
         premiumUsers: await Users.count({ where: { plan: 'premium' } }),
       }
-    }, 3600)
+    }, 86400)
     return res.send({ analytics })
   }
 }

web/src/App.tsx

@@ -68,7 +68,7 @@ function App(): React.ReactElement {
 
   useEffect(() => {
     pwaInstallHandler.addListener(canInstall => {
-      if (canInstall) {
+      if (canInstall && !sessionStorage.getItem('install')) {
         notification.info({
           duration: null,
           message: 'Install App',
@@ -82,7 +82,7 @@ function App(): React.ReactElement {
               </Button>
             </Typography.Paragraph>
           </>,
-          onClose: () => localStorage.setItem('install', new Date().getTime().toString())
+          onClose: () => sessionStorage.setItem('install', new Date().getTime().toString())
         })
       }
     })
@@ -93,39 +93,43 @@ function App(): React.ReactElement {
       <Helmet>
         <meta name="theme-color" content={me?.user.settings?.theme === 'dark' ? '#1F1F1F' : '#0088CC'} />
       </Helmet>
-      {!/^\/view\/.*/gi.test(window.location.pathname) && <Navbar user={me?.user} />}
-      {data?.maintenance ? <Result
-        status="warning"
-        title="This site is under maintenance"
-        subTitle="We're preparing to serve you better."
-        extra={
-          <Button shape="round" type="primary" icon={<TwitterOutlined />} href="https://twitter.com/teledriveapp">
-            Follow us for updates
-          </Button>
-        }
-      /> : <div style={{ minHeight: '88vh' }}>
-        <Suspense fallback={<></>}>
-          <Switch>
-            <Route path="/dashboard/:type?" exact component={Dashboard} />
-            <Route path="/settings" exact component={() => <Settings me={me} error={errorMe} mutate={mutateMe} />} />
-            <Route path="/view/:id" exact component={View} />
-            <Route path="/login" exact>
-              {me?.user ? <Redirect to="/dashboard" /> : <Login me={me} />}
-            </Route>
-            <Route path="/terms" exact component={Terms} />
-            <Route path="/refund" exact component={Refund} />
-            <Route path="/privacy" exact component={Privacy} />
-            <Route path="/pricing" exact component={() => <Pricing me={me} />} />
-            <Route path="/contact" exact component={() => <Contact me={me} />} />
-            <Route path="/faq" exact component={Faq} />
-            <Route path="/" exact>
-              {new URLSearchParams(window.location.search).get('source') === 'pwa' ? <Redirect to="/dashboard" /> : <Home me={me} />}
-            </Route>
-            <Route component={NotFound} />
-          </Switch>
-        </Suspense>
-      </div>}
-      {!/^\/view\/.*/gi.test(window.location.pathname) && <Footer me={me} />}
+      {data?.maintenance ? <div style={{ minHeight: '88vh', paddingTop: '20vh' }}>
+        <Result
+          status="warning"
+          title="This site is under maintenance"
+          subTitle="We're preparing to serve you better."
+          extra={
+            <Button shape="round" type="primary" icon={<TwitterOutlined />} href="https://twitter.com/teledriveapp">
+              Follow us for updates
+            </Button>
+          }
+        />
+      </div> : <>
+        {!/^\/view\/.*/gi.test(window.location.pathname) && <Navbar user={me?.user} />}
+        <div style={{ minHeight: '88vh' }}>
+          <Suspense fallback={<></>}>
+            <Switch>
+              <Route path="/dashboard/:type?" exact component={Dashboard} />
+              <Route path="/settings" exact component={() => <Settings me={me} error={errorMe} mutate={mutateMe} />} />
+              <Route path="/view/:id" exact component={View} />
+              <Route path="/login" exact>
+                {me?.user ? <Redirect to="/dashboard" /> : <Login me={me} />}
+              </Route>
+              <Route path="/terms" exact component={Terms} />
+              <Route path="/refund" exact component={Refund} />
+              <Route path="/privacy" exact component={Privacy} />
+              <Route path="/pricing" exact component={() => <Pricing me={me} />} />
+              <Route path="/contact" exact component={() => <Contact me={me} />} />
+              <Route path="/faq" exact component={Faq} />
+              <Route path="/" exact>
+                {new URLSearchParams(window.location.search).get('source') === 'pwa' ? <Redirect to="/dashboard" /> : <Home me={me} />}
+              </Route>
+              <Route component={NotFound} />
+            </Switch>
+          </Suspense>
+        </div>
+        {!/^\/view\/.*/gi.test(window.location.pathname) && <Footer me={me} />}
+      </>}
     </Layout>
   )
 }

web/src/pages/Settings.tsx

@@ -1,6 +1,7 @@
-import { ArrowLeftOutlined, CrownOutlined, FrownOutlined, LogoutOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
+import { ArrowLeftOutlined, CrownOutlined, FrownOutlined, LogoutOutlined, MobileOutlined, ReloadOutlined, WarningOutlined } from '@ant-design/icons'
 import { Avatar, Button, Card, Col, Form, Input, Layout, List, Modal, notification, Popover, Row, Switch, Typography } from 'antd'
 import { useForm } from 'antd/es/form/Form'
+import pwaInstallHandler from 'pwa-install-handler'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import useSWRImmutable from 'swr/immutable'
@@ -18,6 +19,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   const [expandableRows, setExpandableRows] = useState<boolean>()
   const [logoutConfirmation, setLogoutConfirmation] = useState<boolean>(false)
   const [removeConfirmation, setRemoveConfirmation] = useState<boolean>(false)
+  const [pwa, setPwa] = useState<{ canInstall: boolean, install: () => Promise<boolean> }>()
   const [formRemoval] = useForm()
   const { data: respVersion } = useSWRImmutable('/utils/version', fetcher)
 
@@ -49,6 +51,12 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
     }
   }, [error])
 
+  useEffect(() => {
+    pwaInstallHandler.addListener(canInstall => {
+      setPwa({ canInstall, install: pwaInstallHandler.install })
+    })
+  }, [])
+
   const logout = async () => {
     await req.post('/auth/logout')
     return window.location.replace('/')
@@ -118,6 +126,12 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
                   <List.Item.Meta title="Check Updates" description="Reload to checking for updates" />
                 </List.Item>
 
+                {pwa?.canInstall && <List.Item key="install" actions={[<Form.Item>
+                  <Button shape="round" icon={<MobileOutlined />} onClick={pwa?.install}>Install</Button>
+                </Form.Item>]}>
+                  <List.Item.Meta title="Install App" description="Install TeleDrive to your device" />
+                </List.Item>}
+
                 <List.Item key="delete-account" actions={[<Form.Item>
                   <Button shape="round" danger type="primary" icon={<FrownOutlined />} onClick={() => setRemoveConfirmation(true)}>Delete</Button>
                 </Form.Item>]}>