From 2a1d2cf30f5d1117e0ebd10c8e3469ff10f5767c Mon Sep 17 00:00:00 2001
From: Filip Chalupa <chalupa.filip@gmail.com>
Date: Sat, 9 Mar 2024 16:28:31 +0100
Subject: [PATCH] Add install button

---
 components/Frontpage.tsx | 34 +++++++++++++++++++++++++++++-----
 package-lock.json        | 34 ++++++++++++++++++++++++++++++++++
 package.json             |  1 +
 3 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/components/Frontpage.tsx b/components/Frontpage.tsx
index 34f5e2d..40a0669 100644
--- a/components/Frontpage.tsx
+++ b/components/Frontpage.tsx
@@ -1,4 +1,5 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import AddBoxIcon from '@mui/icons-material/AddBox'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
 import SettingsIcon from '@mui/icons-material/Settings'
 import {
@@ -15,6 +16,7 @@ import Typography from '@mui/material/Typography'
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
+import { usePWAInstall } from 'react-use-pwa-install'
 import logo from '../public/images/app-icon/favicon.svg'
 import { CreateCustomForm } from './CreateCustomForm'
 
@@ -36,6 +38,8 @@ export const Frontpage: React.FunctionComponent = () => {
 
 	const dynamicPresets = React.useMemo(() => ['1', '2', '3'], [])
 
+	const install = usePWAInstall()
+
 	return (
 		<Box paddingTop={4} paddingBottom={4}>
 			<Container maxWidth="xs">
@@ -93,11 +97,31 @@ export const Frontpage: React.FunctionComponent = () => {
 					Create custom controlled
 				</Typography>
 				<CreateCustomForm />
-				<Box paddingBottom={10} />
-				<Typography variant="h5" component="h2" gutterBottom>
-					Donate
-				</Typography>
+				<Box paddingBottom={4} />
 				<List>
+					<ListItem
+						disablePadding
+						style={
+							Boolean(install)
+								? undefined
+								: {
+										opacity: 0,
+										visibility: 'hidden',
+								  }
+						}
+					>
+						<ListItemButton
+							onClick={() => {
+								install()
+							}}
+							disabled={!install}
+						>
+							<ListItemIcon>
+								<AddBoxIcon />
+							</ListItemIcon>
+							<ListItemText primary="Install Just Countdown" />
+						</ListItemButton>
+					</ListItem>
 					<ListItem disablePadding>
 						<ListItemButton
 							component={Link}
@@ -106,7 +130,7 @@ export const Frontpage: React.FunctionComponent = () => {
 							<ListItemIcon>
 								<FavoriteBorderIcon />
 							</ListItemIcon>
-							<ListItemText primary="filipchalupa.cz" />
+							<ListItemText primary="Donate to filipchalupa.cz" />
 						</ListItemButton>
 					</ListItem>
 				</List>
diff --git a/package-lock.json b/package-lock.json
index 029ddbf..af9398c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
 				"firebase": "^9.15.0",
 				"react-intersection-observer": "^9.4.1",
 				"react-keep-awake": "^0.0.3",
+				"react-use-pwa-install": "^0.2.4",
 				"sass": "^1.71.1",
 				"use-chromecast-caf-receiver": "^0.0.3",
 				"use-chromecast-caf-sender": "^0.0.5",
@@ -5395,6 +5396,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/pwa-install-handler": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/pwa-install-handler/-/pwa-install-handler-2.5.0.tgz",
+			"integrity": "sha512-kZN69UHEGU25tvfkfI9k63zG0unqIw9VDMPzm8ZXNwJ5al6Qzwua6qgpfqXM8c/kOuPR88dnYaSM3a0e+F+EUg==",
+			"dev": true
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5492,6 +5499,18 @@
 				"react-dom": ">=16.6.0"
 			}
 		},
+		"node_modules/react-use-pwa-install": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/react-use-pwa-install/-/react-use-pwa-install-0.2.4.tgz",
+			"integrity": "sha512-J3aGMEf6yqLfiDjy4WH9OByCXxgjpACMYFwqA5xLLpNacCLE3/TUyTJ6IFEg14CzFUXIWymSxpvSkdm4TdNoCg==",
+			"dev": true,
+			"dependencies": {
+				"pwa-install-handler": "^2.4.0"
+			},
+			"peerDependencies": {
+				"react": "17 || 18"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -10407,6 +10426,12 @@
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
 			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
 		},
+		"pwa-install-handler": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/pwa-install-handler/-/pwa-install-handler-2.5.0.tgz",
+			"integrity": "sha512-kZN69UHEGU25tvfkfI9k63zG0unqIw9VDMPzm8ZXNwJ5al6Qzwua6qgpfqXM8c/kOuPR88dnYaSM3a0e+F+EUg==",
+			"dev": true
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -10469,6 +10494,15 @@
 				"prop-types": "^15.6.2"
 			}
 		},
+		"react-use-pwa-install": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/react-use-pwa-install/-/react-use-pwa-install-0.2.4.tgz",
+			"integrity": "sha512-J3aGMEf6yqLfiDjy4WH9OByCXxgjpACMYFwqA5xLLpNacCLE3/TUyTJ6IFEg14CzFUXIWymSxpvSkdm4TdNoCg==",
+			"dev": true,
+			"requires": {
+				"pwa-install-handler": "^2.4.0"
+			}
+		},
 		"readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/package.json b/package.json
index b305ba3..1c92b3a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"firebase": "^9.15.0",
 		"react-intersection-observer": "^9.4.1",
 		"react-keep-awake": "^0.0.3",
+		"react-use-pwa-install": "^0.2.4",
 		"sass": "^1.71.1",
 		"use-chromecast-caf-receiver": "^0.0.3",
 		"use-chromecast-caf-sender": "^0.0.5",