Move things around a bit

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)}
             />
-            <Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
-                <Navigation
-                    subscriptions={subscriptions}
-                    selectedSubscription={selectedSubscription}
-                    notificationsGranted={notificationsGranted}
-                    requestNotificationPermission={() => notifier.maybeRequestPermission(granted => setNotificationsGranted(granted))}
-                    mobileDrawerOpen={mobileDrawerOpen}
-                    onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
-                />
-            </Box>
+            <Navigation
+                subscriptions={subscriptions}
+                selectedSubscription={selectedSubscription}
+                notificationsGranted={notificationsGranted}
+                mobileDrawerOpen={mobileDrawerOpen}
+                onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
+                onNotificationGranted={setNotificationsGranted}
+            />
             <Main>
                 <Toolbar/>
                 <Routes>
@@ -136,14 +133,6 @@ const findSelected = (location, subscriptions) => {
      */
 };
 
-
-const useWorkers = () => {
-    useEffect(() => {
-        poller.startWorker();
-        pruner.startWorker();
-    }, []);
-};
-
 const useConnectionListeners = () => {
     const navigate = useNavigate();
     useEffect(() => {

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 = <NavList {...props}/>;
     return (
-        <>
+        <Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
             {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
             <Drawer
                 variant="temporary"
@@ -50,7 +52,7 @@ const Navigation = (props) => {
             >
                 {navigationList}
             </Drawer>
-        </>
+        </Box>
     );
 };
 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) => {
         <>
             <Toolbar sx={{ display: { xs: 'none', sm: 'block' } }}/>
             <List component="nav" sx={{ paddingTop: (showGrantPermissionsBox) ? '0' : '' }}>
-                {showGrantPermissionsBox && <PermissionAlert onRequestPermissionClick={props.requestNotificationPermission}/>}
+                {showGrantPermissionsBox && <PermissionAlert onRequestPermissionClick={handleRequestNotificationPermission}/>}
                 {!showSubscriptionsList &&
                     <ListItemButton onClick={() => navigate("/")} selected={location.pathname === "/"}>
                         <ListItemIcon><ChatBubble/></ListItemIcon>

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 (
         <InfiniteScroll
             dataLength={count}