Fix linting and typescript errors

package-lock.json

@@ -19696,13 +19696,12 @@
       "dev": true,
       "requires": {
         "@types/react": "*",
-        "@types/react-native": "^0.65",
+        "@types/react-native": "^0.66.10",
         "@types/styled-components": "*"
       },
       "dependencies": {
         "@types/react-native": {
-          "version": "0.65.13",
+          "version": "https://registry.npmjs.org/@types/react-native/-/react-native-0.65.13.tgz",
-          "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.65.13.tgz",
           "integrity": "sha512-yJ5QyXZFgDD7Cjwi7Bd32VACVqOJgRzb6KiZJPi4GJpwxmycMaw+EvPk3PQ/3dwQmiHM4iSRWcxtuE/xvcsMXg==",
           "dev": true,
           "requires": {

package.json

@@ -82,5 +82,8 @@
       "json",
       "node"
     ]
+  },
+  "overrides": {
+    "@types/react-native": "^0.66.10"
   }
 }

src/components/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components/native';
-import { SafeAreaView, Pressable } from 'react-native';
+import { Pressable } from 'react-native';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import useDefaultStyles from './Colors';
 

src/screens/Music/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import { StackParams } from './types';
+import { MusicStackParams } from './types';
 import Albums from './stacks/Albums';
 import Album from './stacks/Album';
 import RecentAlbums from './stacks/RecentAlbums';
@@ -11,7 +11,7 @@ import useDefaultStyles from 'components/Colors';
 import Playlists from './stacks/Playlists';
 import Playlist from './stacks/Playlist';
 
-const Stack = createStackNavigator<StackParams>();
+const Stack = createStackNavigator<MusicStackParams>();
 
 function MusicStack() {
     const defaultStyles = useDefaultStyles();

src/screens/Music/stacks/Album.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { StackParams } from '../types';
+import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
@@ -8,7 +8,7 @@ import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
 
-type Route = RouteProp<StackParams, 'Album'>;
+type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Album: React.FC = () => {
     const { params: { id } } = useRoute<Route>();

src/screens/Music/stacks/Albums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { NavigationProp } from '../types';
+import { MusicNavigationProp } from '../types';
 import { Text, SafeAreaView, SectionList, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -98,7 +98,7 @@ const Albums: React.FC = () => {
     
     // Initialise helpers
     const dispatch = useDispatch();
-    const navigation = useNavigation<NavigationProp>();
+    const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
     const listRef = useRef<SectionList<EntityId>>(null);
 

src/screens/Music/stacks/Playlist.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { StackParams } from '../types';
+import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
@@ -8,7 +8,7 @@ import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
 
-type Route = RouteProp<StackParams, 'Album'>;
+type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Playlist: React.FC = () => {
     const { params: { id } } = useRoute<Route>();

src/screens/Music/stacks/Playlists.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, ReactText } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { NavigationProp } from '../types';
+import { MusicNavigationProp } from '../types';
-import { Text, SafeAreaView, View, FlatList, ListRenderItem } from 'react-native';
+import { Text, View, FlatList, ListRenderItem } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
@@ -12,7 +12,6 @@ import TouchableHandler from 'components/TouchableHandler';
 import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { EntityId } from '@reduxjs/toolkit';
 import useDefaultStyles from 'components/Colors';
-import { Playlist } from 'store/music/types';
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
@@ -43,7 +42,7 @@ const Playlists: React.FC = () => {
     
     // Initialise helpers
     const dispatch = useDispatch();
-    const navigation = useNavigation<NavigationProp>();
+    const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
     const listRef = useRef<FlatList<EntityId>>(null);
 
@@ -55,7 +54,9 @@ const Playlists: React.FC = () => {
 
     // Set callbacks
     const retrieveData = useCallback(() => dispatch(fetchAllPlaylists()), [dispatch]);
-    const selectAlbum = useCallback((id: string) => navigation.navigate('Playlist', { id, playlist: entities[id] as Playlist }), [navigation, entities]);
+    const selectAlbum = useCallback((id: string) => {
+        navigation.navigate('Playlist', { id });
+    }, [navigation]);
     const generateItem: ListRenderItem<EntityId> = useCallback(({ item, index }) => {
         if (index % 2 === 1) {
             return <View key={item} />;

src/screens/Music/stacks/RecentAlbums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { NavigationProp } from '../types';
+import { MusicNavigationProp } from '../types';
 import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 });
 
 const NavigationHeader: React.FC = () => {
-    const navigation = useNavigation();
+    const navigation = useNavigation<MusicNavigationProp>();
     const defaultStyles = useDefaultStyles();
     const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
     const handlePlaylistsClick = useCallback(() => { navigation.navigate('Playlists'); }, [navigation]);
@@ -52,7 +52,7 @@ const RecentAlbums: React.FC = () => {
     
     // Initialise helpers
     const dispatch = useDispatch();
-    const navigation = useNavigation<NavigationProp>();
+    const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
 
     // Set callbacks

src/screens/Music/stacks/Search.tsx

@@ -9,7 +9,7 @@ import { FlatList } from 'react-native-gesture-handler';
 import TouchableHandler from 'components/TouchableHandler';
 import { useNavigation } from '@react-navigation/native';
 import { useGetImage } from 'utility/JellyfinApi';
-import { NavigationProp } from '../types';
+import { MusicNavigationProp } from '../types';
 import FastImage from 'react-native-fast-image';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
@@ -94,7 +94,7 @@ export default function Search() {
     const searchElement = useRef<TextInput>(null);
 
     // Prepare helpers
-    const navigation = useNavigation<NavigationProp>();
+    const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
     const dispatch = useAppDispatch();
 
@@ -206,7 +206,6 @@ export default function Search() {
     const HeaderComponent = React.useMemo(() => (
         <Container>
             <Input
-                // @ts-expect-error Ref typing shenanigans
                 ref={searchElement}
                 value={searchTerm}
                 onChangeText={setSearchTerm}

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

@@ -15,6 +15,7 @@ import useDefaultStyles from 'components/Colors';
 import usePlayTracks from 'utility/usePlayTracks';
 import { EntityId } from '@reduxjs/toolkit';
 import { WrappableButtonRow, WrappableButton } from 'components/WrappableButtonRow';
+import { MusicNavigationProp } from 'screens/Music/types';
 
 const Screen = Dimensions.get('screen');
 
@@ -85,7 +86,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     const getImage = useGetImage();
     const playTracks = usePlayTracks();
     const { track: currentTrack } = useCurrentTrack();
-    const navigation = useNavigation();
+    const navigation = useNavigation<MusicNavigationProp>();
 
     // Setup callbacks
     const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]);

src/screens/Music/types.ts

@@ -1,12 +1,14 @@
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Album } from 'store/music/types';
 
-export type StackParams = {
+export type MusicStackParams = {
     [key: string]: Record<string, unknown> | undefined;
     Albums: undefined;
     Album: { id: string, album: Album };
+    Playlists: undefined;
+    Playlist: { id: string };
     RecentAlbums: undefined;
     Search: undefined;
 };
 
-export type NavigationProp = StackNavigationProp<StackParams>; 
+export type MusicNavigationProp = StackNavigationProp<MusicStackParams>; 

src/screens/Player/components/ProgressBar.tsx

@@ -31,16 +31,18 @@ export default class ProgressBar extends Component<{}, State> {
     state: State = {
         position: 0,
         duration: 0,
-    }
+    };
 
-    timer: number = 0;
+    timer: NodeJS.Timeout | null = null;
 
     componentDidMount() {
         this.timer = setInterval(this.updateProgress, 500);
     }
 
     componentWillUnmount() {
-        clearInterval(this.timer);
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
     }
 
     updateProgress = async () => {
@@ -50,18 +52,18 @@ export default class ProgressBar extends Component<{}, State> {
         ]);
 
         this.setState({ position, duration });
-    }
+    };
 
     handleGesture = async (gesture: number) => {
         // Set relative translation in state
         this.setState({ gesture });
-    }
+    };
 
     handleEndOfGesture = (position: number) => {
         // Calculate and set the new position
         TrackPlayer.seekTo(position);
         this.setState({ gesture: undefined, position });
-    }
+    };
 
     render() {
         const { position, duration, gesture } = this.state;

src/screens/Settings/index.tsx

@@ -9,9 +9,10 @@ import { useNavigation } from '@react-navigation/native';
 import ListButton from 'components/ListButton';
 import { THEME_COLOR } from 'CONSTANTS';
 import Sentry from './components/Sentry';
+import { SettingsNavigationProp } from './types';
 
 export function SettingsList() {
-    const navigation = useNavigation();
+    const navigation = useNavigation<SettingsNavigationProp>();
     const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
     const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);

src/screens/Settings/types.ts

@@ -0,0 +1,11 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
+export type SettingsStackParams = {
+    [key: string]: Record<string, unknown> | undefined;
+    SettingList: undefined;
+    Library: undefined;
+    Cache: undefined;
+    Sentry: undefined;
+};
+
+export type SettingsNavigationProp = StackNavigationProp<SettingsStackParams>; 

src/screens/types.ts

@@ -1,5 +1,9 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
 export interface ModalStackParams {
     [key: string]: Record<string, unknown> | undefined;
     SetJellyfinServer: undefined;
     TrackPopupMenu: { trackId: string };
-}
+}
+
+export type ModalNavigationProp = StackNavigationProp<ModalStackParams>; 

src/typings/env.d.ts

@@ -0,0 +1,3 @@
+declare module '@env' {
+    export const SENTRY_DSN: string;
+}

src/typings/svg.d.ts

@@ -2,8 +2,4 @@ declare module '*.svg' {
     import { SvgProps } from 'react-native-svg';
     const content: React.FC<SvgProps>;
     export default content;
-}
-
-declare module '@env' {
-    export const SENTRY_DSN: string;
 }

src/utility/ErrorReportingAlert.ts

@@ -6,6 +6,7 @@ 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';
 
 /**
  * This will send out an alert message asking the user if they want to enable
@@ -13,7 +14,7 @@ import { useDispatch } from 'react-redux';
  */
 export default function ErrorReportingAlert() {
     const { hasReceivedErrorReportingAlert } = useTypedSelector(state => state.settings);
-    const navigation = useNavigation();
+    const navigation = useNavigation<ModalNavigationProp>();
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -53,7 +54,7 @@ export default function ErrorReportingAlert() {
             dispatch(setReceivedErrorReportingAlert());
         }
         
-    }, []);
+    }, [dispatch, hasReceivedErrorReportingAlert, navigation]);
 
     return null;
 }