Front: Create Song Lobby View + add loading component

front/API.ts

@@ -6,6 +6,8 @@ import Song from "./models/Song";
 import SongHistory from "./models/SongHistory";
 import User from "./models/User";
 
+const delay = (seconds: number) => new Promise(resolve => setTimeout(resolve, seconds * 1000));
+
 declare type AuthenticationInput = { email: string, password: string };
 
 export default class API {
@@ -55,13 +57,13 @@ export default class API {
 	 * @param songId the id to find the song
 	 */
 	static async getSong(songId: number): Promise<Song> {
-		return {
+		return delay(1).then(() => ({
 			title: "Song",
 			description: "A song",
 			album: "Album",
 			metrics: {},
 			id: songId
-		};
+		}));
 		
 	}
 

front/Navigation.tsx

@@ -4,12 +4,14 @@ import AuthenticationView from './views/AuthenticationView';
 import HomeView from './views/HomeView';
 import { NavigationContainer } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
+import SongLobbyView from './views/SongLobbyView';
 
 const Stack = createNativeStackNavigator();
 
-export const protectedRoutes = <React.Fragment>
+export const protectedRoutes = <>
 	<Stack.Screen name="Home" component={HomeView} options={{ title: 'Welcome' }} />
-</React.Fragment>;
+	<Stack.Screen name="Song" component={SongLobbyView} options={{ title: 'Play' }} />
+</>;
 
 export const publicRoutes = <React.Fragment>
 	<Stack.Screen name="Login" component={AuthenticationView} options={{}} />

front/Theme.tsx

@@ -15,7 +15,7 @@ const Theme = {
 		surface: '#F6F6F6',
 		accent: '#00bdbd',
 		error: '#B00020',
-		text: '#ffffff',
+		text: '#000000',
 		onSurface: '#000000',
 		placeholder: '#C9C9C9',
 		notification: '#FF0000'

front/components/loading.tsx

@@ -0,0 +1,7 @@
+import { useTheme } from "@react-navigation/native";
+import Spinner from 'react-native-loading-spinner-overlay';
+const LoadingComponent = () => {
+	return <Spinner	visible={true} />
+}
+
+export default LoadingComponent;

front/package.json

@@ -30,6 +30,7 @@
     "react-dom": "17.0.2",
     "react-i18next": "^11.18.3",
     "react-native": "0.68.2",
+    "react-native-loading-spinner-overlay": "^3.0.1",
     "react-native-paper": "^4.12.2",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "~3.11.1",

front/views/HomeView.tsx

@@ -1,13 +1,15 @@
+import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { Text, View } from 'react-native';
-import { Button } from "react-native-paper";
+import { View } from 'react-native';
+import { Button, Text } from "react-native-paper";
 import { useDispatch, useSelector } from "react-redux";
-import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
+import { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
 import { useLanguage } from "../state/LanguageSlice";
 import { unsetUserToken } from "../state/UserSlice";
 
 const HomeView = () => {
   const dispatch = useDispatch();
+  const navigation = useNavigation();
   const language: AvailableLanguages = useSelector((state) => state.language.value);
   return (
     <View style={{ flex: 1, justifyContent: 'center' }}>
@@ -24,6 +26,7 @@ const HomeView = () => {
         }
         dispatch(useLanguage(newLanguage));
       }}>Change language</Button>
+      <Button onPress={() =>  navigation.navigate('Song', { songId: 1 }) }>Go to Song Page</Button>
       <Text style={{ textAlign: "center" }}>Current language: { language }</Text>
     </View>
   );

front/views/SongLobbyView.tsx

@@ -0,0 +1,25 @@
+import { useRoute } from "@react-navigation/native";
+import { View } from "react-native"
+import { Text } from "react-native-paper";
+import API from "../API";
+import { useQuery } from 'react-query';
+import LoadingComponent from "../components/loading";
+
+interface SongLobbyProps {
+	// The unique identifier to find a song
+	songId: number;
+}
+
+const SongLobbyView = () => {
+	const route = useRoute();
+	const props: SongLobbyProps = route.params as any;
+	const { isLoading, isError, data } = useQuery(['song', props.songId], API.getSong(props.songId))
+	return <View>
+		{ isLoading && <LoadingComponent/> }
+		<Text>
+			{props.songId}
+		</Text>
+	</View>
+}
+
+export default SongLobbyView;

front/yarn.lock

@@ -7010,6 +7010,11 @@ react-native-iphone-x-helper@^1.3.1:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-loading-spinner-overlay@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-loading-spinner-overlay/-/react-native-loading-spinner-overlay-3.0.1.tgz#092481b8cce157d3af5ef942f845ad981f96bd36"
+  integrity sha512-4GdR54HQnKg2HPSSisVizfTLuyhSh4splY9eb8mKiYF1Ihjn/5EmdNo5bN3S7uKPFRC3WLzIZIouX6G6fXfnjw==
+
 react-native-paper@^4.12.2:
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.2.tgz#31ed8011afd994d54dd403ed0099295fc1616d26"