Update all dependencies

.eslintrc.js

@@ -53,5 +53,10 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': [
             'error'
         ]
+    },
+    settings: {
+        react: {
+            version: 'detect',
+        }
     }
 };

package.json

@@ -25,23 +25,23 @@
     "@react-navigation/stack": "^6.2.1",
     "@reduxjs/toolkit": "^1.8.1",
     "@sentry/react-native": "^3.4.2",
-    "@shopify/react-native-skia": "^0.1.123",
+    "@shopify/react-native-skia": "^0.1.124",
     "@types/lodash": "^4.14.182",
     "date-fns": "^2.28.0",
     "events": "^3.3.0",
-    "fuse.js": "^6.6.0",
+    "fuse.js": "^6.6.2",
     "hermes-engine": "^0.11.0",
     "i18n-js": "^3.9.2",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-airplay": "^1.2.0",
-    "react-native": "^0.68.1",
+    "react-native": "^0.68.2",
     "react-native-collapsible": "^1.6.0",
     "react-native-dotenv": "^3.3.1",
     "react-native-fast-image": "^8.5.11",
-    "react-native-flipper": "^0.127.0",
+    "react-native-flipper": "^0.146.0",
-    "react-native-fs": "^2.19.0",
+    "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "^2.4.1",
+    "react-native-gesture-handler": "^2.4.2",
     "react-native-localize": "^2.2.1",
     "react-native-reanimated": "^2.8.0",
     "react-native-safe-area-context": "^4.2.5",
@@ -51,7 +51,7 @@
     "react-native-svg-transformer": "^1.0.0",
     "react-native-track-player": "^2.1.3",
     "react-native-webview": "^11.18.2",
-    "react-redux": "^7.2.6",
+    "react-redux": "^8.0.1",
     "redux": "^4.2.0",
     "redux-flipper": "^2.0.1",
     "redux-logger": "^3.0.6",
@@ -59,29 +59,28 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
+    "@babel/core": "^7.17.12",
     "@babel/runtime": "^7.17.9",
-    "@react-native-community/eslint-config": "^3.0.1",
+    "@react-native-community/eslint-config": "^3.0.2",
     "@sentry/cli": "^2.0.4",
     "@types/i18n-js": "^3.8.2",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^27.5.1",
-    "@types/react-native": "^0.67.6",
+    "@types/react-native": "^0.67.7",
-    "@types/react-redux": "^7.1.24",
     "@types/react-test-renderer": "^17.0.1",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.25",
     "@types/styled-components-react-native": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.22.0",
+    "@typescript-eslint/parser": "^5.25.0",
-    "babel-jest": "^28.0.3",
+    "babel-jest": "^28.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.14.0",
+    "eslint": "^8.15.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "jest": "^28.0.3",
+    "jest": "^28.1.0",
-    "metro-config": "^0.70.2",
+    "metro-config": "^0.70.3",
-    "metro-react-native-babel-preset": "^0.67.0",
+    "metro-react-native-babel-preset": "^0.70.3",
-    "metro-react-native-babel-transformer": "^0.70.2",
+    "metro-react-native-babel-transformer": "^0.70.3",
-    "react-native-codegen": "^0.0.16",
+    "react-native-codegen": "^0.69.1",
     "react-test-renderer": "^17.0.2",
     "typescript": "^4.6.4"
   },
@@ -97,6 +96,6 @@
     ]
   },
   "overrides": {
-    "@types/react-native": "^0.67.6"
+    "@types/react-native": "^0.67.7"
   }
 }

src/components/DownloadManager.ts

@@ -2,8 +2,7 @@ import { EntityId } from '@reduxjs/toolkit';
 import { xor } from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { DocumentDirectoryPath, readDir } from 'react-native-fs';
-import { useDispatch } from 'react-redux';
+import { useAppDispatch, useTypedSelector } from 'store';
-import { useTypedSelector } from 'store';
 import { completeDownload, downloadTrack } from 'store/downloads/actions';
 
 /**
@@ -20,7 +19,7 @@ function DownloadManager () {
     // Retrieve store helpers
     const { queued, ids } = useTypedSelector((state) => state.downloads);
     const rehydrated = useTypedSelector((state) => state._persist.rehydrated);
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     
     // Keep state for the currently active downloads (i.e. the downloads that
     // have actually been pushed out to react-native-fs).

src/screens/Downloads/index.tsx

@@ -3,11 +3,10 @@ import React, { useCallback, useMemo } from 'react';
 import { FlatListProps, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import formatBytes from 'utility/formatBytes';
 import TrashIcon from 'assets/icons/trash.svg';
 import ArrowClockwise from 'assets/icons/arrow-clockwise.svg';
-import { useDispatch } from 'react-redux';
 import { EntityId } from '@reduxjs/toolkit';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
 import Button from 'components/Button';
@@ -35,7 +34,7 @@ const AlbumImage = styled(FastImage)`
 
 function Downloads() {
     const defaultStyles = useDefaultStyles();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const getImage = useGetImage();
 
     const { entities, ids } = useTypedSelector((state) => state.downloads);

src/screens/Music/stacks/Album.tsx

@@ -1,19 +1,18 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, 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 = useDispatch();
+    const dispatch = useAppDispatch();
 
     // Retrieve the album data from the store
     const album = useTypedSelector((state) => state.music.albums.entities[id]);

src/screens/Music/stacks/Albums.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { MusicNavigationProp } from '../types';
 import { SafeAreaView, SectionList, View } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { fetchAllAlbums } from 'store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import TouchableHandler from 'components/TouchableHandler';
@@ -103,7 +102,7 @@ const Albums: React.FC = () => {
     const sections = useTypedSelector(selectAlbumsByAlphabet);
     
     // Initialise helpers
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
     const listRef = useRef<SectionList<EntityId>>(null);

src/screens/Music/stacks/Playlist.tsx

@@ -1,19 +1,18 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, 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 = useDispatch();
+    const dispatch = useAppDispatch();
 
     // Retrieve the album data from the store
     const playlist = useTypedSelector((state) => state.music.playlists.entities[id]);

src/screens/Music/stacks/Playlists.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { MusicNavigationProp } from '../types';
 import { Text, View, FlatList, ListRenderItem } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { fetchAllPlaylists } from 'store/music/actions';
 import { PLAYLIST_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import TouchableHandler from 'components/TouchableHandler';
@@ -41,7 +40,7 @@ const Playlists: React.FC = () => {
     const lastRefreshed = useTypedSelector((state) => state.music.playlists.lastRefreshed);
     
     // Initialise helpers
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
     const listRef = useRef<FlatList<EntityId>>(null);

src/screens/Music/stacks/RecentAlbums.tsx

@@ -2,9 +2,8 @@ import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { MusicNavigationProp } from '../types';
 import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { fetchRecentAlbums } from 'store/music/actions';
 import TouchableHandler from 'components/TouchableHandler';
 import ListContainer from './components/ListContainer';
@@ -59,7 +58,7 @@ const RecentAlbums: React.FC = () => {
     const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
     
     // Initialise helpers
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
 

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

@@ -3,7 +3,7 @@ import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
 import styled, { css } from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { THEME_COLOR } from 'CONSTANTS';
 import TouchableHandler from 'components/TouchableHandler';
 import useCurrentTrack from 'utility/useCurrentTrack';
@@ -18,7 +18,6 @@ import { MusicNavigationProp } from 'screens/Music/types';
 import DownloadIcon from 'components/DownloadIcon';
 import CloudDownArrow from 'assets/icons/cloud-down-arrow.svg';
 import Trash from 'assets/icons/trash.svg';
-import { useDispatch } from 'react-redux';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
 import { selectDownloadedTracks } from 'store/downloads/selectors';
 import { Header, SubHeader } from 'components/Typography';
@@ -92,7 +91,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     const playTracks = usePlayTracks();
     const { track: currentTrack } = useCurrentTrack();
     const navigation = useNavigation<MusicNavigationProp>();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     // Setup callbacks
     const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]);

src/screens/Onboarding/index.tsx

@@ -2,8 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from 'screens';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
-import { useDispatch } from 'react-redux';
 import { setOnboardingStatus } from 'store/settings/actions';
 import { t } from '@localisation';
 import Button from 'components/Button';
@@ -39,7 +38,7 @@ const Logo = styled.Image`
 function Onboarding() {
     // Get account from Redux and dispatcher
     const account = useTypedSelector(state => state.settings.jellyfin);
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     // Also retrieve the navigation handler so that we can open the modal in
     // which the Jellyfin server is set

src/screens/Search/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
 import { ActivityIndicator, Animated, SafeAreaView, View } from 'react-native';
 import styled from 'styled-components/native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
 import { Album, AlbumTrack } from 'store/music/types';
 import { FlatList } from 'react-native-gesture-handler';
@@ -14,7 +14,6 @@ import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
 import { searchAndFetchAlbums } from 'store/music/actions';
 import { debounce } from 'lodash';
-import { useDispatch } from 'react-redux';
 import { Text } from 'components/Typography';
 import { MusicNavigationProp } from 'screens/Music/types';
 import DownloadIcon from 'components/DownloadIcon';
@@ -117,7 +116,7 @@ export default function Search() {
     const navigation = useNavigation<MusicNavigationProp>();
     const keyboardHeight = useKeyboardHeight();
     const getImage = useGetImage();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     /**
      * Since it is impractical to have a global fuse variable, we need to
@@ -139,7 +138,6 @@ 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

src/screens/Settings/components/Cache.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { useDispatch } from 'react-redux';
 import music from 'store/music';
 import { t } from '@localisation';
 import Button from 'components/Button';
 import styled from 'styled-components/native';
 import { Text } from 'components/Typography';
+import { useAppDispatch } from 'store';
 
 
 const ClearCache = styled(Button)`
@@ -17,7 +17,7 @@ const Container = styled.ScrollView`
 `;
 
 export default function CacheSettings() {
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const handleClearCache = useCallback(() => {
         // Dispatch an action to reset the music subreducer state
         dispatch(music.actions.reset());

src/screens/modals/SetJellyfinServer/index.tsx

@@ -3,13 +3,13 @@ import { Button, View } from 'react-native';
 import Modal from 'components/Modal';
 import Input from 'components/Input';
 import { setJellyfinCredentials } from 'store/settings/actions';
-import { useDispatch } from 'react-redux';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import CredentialGenerator from './components/CredentialGenerator';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
 import { Text } from 'components/Typography';
+import { useAppDispatch } from 'store';
 
 
 export default function SetJellyfinServer() {
@@ -19,7 +19,7 @@ export default function SetJellyfinServer() {
     const [isLogginIn, setIsLogginIn] = useState<boolean>(false);
 
     // Handlers needed for dispatching stuff
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const navigation = useNavigation();
 
     // Save creedentials to store and close the modal

src/screens/modals/TrackPopupMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
 import { ModalStackParams } from 'screens/types';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { Header, SubHeader } from 'components/Typography';
 import styled from 'styled-components/native';
 import { t } from '@localisation';
@@ -12,7 +12,6 @@ import TrashIcon from 'assets/icons/trash.svg';
 
 import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
 import CoverImage from 'components/CoverImage';
-import { useDispatch } from 'react-redux';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
 import usePlayTracks from 'utility/usePlayTracks';
 import { selectIsDownloaded } from 'store/downloads/selectors';
@@ -37,7 +36,7 @@ function TrackPopupMenu() {
 
     // Retrieve helpers
     const navigation = useNavigation();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const playTracks = usePlayTracks();
     const getImage = useGetImage();
 

src/utility/ErrorReportingAlert.ts

@@ -1,11 +1,10 @@
 import { useEffect } from 'react';
 import { Alert } from 'react-native';
-import { useTypedSelector } from 'store';
+import { useAppDispatch, useTypedSelector } from 'store';
 import { t } from '@localisation';
 import { setReceivedErrorReportingAlert } from 'store/settings/actions';
 import { setSentryStatus } from './Sentry';
 import { useNavigation } from '@react-navigation/native';
-import { useDispatch } from 'react-redux';
 import { ModalNavigationProp } from 'screens/types';
 
 /**
@@ -15,7 +14,7 @@ import { ModalNavigationProp } from 'screens/types';
 export default function ErrorReportingAlert() {
     const { hasReceivedErrorReportingAlert } = useTypedSelector(state => state.settings);
     const navigation = useNavigation<ModalNavigationProp>();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
 
     useEffect(() => {
         // Only send out alert if we haven't done so ever