code cleanup, comments, scaffold prefs db

web/src/components/Preferences.js

@@ -175,19 +175,37 @@ const DeleteAfter = () => {
         </Pref>
     )
 };
-
+/**
+ * WIP. No logic for delivering background notifications yet, just scaffolding for the view and database entry.
+ * @returns {[JSX.Element | null]} Checkbox to toggle background notifications. Returns null if app is not installed.
+ */
 const BackgroundPush = () => {
     const { t } = useTranslation();
 
-    const handleChange = () => {
+    const [ backgroundPush, setBackgroundPush ] = useState(false);
-        console.log('The checkbox was toggled.');
+    const [ canBeToggled, setCanBeToggled ] = useState(false);
+
+    const handleChange = async () => {
+        setBackgroundPush(!backgroundPush);
+        await prefs.setBackgroundPush(backgroundPush);
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/appinstalled_event
+    // This event is only fired upon successful PWA installation.
+    useEffect(() => {
+        window.addEventListener('appinstalled', () => {
+            setCanBeToggled(true);
+        })
+    },[])
+    // Hide the option if we are not in a PWA.
+    if (!canBeToggled) {
+        return null;
     }
 
     return (
         <Pref
-            labelId={"background_push"} 
+        labelId={"background_push"} 
-            title={"Background notifications"}
+        title={"Background notifications"}
-            description={"Push notifications are delivered in the background"}
+        description={"Push notifications are delivered in the background"}
         >
         <FormControl 
             fullWidth 
@@ -198,8 +216,8 @@ const BackgroundPush = () => {
                 onChange={handleChange}
             >
             </Checkbox>
-        </FormControl>
+    </FormControl>
-        </Pref>
+    </Pref>
     )
 };
 
@@ -502,76 +520,58 @@ const Language = () => {
         </Pref>
     )
 };
-
+/**
+ * Installation menu, with button that triggers PWA installation.
+ * @returns {[ JSX.Element | null ]} Installation card and button if the browser environment supports installing PWAs, null if not.
+ */
 const Installation = () => {
+    // https://web.dev/learn/pwa/installation-prompt/
     const { t } = useTranslation(); // Need help setting up the locale
 
+    // https://web.dev/codelab-make-installable/
+    const [ isInstallableChrome, setIsInstallableChrome ] = useState(false);
+    const [ deferredPromptEvent, setDeferredPromptEvent ] = useState(null);
 
-    return (
+    // Determine if browser environment passes installation criteria.
-        <Card sx={{p: 3}} aria-label={"Install ntfy"}>
-        <Typography variant="h5" sx={{marginBottom: 2}}>
-            {"Install NTFY"}
-        </Typography>
-        <Install/>
-        </Card>
-    )
-}
-
-const Install = () => {
-    const { t } = useTranslation();
-
-    const [installationSupported, setInstallationSuported] = useState(false);
-    const [promptInstall, setPromptInstall] = useState(null);
-    const [isInstalled, setIsInstalled] = useState(false);
-    const [deferredPrompt, setDeferredPrompt] = useState();
-
     useEffect(() => {
         if ('BeforeInstallPromptEvent' in window) {
-            console.log('BeforeInstallPromptEvent supported but not fired.');
+            setIsInstallableChrome(true);
-            setInstallationSuported(true);
-        } else {
-            console.log('BeforeInstallPromptEvent not supported.');
-            return;
         }
-    }, [])
+    });
 
-    const onClick = async () => {
+    // Save the deferred prompt event, pass it as a prop to the button.
-        if (deferredPrompt) {
+    useEffect(() => {
-            deferredPrompt.prompt();
+        window.addEventListener('beforeinstallprompt', (e) => {
-            const { outcome } = await e.userChoice;
+            e.preventDefault();
-            if (outcome === 'accepted') {
+            setDeferredPromptEvent(e);
-                setIsInstalled(true);
+        });
-            } else if (outcome === 'dismissed') {
+    });
-                console.log('App installer was dismissed.')
+
-            }
+    // If the web app is in Google Chrome, is installable, and we are NOT in a PWA environment show this option.
-        }
+    // Otherwise, return an empty component.
+    if (isInstallableChrome && deferredPromptEvent) {
+        return (
+            <Card sx={{p: 3}} aria-label={"Install ntfy"}>
+            <Typography variant="h5" sx={{marginBottom: 2}}>
+                {"Install NTFY"}
+            </Typography>
+            <InstallChrome
+                deferredPrompt={deferredPromptEvent}
+            />
+            </Card>
+        )
     }
 
-    useEffect(() => {
+    // Return nothing if installation criteria are not met.
-        window.addEventListener("beforeinstallprompt", (e) => {
+    return null;
-            console.log('beforeinstallprompt fired.')
-            e.preventDefault();
-            setDeferredPrompt(e);
-        });
-    }, [])
 
+}
 
+const InstallChrome = ({ deferredPrompt }) => {
+    const { t } = useTranslation();
 
-    if (!installationSupported) {
+    const onClick = async () => {
-        return (
+        deferredPrompt.prompt();
-            <FormControl 
-            fullWidth 
-            variant="standard" 
-            sx={{ m: 1 }}
-        >
-            <Button 
-                variant="contained"
-                disabled={true}
-            >
-                Browser not supported.
-            </Button>
-        </FormControl>
-        )
     }
 
     return (
@@ -582,7 +582,7 @@ const Install = () => {
         >
             <Button 
                 variant="contained"
-                onClick={async () => await onClick()}
+                onClick={async (e) => await onClick(e)}
             >
                 Install
             </Button>