Add useRating hook, refactor components

src/components/library/AlbumList.tsx

@@ -32,6 +32,7 @@ import useListScroll from '../../hooks/useListScroll';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import Popup from '../shared/Popup';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 export const ALBUM_SORT_TYPES = [
   { label: i18n.t('A-Z (Name)'), value: 'alphabeticalByName', role: i18n.t('Default') },
@@ -212,23 +213,7 @@ const AlbumList = () => {
   };
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-
-    queryClient.setQueryData(['albumList', view.album.filter, musicFolder.id], (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData.data[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   return (
     <GenericPage
@@ -395,7 +380,12 @@ const AlbumList = () => {
           fontSize={config.lookAndFeel.listView.album.fontSize}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-          handleRating={handleRowRating}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, {
+              queryKey: ['albumList', view.album.filter, musicFolder.id],
+              rating,
+            })
+          }
           cacheImages={{
             enabled: settings.getSync('cacheImages'),
             cacheType: 'album',

src/components/library/AlbumView.tsx

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import _ from 'lodash';
 import { nanoid } from 'nanoid/non-secure';
 import { clipboard, shell } from 'electron';
 import settings from 'electron-settings';
@@ -15,7 +14,7 @@ import {
   PlayButton,
 } from '../shared/ToolbarButtons';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import GenericPage from '../layout/GenericPage';
 import ListViewType from '../viewtypes/ListViewType';
@@ -32,7 +31,6 @@ import {
 } from '../layout/styled';
 import { apiController } from '../../api/controller';
 import { Artist, Genre, Item, Play, Server } from '../../types';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import Card from '../card/Card';
 import { setFilter, setPagination } from '../../redux/viewSlice';
 import CenterLoader from '../loader/CenterLoader';
@@ -40,6 +38,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
 import Popup from '../shared/Popup';
 import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 interface AlbumParams {
   id: string;
@@ -92,6 +91,7 @@ const AlbumView = ({ ...rest }: any) => {
 
   const { handlePlayQueueAdd } = usePlayQueueHandler();
   const { handleFavorite } = useFavorite();
+  const { handleRating } = useRating();
 
   const handleDownload = async (type: 'copy' | 'download') => {
     if (config.serverType === Server.Jellyfin) {
@@ -142,25 +142,6 @@ const AlbumView = ({ ...rest }: any) => {
     }
   };
 
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-
-    queryClient.setQueryData(['album', albumId], (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData.song, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData.song[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
-
   if (isLoading) {
     return <CenterLoader />;
   }
@@ -459,7 +440,9 @@ const AlbumView = ({ ...rest }: any) => {
           tableColumns={config.lookAndFeel.listView.music.columns}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-          handleRating={handleRowRating}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, { queryKey: ['album', albumId], rating })
+          }
           virtualized
           rowHeight={Number(settings.getSync('musicListRowHeight'))}
           fontSize={Number(settings.getSync('musicListFontSize'))}

src/components/library/ArtistList.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import _ from 'lodash';
 import settings from 'electron-settings';
 import { useQuery, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router';
@@ -20,6 +19,7 @@ import { setSort } from '../../redux/artistSlice';
 import { StyledTag } from '../shared/styled';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const ArtistList = () => {
   const { t } = useTranslation();
@@ -67,23 +67,7 @@ const ArtistList = () => {
   };
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-
-    queryClient.setQueryData(['artistList', musicFolder], (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   return (
     <GenericPage
@@ -167,7 +151,9 @@ const ArtistList = () => {
           fontSize={config.lookAndFeel.listView.artist.fontSize}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-          handleRating={handleRowRating}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, { queryKey: ['artistList', musicFolder], rating })
+          }
           cacheImages={{
             enabled: settings.getSync('cacheImages'),
             cacheType: 'artist',

src/components/library/ArtistView.tsx

@@ -22,7 +22,7 @@ import GenericPage from '../layout/GenericPage';
 import ListViewType from '../viewtypes/ListViewType';
 import GridViewType from '../viewtypes/GridViewType';
 import GenericPageHeader from '../layout/GenericPageHeader';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import { notifyToast } from '../shared/toast';
 import { formatDuration, isCached } from '../../shared/utils';
 import { LinkWrapper, SectionTitle, StyledButton, StyledLink, StyledPanel } from '../shared/styled';
@@ -34,7 +34,6 @@ import ListViewTable from '../viewtypes/ListViewTable';
 import Card from '../card/Card';
 import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
 import useColumnSort from '../../hooks/useColumnSort';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import CustomTooltip from '../shared/CustomTooltip';
 import { setFilter, setPagination } from '../../redux/viewSlice';
 import CenterLoader from '../loader/CenterLoader';
@@ -42,6 +41,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
 import Popup from '../shared/Popup';
 import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const fac = new FastAverageColor();
 
@@ -158,25 +158,7 @@ const ArtistView = ({ ...rest }: any) => {
 
   const { handleFavorite } = useFavorite();
   const { handlePlayQueueAdd } = usePlayQueueHandler();
-
-  const handleRowRating = async (rowData: any, e: number, query: any) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-
-    queryClient.setQueryData(query, (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   const handleDownload = async (type: 'copy' | 'download') => {
     if (config.serverType === Server.Jellyfin) {
@@ -624,8 +606,8 @@ const ArtistView = ({ ...rest }: any) => {
               handleFavorite={(rowData: any) =>
                 handleFavorite(rowData, { queryKey: ['artistSongs', artistId] })
               }
-              handleRating={(rowData: any, e: number) =>
-                handleRowRating(rowData, e, ['artistSongs', artistId])
+              handleRating={(rowData: any, rating: number) =>
+                handleRating(rowData, { queryKey: ['artistSongs', artistId], rating })
               }
             />
           ) : location.pathname.match('/albums|/compilationalbums') ? (
@@ -713,8 +695,8 @@ const ArtistView = ({ ...rest }: any) => {
               handleFavorite={(rowData: any) =>
                 handleFavorite(rowData, { queryKey: ['artistTopSongs', data?.title] })
               }
-              handleRating={(rowData: any, e: number) =>
-                handleRowRating(rowData, e, ['artistTopSongs', data?.title])
+              handleRating={(rowData: any, rating: number) =>
+                handleRating(rowData, { queryKey: ['artistTopSongs', data?.title], rating })
               }
             />
           ) : (
@@ -796,8 +778,8 @@ const ArtistView = ({ ...rest }: any) => {
                     }
                     handleRowClick={handleRowClick}
                     handleRowDoubleClick={(e: any) => handleRowDoubleClick(e, topSongs)}
-                    handleRating={(rowData: any, e: number) =>
-                      handleRowRating(rowData, e, ['artistTopSongs', data?.title])
+                    handleRating={(rowData: any, rating: number) =>
+                      handleRating(rowData, { queryKey: ['artistTopSongs', data?.title], rating })
                     }
                     config={[]} // Prevent column sort
                     disabledContextMenuOptions={[

src/components/library/FolderList.tsx

@@ -10,17 +10,17 @@ import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import { StyledButton, StyledInputPicker, StyledInputPickerContainer } from '../shared/styled';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import { setStatus } from '../../redux/playerSlice';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import { setCurrentViewedFolder } from '../../redux/folderSlice';
 import useRouterQuery from '../../hooks/useRouterQuery';
 import { Server } from '../../types';
 import { apiController } from '../../api/controller';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const FolderList = () => {
   const { t } = useTranslation();
@@ -96,25 +96,7 @@ const FolderList = () => {
   });
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-
-    queryClient.setQueryData(['folder', folder.currentViewedFolder], (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData.child, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData.child[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   return (
     <>
@@ -206,7 +188,9 @@ const FolderList = () => {
                 },
               })
             }
-            handleRating={handleRowRating}
+            handleRating={(rowData: any, rating: number) =>
+              handleRating(rowData, { queryKey: ['folder', folder.currentViewedFolder], rating })
+            }
             cacheImages={{
               enabled: settings.getSync('cacheImages'),
               cacheType: 'folder',

src/components/library/MusicList.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import _ from 'lodash';
 import settings from 'electron-settings';
 import { ButtonToolbar } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
@@ -22,6 +21,7 @@ import { setStatus } from '../../redux/playerSlice';
 import useListScroll from '../../hooks/useListScroll';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 // prettier-ignore
 export const MUSIC_SORT_TYPES = [
@@ -181,23 +181,7 @@ const MusicList = () => {
   };
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-
-    queryClient.setQueryData(currentQueryKey, (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData.data[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   return (
     <GenericPage
@@ -266,7 +250,9 @@ const MusicList = () => {
           fontSize={config.lookAndFeel.listView.music.fontSize}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-          handleRating={handleRowRating}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, { queryKey: currentQueryKey, rating })
+          }
           cacheImages={{
             enabled: settings.getSync('cacheImages'),
             cacheType: 'album',

src/components/player/NowPlayingInfoView.tsx

@@ -13,7 +13,7 @@ import { SecondaryTextWrapper, StyledPanel, StyledTag } from '../shared/styled';
 import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
 import ListViewTable from '../viewtypes/ListViewTable';
 import CenterLoader from '../loader/CenterLoader';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import { setStatus } from '../../redux/playerSlice';
 import useColumnSort from '../../hooks/useColumnSort';
 import { GenericItem, Genre, Item } from '../../types';
@@ -27,9 +27,9 @@ import {
 } from './styled';
 import Card from '../card/Card';
 import { setFilter, setPagination } from '../../redux/viewSlice';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const NowPlayingInfoView = () => {
   const { t } = useTranslation();
@@ -96,25 +96,7 @@ const NowPlayingInfoView = () => {
   });
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = async (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-
-    queryClient.setQueryData(['similarSongs', currentArtistId, musicFolder, 50], (oldData: any) => {
-      const ratedIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
-      ratedIndices.forEach((index) => {
-        oldData[index].userRating = e;
-      });
-
-      return oldData;
-    });
-  };
+  const { handleRating } = useRating();
 
   useEffect(() => {
     const fetchAlbum = async () => {
@@ -288,7 +270,12 @@ const NowPlayingInfoView = () => {
                       }
                       handleRowClick={handleRowClick}
                       handleRowDoubleClick={(e: any) => handleRowDoubleClick(e)}
-                      handleRating={(rowData: any, e: number) => handleRowRating(rowData, e)}
+                      handleRating={(rowData: any, rating: number) =>
+                        handleRating(rowData, {
+                          queryKey: ['similarSongs', currentArtistId, musicFolder, 50],
+                          rating,
+                        })
+                      }
                       config={[]} // Prevent column sort
                       disabledContextMenuOptions={[
                         'removeSelected',

src/components/player/NowPlayingView.tsx

@@ -16,7 +16,6 @@ import {
   removeFromPlayQueue,
   setPlayQueue,
   appendPlayQueue,
-  setRate,
   moveToTop,
   moveToBottom,
 } from '../../redux/playQueueSlice';
@@ -51,12 +50,12 @@ import {
 import { notifyToast } from '../shared/toast';
 import { apiController } from '../../api/controller';
 import { Server, Song } from '../../types';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import NowPlayingInfoView from './NowPlayingInfoView';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import Popup from '../shared/Popup';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const NowPlayingView = () => {
   const { t } = useTranslation();
@@ -230,16 +229,7 @@ const NowPlayingView = () => {
   };
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-  };
+  const { handleRating } = useRating();
 
   return (
     <>
@@ -514,7 +504,7 @@ const NowPlayingView = () => {
                 dnd
                 disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
                 handleFavorite={handleFavorite}
-                handleRating={handleRowRating}
+                handleRating={(rowData: any, rating: number) => handleRating(rowData, { rating })}
                 initialScrollOffset={
                   playQueue.scrollWithCurrentSong
                     ? 0

src/components/player/PlayerBar.tsx

@@ -19,7 +19,7 @@ import {
   LinkButton,
   CoverArtContainer,
 } from './styled';
-import { setVolume, setRate } from '../../redux/playQueueSlice';
+import { setVolume } from '../../redux/playQueueSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import Player from './Player';
 import CustomTooltip from '../shared/CustomTooltip';
@@ -27,16 +27,15 @@ import placeholderImg from '../../img/placeholder.png';
 import DebugWindow from '../debug/DebugWindow';
 import { getCurrentEntryList, writeOBSFiles } from '../../shared/utils';
 import { SecondaryTextWrapper, StyledButton, StyledRate } from '../shared/styled';
-import { apiController } from '../../api/controller';
 import { Artist, Server } from '../../types';
 import { notifyToast } from '../shared/toast';
 import { InfoModal } from '../modal/Modal';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import useGetLyrics from '../../hooks/useGetLyrics';
 import usePlayerControls from '../../hooks/usePlayerControls';
 import { setSidebar } from '../../redux/configSlice';
 import Popup from '../shared/Popup';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const DiscordRPC = require('discord-rpc');
 
@@ -297,18 +296,7 @@ const PlayerBar = () => {
   }, [config.serverType, isDragging, manualSeek, playQueue.currentPlayer]);
 
   const { handleFavorite } = useFavorite();
-
-  const handleRating = (e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [playQueue[currentEntryList][playQueue.currentIndex].id], rating: e },
-    });
-    dispatch(setRate({ id: [playQueue[currentEntryList][playQueue.currentIndex].id], rating: e }));
-    dispatch(
-      setPlaylistRate({ id: [playQueue[currentEntryList][playQueue.currentIndex].id], rating: e })
-    );
-  };
+  const { handleRating } = useRating();
 
   return (
     <Player ref={playersRef} currentEntryList={currentEntryList} muted={muted}>
@@ -644,7 +632,9 @@ const PlayerBar = () => {
                         ? playQueue[currentEntryList][playQueue.currentIndex].userRating
                         : 0
                     }
-                    onChange={(e: number) => handleRating(e)}
+                    onChange={(rating: number) =>
+                      handleRating(playQueue[currentEntryList][playQueue.currentIndex], { rating })
+                    }
                   />
                 )}
               </div>

src/components/playlist/PlaylistView.tsx

@@ -18,7 +18,7 @@ import {
   UndoButton,
 } from '../shared/ToolbarButtons';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import { clearSelected } from '../../redux/multiSelectSlice';
 import {
   createRecoveryFile,
@@ -40,7 +40,7 @@ import { setStatus } from '../../redux/playerSlice';
 import { notifyToast } from '../shared/toast';
 import { addProcessingPlaylist, removeProcessingPlaylist } from '../../redux/miscSlice';
 import { StyledButton, StyledCheckbox, StyledInput, StyledLink } from '../shared/styled';
-import { removeFromPlaylist, setPlaylistData, setPlaylistRate } from '../../redux/playlistSlice';
+import { removeFromPlaylist, setPlaylistData } from '../../redux/playlistSlice';
 import { PageHeaderSubtitleDataLine } from '../layout/styled';
 import CustomTooltip from '../shared/CustomTooltip';
 import { apiController } from '../../api/controller';
@@ -51,6 +51,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
 import Popup from '../shared/Popup';
 import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 interface PlaylistParams {
   id: string;
@@ -351,16 +352,7 @@ const PlaylistView = ({ ...rest }) => {
   };
 
   const { handleFavorite } = useFavorite();
-
-  const handleRowRating = (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
-  };
+  const { handleRating } = useRating();
 
   useEffect(() => {
     if (data?.image.match('placeholder')) {
@@ -611,7 +603,7 @@ const PlaylistView = ({ ...rest }) => {
         handleFavorite={(rowData: any) =>
           handleFavorite(rowData, { queryKey: ['playlist', playlistId] })
         }
-        handleRating={handleRowRating}
+        handleRating={(rowData: any, rating: number) => handleRating(rowData, { rating })}
         loading={isLoading}
       />
     </GenericPage>

src/components/search/SearchView.tsx

@@ -23,6 +23,7 @@ import { Album, Artist, Item, Song } from '../../types';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import ListViewType from '../viewtypes/ListViewType';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const SearchView = () => {
   const { t } = useTranslation();
@@ -175,6 +176,7 @@ const SearchView = () => {
   }, [artistResults]);
 
   const { handleFavorite } = useFavorite();
+  const { handleRating } = useRating();
 
   const { handleRowClick, handleRowDoubleClick } = useListClickHandler({
     doubleClick: (rowData: any) => {
@@ -315,7 +317,18 @@ const SearchView = () => {
           fontSize={config.lookAndFeel.listView.music.fontSize}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
-          handleRating={() => {}}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, {
+              rating,
+              custom: () =>
+                queryClient.refetchQueries([
+                  'searchpage',
+                  debouncedSearchQuery,
+                  { type: Item.Music, count: 50 },
+                  musicFolder.id,
+                ]),
+            })
+          }
           handleFavorite={(rowData: any) =>
             handleFavorite(rowData, {
               custom: () =>
@@ -352,7 +365,18 @@ const SearchView = () => {
           fontSize={config.lookAndFeel.listView.album.fontSize}
           handleRowClick={handleAlbumRowClick}
           handleRowDoubleClick={handleAlbumRowDoubleClick}
-          handleRating={() => {}}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, {
+              rating,
+              custom: () =>
+                queryClient.refetchQueries([
+                  'searchpage',
+                  debouncedSearchQuery,
+                  { type: Item.Album, count: 25 },
+                  musicFolder.id,
+                ]),
+            })
+          }
           handleFavorite={(rowData: any) =>
             handleFavorite(rowData, {
               custom: () =>
@@ -389,7 +413,18 @@ const SearchView = () => {
           fontSize={config.lookAndFeel.listView.artist.fontSize}
           handleRowClick={handleArtistRowClick}
           handleRowDoubleClick={handleArtistRowDoubleClick}
-          handleRating={() => {}}
+          handleRating={(rowData: any, rating: number) =>
+            handleRating(rowData, {
+              rating,
+              custom: () =>
+                queryClient.refetchQueries([
+                  'searchpage',
+                  debouncedSearchQuery,
+                  { type: Item.Artist, count: 15 },
+                  musicFolder.id,
+                ]),
+            })
+          }
           handleFavorite={(rowData: any) =>
             handleFavorite(rowData, {
               custom: () =>

src/components/starred/StarredView.tsx

@@ -6,7 +6,7 @@ import settings from 'electron-settings';
 import { useTranslation } from 'react-i18next';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
+import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import ListViewType from '../viewtypes/ListViewType';
@@ -15,7 +15,6 @@ import { setStatus } from '../../redux/playerSlice';
 import { StyledNavItem, StyledTag } from '../shared/styled';
 import { setActive, setSort } from '../../redux/favoriteSlice';
 import { apiController } from '../../api/controller';
-import { setPlaylistRate } from '../../redux/playlistSlice';
 import useColumnSort from '../../hooks/useColumnSort';
 import { Item, Server } from '../../types';
 import { FilterButton } from '../shared/ToolbarButtons';
@@ -23,6 +22,7 @@ import ColumnSortPopover from '../shared/ColumnSortPopover';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
 import useFavorite from '../../hooks/useFavorite';
+import { useRating } from '../../hooks/useRating';
 
 const StarredView = () => {
   const { t } = useTranslation();
@@ -93,20 +93,21 @@ const StarredView = () => {
   });
 
   const { handleFavorite } = useFavorite();
+  const { handleRating } = useRating();
 
-  const handleRowRating = async (rowData: any, e: number) => {
-    apiController({
-      serverType: config.serverType,
-      endpoint: 'setRating',
-      args: { ids: [rowData.id], rating: e },
-    });
-    dispatch(setRate({ id: [rowData.id], rating: e }));
-    dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
+  // const handleRowRating = async (rowData: any, e: number) => {
+  //   apiController({
+  //     serverType: config.serverType,
+  //     endpoint: 'setRating',
+  //     args: { ids: [rowData.id], rating: e },
+  //   });
+  //   dispatch(setRate({ id: [rowData.id], rating: e }));
+  //   dispatch(setPlaylistRate({ id: [rowData.id], rating: e }));
 
-    await queryClient.refetchQueries(['starred', musicFolder], {
-      active: true,
-    });
-  };
+  //   await queryClient.refetchQueries(['starred', musicFolder], {
+  //     active: true,
+  //   });
+  // };
 
   if (isError) {
     return <span>Error: {error.message}</span>;
@@ -270,7 +271,15 @@ const StarredView = () => {
               tableColumns={config.lookAndFeel.listView.music.columns}
               handleRowClick={handleRowClick}
               handleRowDoubleClick={handleRowDoubleClick}
-              handleRating={handleRowRating}
+              handleRating={(rowData: any, rating: number) =>
+                handleRating(rowData, {
+                  rating,
+                  custom: async () =>
+                    queryClient.refetchQueries(['starred', musicFolder], {
+                      active: true,
+                    }),
+                })
+              }
               rowHeight={config.lookAndFeel.listView.music.rowHeight}
               fontSize={config.lookAndFeel.listView.music.fontSize}
               cacheImages={{
@@ -313,7 +322,15 @@ const StarredView = () => {
                   fontSize={config.lookAndFeel.listView.album.fontSize}
                   handleRowClick={handleRowClick}
                   handleRowDoubleClick={handleRowDoubleClick}
-                  handleRating={handleRowRating}
+                  handleRating={(rowData: any, rating: number) =>
+                    handleRating(rowData, {
+                      rating,
+                      custom: async () =>
+                        queryClient.refetchQueries(['starred', musicFolder], {
+                          active: true,
+                        }),
+                    })
+                  }
                   cacheImages={{
                     enabled: settings.getSync('cacheImages'),
                     cacheType: 'album',
@@ -391,7 +408,15 @@ const StarredView = () => {
                   fontSize={config.lookAndFeel.listView.artist.fontSize}
                   handleRowClick={handleRowClick}
                   handleRowDoubleClick={handleRowDoubleClick}
-                  handleRating={handleRowRating}
+                  handleRating={(rowData: any, rating: number) =>
+                    handleRating(rowData, {
+                      rating,
+                      custom: async () =>
+                        queryClient.refetchQueries(['starred', musicFolder], {
+                          active: true,
+                        }),
+                    })
+                  }
                   cacheImages={{
                     enabled: false,
                     cacheType: 'artist',

src/hooks/useRating.ts

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import { apiController } from '../api/controller';
+import { setRate } from '../redux/playQueueSlice';
+import { setPlaylistRate } from '../redux/playlistSlice';
+
+export const useRating = () => {
+  const queryClient = useQueryClient();
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+
+  const handleRating = useCallback(
+    async (rowData, options: { queryKey?: any; rating: number; custom?: any }) => {
+      await apiController({
+        serverType: config.serverType,
+        endpoint: 'setRating',
+        args: { ids: [rowData.id], rating: options.rating },
+      });
+
+      if (options?.queryKey) {
+        queryClient.setQueryData(options.queryKey, (oldData: any) => {
+          if (oldData?.data) {
+            const ratedIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id }));
+            ratedIndices.forEach((index) => {
+              oldData.data[index].userRating = options.rating;
+            });
+
+            return oldData;
+          }
+
+          if (oldData?.song) {
+            const ratedIndices = _.keys(_.pickBy(oldData.song, { id: rowData.id }));
+            ratedIndices.forEach((index) => {
+              oldData.song[index].userRating = options.rating;
+            });
+
+            return oldData;
+          }
+
+          const ratedIndices = _.keys(_.pickBy(oldData, { id: rowData.id }));
+          ratedIndices.forEach((index) => {
+            oldData[index].userRating = options.rating;
+          });
+
+          return oldData;
+        });
+      }
+
+      if (options?.custom) {
+        options.custom();
+      }
+
+      await queryClient.refetchQueries(['starred'], { active: true });
+      await queryClient.refetchQueries(['searchpage'], { active: true });
+
+      dispatch(setRate({ id: [rowData.id], rating: options.rating }));
+      dispatch(setPlaylistRate({ id: [rowData.id], rating: options.rating }));
+    },
+    [config.serverType, dispatch, queryClient]
+  );
+
+  return { handleRating };
+};