Fix linting errors

src/screens/Music/stacks/Album.tsx

@@ -1,25 +1,26 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
 import { fetchTracksByAlbum } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { useDispatch } from 'react-redux';
 
 type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Album: React.FC = () => {
     const { params: { id } } = useRoute<Route>();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     // Retrieve the album data from the store
     const album = useTypedSelector((state) => state.music.albums.entities[id]);
     const albumTracks = useTypedSelector((state) => state.music.tracks.byAlbum[id]);
 
     // Define a function for refreshing this entity
-    const refresh = useCallback(() => dispatch(fetchTracksByAlbum(id)), [id, dispatch]);
+    const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]);
 
     // Auto-fetch the track data periodically
     useEffect(() => {

src/screens/Music/stacks/Playlist.tsx

@@ -1,18 +1,19 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
 import { fetchTracksByPlaylist } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { useDispatch } from 'react-redux';
 
 type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Playlist: React.FC = () => {
     const { params: { id } } = useRoute<Route>();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     // Retrieve the album data from the store
     const playlist = useTypedSelector((state) => state.music.playlists.entities[id]);

src/screens/Music/stacks/Search.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
 import { ActivityIndicator, Text, TextInput, View } from 'react-native';
 import styled from 'styled-components/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
 import { Album, AlbumTrack } from 'store/music/types';
 import { FlatList } from 'react-native-gesture-handler';
@@ -15,6 +15,7 @@ import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
 import { searchAndFetchAlbums } from 'store/music/actions';
 import { debounce } from 'lodash';
+import { useDispatch } from 'react-redux';
 
 const Container = styled.View`
     padding: 0 20px;
@@ -96,7 +97,7 @@ export default function Search() {
     // Prepare helpers
     const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     /**
      * Since it is impractical to have a global fuse variable, we need to
@@ -118,6 +119,7 @@ export default function Search() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const fetchJellyfinResults = useCallback(debounce(async (searchTerm: string, currentResults: CombinedResults) => {
         // First, query the Jellyfin API
+        // @ts-expect-error need to fix this with AppDispatch
         const { payload } = await dispatch(searchAndFetchAlbums({ term: searchTerm }));
 
         // Convert the current results to album ids
@@ -206,6 +208,7 @@ export default function Search() {
     const HeaderComponent = React.useMemo(() => (
         <Container>
             <Input
+                // @ts-expect-error styled-components has outdated react-native typings
                 ref={searchElement}
                 value={searchTerm}
                 onChangeText={setSearchTerm}

src/screens/Music/stacks/components/TrackListView.tsx

@@ -17,7 +17,6 @@ import { EntityId } from '@reduxjs/toolkit';
 import { WrappableButtonRow, WrappableButton } from 'components/WrappableButtonRow';
 import { MusicNavigationProp } from 'screens/Music/types';
 import DownloadIcon from 'components/DownloadIcon';
-import Button from 'components/Button';
 import CloudDownArrow from 'assets/cloud-down-arrow.svg';
 import Trash from 'assets/trash.svg';
 import { useDispatch } from 'react-redux';