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 (