From 3c04e8bb39c905a91412a9a37dd1a406615e7585 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 7 Jan 2024 01:29:58 +0100 Subject: [PATCH] Fix types --- front/Navigation.tsx | 21 ++-- front/components/CompetenciesTable.tsx | 2 +- front/components/ProgressBar.tsx | 2 +- front/components/ScoreModal.tsx | 2 +- front/views/ArtistDetailsView.tsx | 4 +- front/views/ErrorView.tsx | 2 +- front/views/ForgotPasswordView.tsx | 2 +- front/views/GenreDetailsView.tsx | 4 +- front/views/HomeView.test.tsx | 17 --- front/views/HomeView.tsx | 137 ------------------------- front/views/LeaderboardView.tsx | 4 +- front/views/MusicView.tsx | 4 +- front/views/PasswordResetView.tsx | 2 +- front/views/PlayView.tsx | 6 +- front/views/ProfileView.tsx | 7 +- front/views/SearchView.tsx | 3 +- front/views/V2/DiscoveryView.tsx | 2 +- front/views/V2/SearchView.tsx | 5 +- front/views/VerifiedView.tsx | 2 +- front/views/settings/SettingsView.tsx | 4 +- 20 files changed, 35 insertions(+), 197 deletions(-) delete mode 100644 front/views/HomeView.test.tsx delete mode 100644 front/views/HomeView.tsx diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 6e4ea5c..6a8b48b 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -41,8 +41,8 @@ import { createCustomNavigator } from './utils/navigator'; import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -const Stack = createNativeStackNavigator(); -const Tab = createCustomNavigator(); +const Stack = createNativeStackNavigator(); +const Tab = createCustomNavigator(); const Tabs = () => { return ( @@ -50,7 +50,7 @@ const Tabs = () => { {Object.entries(tabRoutes).map(([name, route], routeIndex) => ( @@ -167,18 +167,19 @@ type Route = { link?: string; }; -type OmitOrUndefined = T extends undefined ? T : Omit; +// if the component has no props, ComponentProps return unknown so we remove those +type RemoveNonObjects = [T] extends [{}] ? T : undefined; type RouteParams> = { - [RouteName in keyof Routes]: OmitOrUndefined< - ComponentProps, - keyof NativeStackScreenProps<{}> - >; + [RouteName in keyof Routes]: RemoveNonObjects>; }; type PrivateRoutesParams = RouteParams; type PublicRoutesParams = RouteParams; -type AppRouteParams = PrivateRoutesParams & PublicRoutesParams; +type TabsRoutesParams = RouteParams; +type AppRouteParams = PrivateRoutesParams & + PublicRoutesParams & + TabsRoutesParams & { Oops: undefined }; const RouteToScreen = (Component: Route['component']) => function Route(props: NativeStackScreenProps) { @@ -326,6 +327,4 @@ export const Router = () => { ); }; -export type RouteProps = T & Pick, 'route'>; - export const useNavigation = () => navigationHook>(); diff --git a/front/components/CompetenciesTable.tsx b/front/components/CompetenciesTable.tsx index d0874da..e51f478 100644 --- a/front/components/CompetenciesTable.tsx +++ b/front/components/CompetenciesTable.tsx @@ -15,7 +15,7 @@ type CompetenciesTableProps = { const CompetenciesTable = (props: CompetenciesTableProps) => { const navigation = useNavigation(); return ( - navigation.navigate('User', {})} shadow={3}> + navigation.navigate('User')} shadow={3}> {Object.keys(props).map((competencyName, i) => ( diff --git a/front/components/ProgressBar.tsx b/front/components/ProgressBar.tsx index 325567c..ca2bfc6 100644 --- a/front/components/ProgressBar.tsx +++ b/front/components/ProgressBar.tsx @@ -14,7 +14,7 @@ const ProgressBar = ({ xp }: { xp: number }) => { const nav = useNavigation(); return ( - nav.navigate('User', {})}> + nav.navigate('User')}> diff --git a/front/components/ScoreModal.tsx b/front/components/ScoreModal.tsx index 58a39e5..77aa68b 100644 --- a/front/components/ScoreModal.tsx +++ b/front/components/ScoreModal.tsx @@ -108,7 +108,7 @@ const ScoreModal = (props: ScoreModalProps) => { onPress={() => navigation.canGoBack() ? navigation.goBack() - : navigation.navigate('Home', {}) + : navigation.navigate('Home') } /> diff --git a/front/views/ArtistDetailsView.tsx b/front/views/ArtistDetailsView.tsx index 7f4ba84..92cd23f 100644 --- a/front/views/ArtistDetailsView.tsx +++ b/front/views/ArtistDetailsView.tsx @@ -5,7 +5,7 @@ import API from '../API'; import Song from '../models/Song'; import SongRow from '../components/SongRow'; import { Key } from 'react'; -import { RouteProps, useNavigation } from '../Navigation'; +import { useNavigation } from '../Navigation'; import { ImageBackground } from 'react-native'; import { useLikeSongMutation } from '../utils/likeSongMutation'; @@ -13,7 +13,7 @@ type ArtistDetailsViewProps = { artistId: number; }; -const ArtistDetailsView = ({ artistId }: RouteProps) => { +const ArtistDetailsView = ({ artistId }: ArtistDetailsViewProps) => { const artistQuery = useQuery(API.getArtist(artistId)); const songsQuery = useQuery(API.getSongsByArtist(artistId)); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); diff --git a/front/views/ErrorView.tsx b/front/views/ErrorView.tsx index 3c5ec56..0b011c5 100644 --- a/front/views/ErrorView.tsx +++ b/front/views/ErrorView.tsx @@ -8,7 +8,7 @@ const ErrorView = () => {
- diff --git a/front/views/ForgotPasswordView.tsx b/front/views/ForgotPasswordView.tsx index 9b5e822..7bc30b4 100644 --- a/front/views/ForgotPasswordView.tsx +++ b/front/views/ForgotPasswordView.tsx @@ -12,7 +12,7 @@ const ForgotPasswordView = () => { route: `/auth/forgot-password?email=${email}`, method: 'PUT', }); - navigation.navigate('Home', {}); + navigation.navigate('Home'); return 'email sent'; } catch { return 'Error with email, please contact support'; diff --git a/front/views/GenreDetailsView.tsx b/front/views/GenreDetailsView.tsx index 64e77c3..62a964d 100644 --- a/front/views/GenreDetailsView.tsx +++ b/front/views/GenreDetailsView.tsx @@ -1,7 +1,7 @@ import { Flex, Heading, useBreakpointValue, ScrollView } from 'native-base'; import { useQuery } from '../Queries'; import { LoadingView } from '../components/Loading'; -import { RouteProps, useNavigation } from '../Navigation'; +import { useNavigation } from '../Navigation'; import API from '../API'; import CardGridCustom from '../components/CardGridCustom'; import SongCard from '../components/SongCard'; @@ -11,7 +11,7 @@ type GenreDetailsViewProps = { genreId: number; }; -const GenreDetailsView = ({ genreId }: RouteProps) => { +const GenreDetailsView = ({ genreId }: GenreDetailsViewProps) => { const genreQuery = useQuery(API.getGenre(genreId)); const songsQuery = useQuery(API.getSongsByGenre(genreId, ['artist'])); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); diff --git a/front/views/HomeView.test.tsx b/front/views/HomeView.test.tsx deleted file mode 100644 index 59831a1..0000000 --- a/front/views/HomeView.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import TestRenderer from 'react-test-renderer'; -import store from '../state/Store'; - -import HomeView from '../views/HomeView'; - -describe('', () => { - it('has 2 children', () => { - const tree = TestRenderer.create( - - - - ).toJSON(); - expect(tree.children.length).toBe(2); - }); -}); diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx deleted file mode 100644 index 3bd352a..0000000 --- a/front/views/HomeView.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React from 'react'; -import { useQuery } from '../Queries'; -import API from '../API'; -import { LoadingView } from '../components/Loading'; -import { Box, Flex, Stack, Heading, VStack, HStack } from 'native-base'; -import { RouteProps, useNavigation } from '../Navigation'; -import SongCardGrid from '../components/SongCardGrid'; -import CompetenciesTable from '../components/CompetenciesTable'; -import Translate from '../components/Translate'; -import TextButton from '../components/TextButton'; -import { FontAwesome5 } from '@expo/vector-icons'; - -// eslint-disable-next-line @typescript-eslint/ban-types -const HomeView = (props: RouteProps<{}>) => { - const navigation = useNavigation(); - const userQuery = useQuery(API.getUserInfo); - const playHistoryQuery = useQuery(API.getUserPlayHistory(['artist'])); - const searchHistoryQuery = useQuery(API.getSearchHistory(0, 10)); - const skillsQuery = useQuery(API.getUserSkills); - const nextStepQuery = useQuery(API.getSongSuggestions(['artist'])); - - if ( - !userQuery.data || - !skillsQuery.data || - !searchHistoryQuery.data || - !playHistoryQuery.data - ) { - return ; - } - return ( - - - } - songs={ - nextStepQuery.data?.map((song) => ({ - cover: song.cover, - name: song.name, - songId: song.id, - artistName: song.artist!.name, - })) ?? [] - } - /> - - - - - - - - - - - } - songs={ - playHistoryQuery.data - ?.map((x) => x.song) - .map((song) => ({ - cover: song!.cover, - name: song!.name, - songId: song!.id, - artistName: song!.artist!.name, - })) ?? [] - } - /> - - - - - - navigation.navigate('Search', {})} - /> - navigation.navigate('Settings', {})} - /> - navigation.navigate('Leaderboard', {})} - /> - navigation.navigate('Home', {})} - /> - - - - - - - {searchHistoryQuery.data?.length === 0 && ( - - )} - {[...new Set(searchHistoryQuery.data.map((x) => x.query))] - .slice(0, 5) - .map((query) => ( - } - style={{ - margin: 2, - }} - key={query} - variant="solid" - size="xs" - colorScheme="primary" - label={query} - onPress={() => navigation.navigate('Search', {})} - /> - ))} - - - - - ); -}; - -export default HomeView; diff --git a/front/views/LeaderboardView.tsx b/front/views/LeaderboardView.tsx index 72413ab..6670ec1 100644 --- a/front/views/LeaderboardView.tsx +++ b/front/views/LeaderboardView.tsx @@ -3,12 +3,12 @@ import { SafeAreaView, View } from 'react-native'; import { useQuery } from '../Queries'; import API from '../API'; import { LoadingView } from '../components/Loading'; -import { useNavigation, RouteProps } from '../Navigation'; +import { useNavigation } from '../Navigation'; import { translate } from '../i18n/i18n'; import { PodiumCard } from '../components/leaderboard/PodiumCard'; import { BoardRow } from '../components/leaderboard/BoardRow'; -const Leaderboardiew = (props: RouteProps>) => { +const Leaderboardiew = () => { const navigation = useNavigation(); const scoresQuery = useQuery(API.getTopTwentyPlayers()); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); diff --git a/front/views/MusicView.tsx b/front/views/MusicView.tsx index f36e8a5..3bfb4b4 100644 --- a/front/views/MusicView.tsx +++ b/front/views/MusicView.tsx @@ -11,7 +11,7 @@ import { } from 'react-native-tab-view'; import { Heart, Clock, StatusUp, FolderCross } from 'iconsax-react-native'; import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; -import { RouteProps, useNavigation } from '../Navigation'; +import { useNavigation } from '../Navigation'; import { Translate, TranslationKey } from '../i18n/i18n'; import MusicList from '../components/UI/MusicList'; import { useQuery } from '../Queries'; @@ -109,7 +109,7 @@ const getTabData = (key: string) => { } }; -const MusicTab = (props: RouteProps) => { +const MusicTab = () => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); const { colors } = useTheme(); diff --git a/front/views/PasswordResetView.tsx b/front/views/PasswordResetView.tsx index f7b3980..bd74b2e 100644 --- a/front/views/PasswordResetView.tsx +++ b/front/views/PasswordResetView.tsx @@ -17,7 +17,7 @@ const PasswordResetView = () => { password, }, }); - navigation.navigate('Home', {}); + navigation.navigate('Home'); return 'password succesfully reset'; } catch { return 'password reset failed'; diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index 07bc20a..4c8d5f2 100644 --- a/front/views/PlayView.tsx +++ b/front/views/PlayView.tsx @@ -12,7 +12,7 @@ import Animated, { } from 'react-native-reanimated'; import * as ScreenOrientation from 'expo-screen-orientation'; import { Text, Row, View, useToast } from 'native-base'; -import { RouteProps, useNavigation } from '../Navigation'; +import { useNavigation } from '../Navigation'; import { useQuery } from '../Queries'; import API from '../API'; import { LoadingView } from '../components/Loading'; @@ -68,7 +68,7 @@ function parseMidiMessage(message: MIDIMessageEvent) { }; } -const PlayView = ({ songId, route }: RouteProps) => { +const PlayView = ({ songId }: PlayViewProps) => { const [playType, setPlayType] = useState<'practice' | 'normal' | null>(null); const accessToken = useSelector((state: RootState) => state.user.accessToken); const navigation = useNavigation(); @@ -283,7 +283,7 @@ const PlayView = ({ songId, route }: RouteProps) => { useEffect(() => { // Song.data is updated on navigation.navigate (do not know why) // Hotfix to prevent midi setup process from reruning on game end - if (navigation.getState().routes.at(-1)?.name != route.name) { + if (navigation.getState().routes.at(-1)?.name != "Play") { return; } if (playType && song.data && !webSocket.current) { diff --git a/front/views/ProfileView.tsx b/front/views/ProfileView.tsx index 42383f6..6c37364 100644 --- a/front/views/ProfileView.tsx +++ b/front/views/ProfileView.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useWindowDimensions } from 'react-native'; import { Column, Flex, Progress, Row, Text, View, useTheme } from 'native-base'; -import { RouteProps, useNavigation } from '../Navigation'; +import { useNavigation } from '../Navigation'; import UserAvatar from '../components/UserAvatar'; import { LoadingView } from '../components/Loading'; import { useQuery } from '../Queries'; @@ -18,8 +18,7 @@ function xpToProgressBarValue(xp: number): number { return Math.floor(xp / 10); } -// eslint-disable-next-line @typescript-eslint/ban-types -const ProfileView = (props: RouteProps<{}>) => { +const ProfileView = () => { const layout = useWindowDimensions(); const navigation = useNavigation(); const userQuery = useQuery(API.getUserInfo); @@ -77,7 +76,7 @@ const ProfileView = (props: RouteProps<{}>) => { navigation.navigate('Settings', {})} + onPress={async () => navigation.navigate('Settings')} /> ) => { +const SearchView = (props: SearchViewProps) => { const [filter, setFilter] = useState('all'); const [stringQuery, setStringQuery] = useState(props?.query ?? ''); diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx index a419bb2..9a6f3e1 100644 --- a/front/views/V2/DiscoveryView.tsx +++ b/front/views/V2/DiscoveryView.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useQuery } from '../../Queries'; import SongCardInfo from '../../components/V2/SongCardInfo'; import API from '../../API'; -import { RouteProps, useNavigation } from '../../Navigation'; +import { useNavigation } from '../../Navigation'; import GoldenRatio from '../../components/V2/GoldenRatio'; const HomeView = () => { diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 0387f55..055fd78 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -1,11 +1,8 @@ -import React from 'react'; import SearchBarComponent from '../../components/V2/SearchBar'; -import { RouteProps } from '../../Navigation'; import SearchHistory from '../../components/V2/SearchHistory'; import { View } from 'react-native'; -// eslint-disable-next-line @typescript-eslint/ban-types -const SearchView = (props: RouteProps<{}>) => { +const SearchView = () => { return ( diff --git a/front/views/VerifiedView.tsx b/front/views/VerifiedView.tsx index 7e7e5ff..93ebe83 100644 --- a/front/views/VerifiedView.tsx +++ b/front/views/VerifiedView.tsx @@ -17,7 +17,7 @@ const VerifiedView = () => { route: `/auth/verify?token=${(route.params as any).token}`, method: 'PUT', }); - navigation.navigate('Home', {}); + navigation.navigate('Home'); } catch { setFailed(true); } diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index 56d5742..7eb0717 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -14,7 +14,6 @@ import { } from 'react-native-tab-view'; import { HeartEdit, UserEdit, SecurityUser, FolderCross } from 'iconsax-react-native'; import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; -import { RouteProps } from '../../Navigation'; import { translate } from '../../i18n/i18n'; const renderScene = SceneMap({ @@ -36,8 +35,7 @@ const getTabData = (key: string) => { } }; -// eslint-disable-next-line @typescript-eslint/ban-types -const SettingsTab = (props: RouteProps<{}>) => { +const SettingsTab = () => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); const { colors } = useTheme();