From 4e6a758d839d7a571d81e7e33761b2df8e5d8c6a Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 1 Jan 2022 22:36:05 +0100 Subject: [PATCH] Fix linting and typescript errors --- package-lock.json | 5 ++--- package.json | 3 +++ src/components/Modal.tsx | 2 +- src/screens/Music/index.tsx | 4 ++-- src/screens/Music/stacks/Album.tsx | 4 ++-- src/screens/Music/stacks/Albums.tsx | 4 ++-- src/screens/Music/stacks/Playlist.tsx | 4 ++-- src/screens/Music/stacks/Playlists.tsx | 11 ++++++----- src/screens/Music/stacks/RecentAlbums.tsx | 6 +++--- src/screens/Music/stacks/Search.tsx | 5 ++--- .../Music/stacks/components/TrackListView.tsx | 3 ++- src/screens/Music/types.ts | 6 ++++-- src/screens/Player/components/ProgressBar.tsx | 14 ++++++++------ src/screens/Settings/index.tsx | 3 ++- src/screens/Settings/types.ts | 11 +++++++++++ src/screens/types.ts | 6 +++++- src/typings/env.d.ts | 3 +++ src/{custom.d.ts => typings/svg.d.ts} | 4 ---- src/utility/ErrorReportingAlert.ts | 5 +++-- 19 files changed, 63 insertions(+), 40 deletions(-) create mode 100644 src/screens/Settings/types.ts create mode 100644 src/typings/env.d.ts rename src/{custom.d.ts => typings/svg.d.ts} (68%) diff --git a/package-lock.json b/package-lock.json index 124bbde..4bd3441 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.65.13.tgz", + "version": "https://registry.npmjs.org/@types/react-native/-/react-native-0.65.13.tgz", "integrity": "sha512-yJ5QyXZFgDD7Cjwi7Bd32VACVqOJgRzb6KiZJPi4GJpwxmycMaw+EvPk3PQ/3dwQmiHM4iSRWcxtuE/xvcsMXg==", "dev": true, "requires": { diff --git a/package.json b/package.json index 0bfcbb9..5b62d91 100644 --- a/package.json +++ b/package.json @@ -82,5 +82,8 @@ "json", "node" ] + }, + "overrides": { + "@types/react-native": "^0.66.10" } } diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 51dfcde..2e8a63a 100644 --- a/src/components/Modal.tsx +++ b/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'; diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index 491aefe..6d00568 100644 --- a/src/screens/Music/index.tsx +++ b/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(); +const Stack = createStackNavigator(); function MusicStack() { const defaultStyles = useDefaultStyles(); diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx index 82bf597..1c16722 100644 --- a/src/screens/Music/stacks/Album.tsx +++ b/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; +type Route = RouteProp; const Album: React.FC = () => { const { params: { id } } = useRoute(); diff --git a/src/screens/Music/stacks/Albums.tsx b/src/screens/Music/stacks/Albums.tsx index 4980dd1..7b81e3b 100644 --- a/src/screens/Music/stacks/Albums.tsx +++ b/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(); + const navigation = useNavigation(); const getImage = useGetImage(); const listRef = useRef>(null); diff --git a/src/screens/Music/stacks/Playlist.tsx b/src/screens/Music/stacks/Playlist.tsx index 09f810e..32c51a9 100644 --- a/src/screens/Music/stacks/Playlist.tsx +++ b/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; +type Route = RouteProp; const Playlist: React.FC = () => { const { params: { id } } = useRoute(); diff --git a/src/screens/Music/stacks/Playlists.tsx b/src/screens/Music/stacks/Playlists.tsx index 5a5baf3..d148103 100644 --- a/src/screens/Music/stacks/Playlists.tsx +++ b/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 { Text, SafeAreaView, View, FlatList, ListRenderItem } from 'react-native'; +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'; @@ -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(); + const navigation = useNavigation(); const getImage = useGetImage(); const listRef = useRef>(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 = useCallback(({ item, index }) => { if (index % 2 === 1) { return ; diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx index e07e002..b43587c 100644 --- a/src/screens/Music/stacks/RecentAlbums.tsx +++ b/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(); 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(); + const navigation = useNavigation(); const getImage = useGetImage(); // Set callbacks diff --git a/src/screens/Music/stacks/Search.tsx b/src/screens/Music/stacks/Search.tsx index 806b0e3..45618af 100644 --- a/src/screens/Music/stacks/Search.tsx +++ b/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(null); // Prepare helpers - const navigation = useNavigation(); + const navigation = useNavigation(); const getImage = useGetImage(); const dispatch = useAppDispatch(); @@ -206,7 +206,6 @@ export default function Search() { const HeaderComponent = React.useMemo(() => ( = ({ const getImage = useGetImage(); const playTracks = usePlayTracks(); const { track: currentTrack } = useCurrentTrack(); - const navigation = useNavigation(); + const navigation = useNavigation(); // Setup callbacks const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]); diff --git a/src/screens/Music/types.ts b/src/screens/Music/types.ts index 6c7c985..21595c3 100644 --- a/src/screens/Music/types.ts +++ b/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 | undefined; Albums: undefined; Album: { id: string, album: Album }; + Playlists: undefined; + Playlist: { id: string }; RecentAlbums: undefined; Search: undefined; }; -export type NavigationProp = StackNavigationProp; +export type MusicNavigationProp = StackNavigationProp; diff --git a/src/screens/Player/components/ProgressBar.tsx b/src/screens/Player/components/ProgressBar.tsx index bff80ba..3b5b4fe 100644 --- a/src/screens/Player/components/ProgressBar.tsx +++ b/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; diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx index f39d2c1..aff0d0b 100644 --- a/src/screens/Settings/index.tsx +++ b/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(); const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]); const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]); const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]); diff --git a/src/screens/Settings/types.ts b/src/screens/Settings/types.ts new file mode 100644 index 0000000..a915946 --- /dev/null +++ b/src/screens/Settings/types.ts @@ -0,0 +1,11 @@ +import { StackNavigationProp } from '@react-navigation/stack'; + +export type SettingsStackParams = { + [key: string]: Record | undefined; + SettingList: undefined; + Library: undefined; + Cache: undefined; + Sentry: undefined; +}; + +export type SettingsNavigationProp = StackNavigationProp; diff --git a/src/screens/types.ts b/src/screens/types.ts index bd068fb..32d83f1 100644 --- a/src/screens/types.ts +++ b/src/screens/types.ts @@ -1,5 +1,9 @@ +import { StackNavigationProp } from '@react-navigation/stack'; + export interface ModalStackParams { [key: string]: Record | undefined; SetJellyfinServer: undefined; TrackPopupMenu: { trackId: string }; -} \ No newline at end of file +} + +export type ModalNavigationProp = StackNavigationProp; diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts new file mode 100644 index 0000000..873f33f --- /dev/null +++ b/src/typings/env.d.ts @@ -0,0 +1,3 @@ +declare module '@env' { + export const SENTRY_DSN: string; +} diff --git a/src/custom.d.ts b/src/typings/svg.d.ts similarity index 68% rename from src/custom.d.ts rename to src/typings/svg.d.ts index a5beb9f..28711e3 100644 --- a/src/custom.d.ts +++ b/src/typings/svg.d.ts @@ -2,8 +2,4 @@ declare module '*.svg' { import { SvgProps } from 'react-native-svg'; const content: React.FC; export default content; -} - -declare module '@env' { - export const SENTRY_DSN: string; } \ No newline at end of file diff --git a/src/utility/ErrorReportingAlert.ts b/src/utility/ErrorReportingAlert.ts index 0d92725..03141f9 100644 --- a/src/utility/ErrorReportingAlert.ts +++ b/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(); const dispatch = useDispatch(); useEffect(() => { @@ -53,7 +54,7 @@ export default function ErrorReportingAlert() { dispatch(setReceivedErrorReportingAlert()); } - }, []); + }, [dispatch, hasReceivedErrorReportingAlert, navigation]); return null; } \ No newline at end of file