[ADD] Install button on the footer

oscarrc · Feb 20, 2021 · 1444e70 · 1444e70
1 parent a197f1f
commit 1444e70
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
@@ -1,16 +1,27 @@
-import React, { useEffect, useRef } from 'react';
-import { Space, Button, Layout } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Space, Button, Layout, Tooltip } from 'antd';
 import { HeartFilled, CoffeeOutlined, BugOutlined, CloudDownloadOutlined } from '@ant-design/icons';
 
 export function Footer() {
     const { Footer } = Layout;
-    let install = useRef(null);
+    const [supportsPWA, setSupportsPWA] = useState(false);
+    const [promptInstall, setPromptInstall] = useState(null);
+
+    const install = evt => {
+        evt.preventDefault();
+        if(promptInstall) promptInstall.prompt();
+        promptInstall.userChoice.then((choiceResult) => {
+            if (choiceResult.outcome === 'accepted') setSupportsPWA(false);
+        });
+    };
 
     useEffect(() => {
-        window.addEventListener('beforeinstallprompt', (e) => {
+        const handler = e => {
             e.preventDefault();
-            install.current = e;
-        })
+            setSupportsPWA(true);
+            setPromptInstall(e);
+          };
+          window.addEventListener("beforeinstallprompt", handler);
     }, []);
 
     return  (
@@ -20,8 +31,13 @@ export function Footer() {
                 <p className="text-light"><i>This page is not affiliated or endorsed by Korg</i></p>
                 <Space>
                     <Button ghost size="small" className="btn-gold" href="https://ko-fi.com/oscarrc" target="_BLANK"><CoffeeOutlined /> Buy me a coffee</Button>
-                    { install.current ? <Button onClick={ install.current.prompt } ghost size="small" className="btn-gold"><CloudDownloadOutlined /></Button> : ""}
-                    <Button ghost size="small" className="btn-gold" href="https://github.com/oscarrc/nts-web/issues" target="_BLANK"><BugOutlined /></Button>
+                    { supportsPWA ? <Tooltip title="Install the app">
+                                        <Button onClick={ install } ghost size="small" className="btn-gold"><CloudDownloadOutlined /></Button> 
+                                    </Tooltip>
+                                  : ""}
+                    <Tooltip title="Report a bug">
+                        <Button ghost size="small" className="btn-gold" href="https://github.com/oscarrc/nts-web/issues" target="_BLANK"><BugOutlined /></Button>
+                    </Tooltip>                    
                 </Space>
             </Space>
         </Footer>