diff --git a/web/src/app/Poller.js b/web/src/app/Poller.js index 0f1ec66..9de417a 100644 --- a/web/src/app/Poller.js +++ b/web/src/app/Poller.js @@ -1,7 +1,7 @@ import api from "./Api"; import subscriptionManager from "./SubscriptionManager"; -const delayMillis = 3000; // 3 seconds +const delayMillis = 8000; // 8 seconds const intervalMillis = 300000; // 5 minutes class Poller { @@ -13,6 +13,7 @@ class Poller { if (this.timer !== null) { return; } + console.log(`[Poller] Starting worker`); this.timer = setInterval(() => this.pollAll(), intervalMillis); setTimeout(() => this.pollAll(), delayMillis); } @@ -55,4 +56,6 @@ class Poller { } const poller = new Poller(); +poller.startWorker(); + export default poller; diff --git a/web/src/app/Pruner.js b/web/src/app/Pruner.js index 014ab25..9fac28e 100644 --- a/web/src/app/Pruner.js +++ b/web/src/app/Pruner.js @@ -13,6 +13,7 @@ class Pruner { if (this.timer !== null) { return; } + console.log(`[Pruner] Starting worker`); this.timer = setInterval(() => this.prune(), intervalMillis); setTimeout(() => this.prune(), delayMillis); } @@ -34,4 +35,6 @@ class Pruner { } const pruner = new Pruner(); +pruner.startWorker(); + export default pruner; diff --git a/web/src/components/App.js b/web/src/components/App.js index 026257f..2367fa6 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -47,7 +47,6 @@ const Root = () => { const selectedSubscription = findSelected(location, subscriptions); const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0; - useWorkers(); useConnectionListeners(); useEffect(() => { @@ -66,16 +65,14 @@ const Root = () => { selectedSubscription={selectedSubscription} onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)} /> - - notifier.maybeRequestPermission(granted => setNotificationsGranted(granted))} - mobileDrawerOpen={mobileDrawerOpen} - onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)} - /> - + setMobileDrawerOpen(!mobileDrawerOpen)} + onNotificationGranted={setNotificationsGranted} + />
@@ -136,14 +133,6 @@ const findSelected = (location, subscriptions) => { */ }; - -const useWorkers = () => { - useEffect(() => { - poller.startWorker(); - pruner.startWorker(); - }, []); -}; - const useConnectionListeners = () => { const navigate = useNavigate(); useEffect(() => { diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index 6786e66..c49e533 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -19,13 +19,15 @@ import {ConnectionState} from "../app/Connection"; import {useLocation, useNavigate} from "react-router-dom"; import subscriptionManager from "../app/SubscriptionManager"; import {ChatBubble} from "@mui/icons-material"; +import Box from "@mui/material/Box"; +import notifier from "../app/Notifier"; const navWidth = 240; const Navigation = (props) => { const navigationList = ; return ( - <> + {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */} { > {navigationList} - + ); }; Navigation.width = navWidth; @@ -70,9 +72,13 @@ const NavList = (props) => { console.log(`[Navigation] New subscription: ${subscription.id}`, subscription); handleSubscribeReset(); navigate(subscriptionRoute(subscription)); - props.requestNotificationPermission(); + handleRequestNotificationPermission(); } + const handleRequestNotificationPermission = () => { + notifier.maybeRequestPermission(granted => props.onNotificationGranted(granted)) + }; + const showSubscriptionsList = props.subscriptions?.length > 0; const showGrantPermissionsBox = props.subscriptions?.length > 0 && !props.notificationsGranted; @@ -80,7 +86,7 @@ const NavList = (props) => { <> - {showGrantPermissionsBox && } + {showGrantPermissionsBox && } {!showSubscriptionsList && navigate("/")} selected={location.pathname === "/"}> diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js index 6be4431..5245653 100644 --- a/web/src/components/Notifications.js +++ b/web/src/components/Notifications.js @@ -54,8 +54,8 @@ const NotificationList = (props) => { const pageSize = 20; const notifications = props.notifications; const [maxCount, setMaxCount] = useState(pageSize); + const count = Math.min(notifications.length, maxCount); - // Reset state when the list identifier changes, i.e when we switch between subscriptions useEffect(() => { return () => { setMaxCount(pageSize); @@ -63,9 +63,6 @@ const NotificationList = (props) => { } }, [props.id]); - const count = Math.min(notifications.length, maxCount); - console.log(`xxx id=${props.id} scrollMax=${maxCount} count=${count} len=${notifications.length}`) - return (