Trigger a UI refresh when the scanner finds changes.

Closes #1025

ui/src/actions/serverEvents.js

@@ -1,5 +1,6 @@
 export const EVENT_SCAN_STATUS = 'scanStatus'
 export const EVENT_SERVER_START = 'serverStart'
+export const EVENT_REFRESH_RESOURCE = 'refreshResource'
 
 export const processEvent = (type, data) => {
   return {

ui/src/album/AlbumList.js

@@ -18,6 +18,7 @@ import {
   QuickFilter,
   Title,
   useAlbumsPerPage,
+  useResourceRefresh,
   useSetToggleableFields,
 } from '../common'
 import AlbumListActions from './AlbumListActions'
@@ -71,6 +72,7 @@ const AlbumList = (props) => {
   const albumView = useSelector((state) => state.albumView)
   const [perPage, perPageOptions] = useAlbumsPerPage(width)
   const location = useLocation()
+  useResourceRefresh('album')
 
   const albumListType = location.pathname
     .replace(/^\/album/, '')

ui/src/artist/ArtistList.js

@@ -20,6 +20,7 @@ import {
   ArtistSimpleList,
   RatingField,
   useSelectedFields,
+  useResourceRefresh,
 } from '../common'
 import config from '../config'
 import ArtistListActions from './ArtistListActions'
@@ -66,6 +67,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   const handleArtistLink = useGetHandleArtistClick(width)
   const history = useHistory()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  useResourceRefresh('artist')
 
   const toggleableFields = useMemo(() => {
     return {

ui/src/common/index.js

@@ -23,6 +23,7 @@ export * from './Title'
 export * from './SongBulkActions'
 export * from './useAlbumsPerPage'
 export * from './useInterval'
+export * from './useResourceRefresh'
 export * from './useToggleLove'
 export * from './useTraceUpdate'
 export * from './Writable'

ui/src/common/useResourceRefresh.js

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux'
+import { useState } from 'react'
+import { useRefresh } from 'react-admin'
+
+export const useResourceRefresh = (...resources) => {
+  const [lastTime, setLastTime] = useState(Date.now())
+  const refreshData = useSelector(
+    (state) => state.activity?.refresh || { lastTime }
+  )
+  const refresh = useRefresh()
+
+  const resource = refreshData.resource
+  if (refreshData.lastTime > lastTime) {
+    if (
+      resource === '' ||
+      resources.length === 0 ||
+      resources.includes(resource)
+    ) {
+      refresh()
+    }
+    setLastTime(refreshData.lastTime)
+  }
+}

ui/src/eventStream.js

@@ -52,17 +52,15 @@ const setDispatch = (dispatchFunc) => {
   dispatch = dispatchFunc
 }
 
-const eventHandler = throttle(
-  (event) => {
-    const data = JSON.parse(event.data)
-    if (data.name !== 'keepAlive') {
-      dispatch(processEvent(data.name, data))
-    }
-    setTimeout(defaultIntervalCheck) // Reset timeout on every received message
-  },
-  100,
-  { trailing: true }
-)
+const eventHandler = (event) => {
+  const data = JSON.parse(event.data)
+  if (event.type !== 'keepAlive') {
+    dispatch(processEvent(event.type, data))
+  }
+  setTimeout(defaultIntervalCheck) // Reset timeout on every received message
+}
+
+const throttledEventHandler = throttle(eventHandler, 100, { trailing: true })
 
 const startEventStream = async () => {
   setTimeout(currentIntervalCheck)
@@ -72,7 +70,10 @@ const startEventStream = async () => {
   }
   return getEventStream()
     .then((newStream) => {
-      newStream.onmessage = eventHandler
+      newStream.addEventListener('serverStart', eventHandler)
+      newStream.addEventListener('scanStatus', throttledEventHandler)
+      newStream.addEventListener('refreshResource', eventHandler)
+      newStream.addEventListener('keepAlive', eventHandler)
       newStream.onerror = (e) => {
         console.log('EventStream error', e)
         setTimeout(reconnectIntervalCheck)

ui/src/playlist/PlaylistList.js

@@ -18,6 +18,7 @@ import {
   Writable,
   isWritable,
   useSelectedFields,
+  useResourceRefresh,
 } from '../common'
 import PlaylistListActions from './PlaylistListActions'
 
@@ -66,6 +67,7 @@ const TogglePublicInput = ({ permissions, resource, record = {}, source }) => {
 const PlaylistList = ({ permissions, ...props }) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  useResourceRefresh('playlist')
 
   const toggleableFields = useMemo(() => {
     return {

ui/src/reducers/activityReducer.js

@@ -1,4 +1,8 @@
-import { EVENT_SCAN_STATUS, EVENT_SERVER_START } from '../actions'
+import {
+  EVENT_REFRESH_RESOURCE,
+  EVENT_SCAN_STATUS,
+  EVENT_SERVER_START,
+} from '../actions'
 
 const defaultState = {
   scanStatus: { scanning: false, folderCount: 0, count: 0 },
@@ -21,6 +25,14 @@ export const activityReducer = (
           startTime: data.startTime && Date.parse(data.startTime),
         },
       }
+    case EVENT_REFRESH_RESOURCE:
+      return {
+        ...previousState,
+        refresh: {
+          lastTime: Date.now(),
+          resource: data.resource,
+        },
+      }
     default:
       return previousState
   }

ui/src/song/SongList.js

@@ -18,6 +18,7 @@ import {
   SongTitleField,
   SongSimpleList,
   RatingField,
+  useResourceRefresh,
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { makeStyles } from '@material-ui/core/styles'
@@ -71,6 +72,7 @@ const SongList = (props) => {
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  useResourceRefresh('song')
 
   const handleRowClick = (id, basePath, record) => {
     dispatch(setTrack(record))