Adding a communication channel between server and clients using SSE

ui/src/layout/ActivityMenu.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import {
+  Menu,
+  Badge,
+  CircularProgress,
+  IconButton,
+  makeStyles,
+  Tooltip,
+  MenuItem,
+} from '@material-ui/core'
+import { FiActivity } from 'react-icons/fi'
+import subsonic from '../subsonic'
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    position: 'relative',
+  },
+  progress: {
+    position: 'absolute',
+    top: -1,
+    left: 0,
+    zIndex: 1,
+  },
+  button: {
+    zIndex: 2,
+  },
+}))
+
+const ActivityMenu = () => {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const scanStatus = useSelector((state) => state.activity.scanStatus)
+
+  const open = Boolean(anchorEl)
+
+  const handleMenu = (event) => setAnchorEl(event.currentTarget)
+  const handleClose = () => setAnchorEl(null)
+  const startScan = () => fetch(subsonic.url('startScan', null))
+
+  return (
+    <div className={classes.wrapper}>
+      <Tooltip title={'Activity'}>
+        <IconButton className={classes.button} onClick={handleMenu}>
+          <Badge badgeContent={null} color="secondary">
+            <FiActivity size={'20'} />
+          </Badge>
+        </IconButton>
+      </Tooltip>
+      {scanStatus.scanning && (
+        <CircularProgress size={46} className={classes.progress} />
+      )}
+      <Menu
+        id="menu-activity"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem
+          className={classes.root}
+          activeClassName={classes.active}
+          onClick={startScan}
+          sidebarIsOpen={true}
+        >
+          {`Scanned: ${scanStatus.count}`}
+        </MenuItem>
+      </Menu>
+    </div>
+  )
+}
+
+export default ActivityMenu

ui/src/layout/AppBar.js

@@ -12,6 +12,7 @@ import ViewListIcon from '@material-ui/icons/ViewList'
 import InfoIcon from '@material-ui/icons/Info'
 import AboutDialog from './AboutDialog'
 import PersonalMenu from './PersonalMenu'
+import ActivityMenu from './ActivityMenu'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -85,13 +86,16 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
   }
 
   return (
-    <UserMenu {...rest}>
-      <PersonalMenu sidebarIsOpen={true} onClick={onClick} />
-      <hr />
-      {resources.filter(settingsResources).map(renderSettingsMenuItemLink)}
-      <hr />
-      <AboutMenuItem />
-    </UserMenu>
+    <>
+      <ActivityMenu />
+      <UserMenu {...rest}>
+        <PersonalMenu sidebarIsOpen={true} onClick={onClick} />
+        <hr />
+        {resources.filter(settingsResources).map(renderSettingsMenuItemLink)}
+        <hr />
+        <AboutMenuItem />
+      </UserMenu>
+    </>
   )
 }