Front: Song Lobby Page: Basic Layout with song title, illustration and illustration
This commit is contained in:
Arthi-chaud
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@@ -4,7 +4,7 @@ import Model from "./Model";
|
||||
interface Song extends Model {
|
||||
title: string;
|
||||
description: string;
|
||||
album: string
|
||||
album: string;
|
||||
metrics: Metrics;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"@types/react-query": "^1.2.9",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"expo": "~45.0.0",
|
||||
"expo-asset": "^8.6.1",
|
||||
"expo-dev-client": "~1.0.0",
|
||||
"expo-status-bar": "~1.3.0",
|
||||
"i18next": "^21.8.16",
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import { View } from "react-native"
|
||||
import { Text } from "react-native-paper";
|
||||
import { Image, View } from "react-native"
|
||||
import { Surface, Text } from "react-native-paper";
|
||||
import API from "../API";
|
||||
import { useQuery } from 'react-query';
|
||||
import LoadingComponent from "../components/loading";
|
||||
import React, { useEffect } from "react";
|
||||
import logo from '../assets/cover.png';
|
||||
|
||||
interface SongLobbyProps {
|
||||
// The unique identifier to find a song
|
||||
@@ -13,17 +15,29 @@ interface SongLobbyProps {
|
||||
const SongLobbyView = () => {
|
||||
const route = useRoute();
|
||||
const props: SongLobbyProps = route.params as any;
|
||||
const { isLoading, isError, data } = useQuery(['song', props.songId], API.getSong(props.songId))
|
||||
const { isLoading, data } = useQuery(['song', props.songId], () => API.getSong(props.songId));
|
||||
useEffect(() => {}, [isLoading]);
|
||||
if (isLoading)
|
||||
return <View style={{ flexGrow: 1, justifyContent: 'center' }}>
|
||||
<LoadingComponent/>
|
||||
</View>
|
||||
return <View>
|
||||
|
||||
<Text>
|
||||
{props.songId}
|
||||
</Text>
|
||||
</View>
|
||||
return (
|
||||
<View style={{ padding: 30 }}>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<View style={{ flex: 3 }}>
|
||||
<Surface style={{ aspectRatio: 1, zIndex: 0 }}>
|
||||
<Image source={logo} style={{ height: '100%', width: undefined, resizeMode: 'contain' }}/>
|
||||
</Surface>
|
||||
</View>
|
||||
<View style={{ flex: 3, padding: 10 }}>
|
||||
<Text>{data.title}</Text>
|
||||
<Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ paddingVertical: 10 }}/>
|
||||
<Text>{data.description}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default SongLobbyView;
|
||||
@@ -1201,11 +1201,37 @@
|
||||
xcode "^3.0.1"
|
||||
xml2js "0.4.23"
|
||||
|
||||
"@expo/config-plugins@~5.0.0", "@expo/config-plugins@~5.0.1":
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-5.0.1.tgz#66bc8d15785bdcd3598e466344f8c0518390179d"
|
||||
integrity sha512-1OfnsOrfeSkB0VZfT01UjQ5Uq6p+yYbq8yNkj0e99K/6NLHpyvIxj+5tZIV0nQXgkOcqBIABL2uA7lwB8CkaBQ==
|
||||
dependencies:
|
||||
"@expo/config-types" "^46.0.0"
|
||||
"@expo/json-file" "8.2.36"
|
||||
"@expo/plist" "0.0.18"
|
||||
"@expo/sdk-runtime-versions" "^1.0.0"
|
||||
"@react-native/normalize-color" "^2.0.0"
|
||||
chalk "^4.1.2"
|
||||
debug "^4.3.1"
|
||||
find-up "~5.0.0"
|
||||
getenv "^1.0.0"
|
||||
glob "7.1.6"
|
||||
resolve-from "^5.0.0"
|
||||
semver "^7.3.5"
|
||||
slash "^3.0.0"
|
||||
xcode "^3.0.1"
|
||||
xml2js "0.4.23"
|
||||
|
||||
"@expo/config-types@^45.0.0":
|
||||
version "45.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-45.0.0.tgz#963c2fdce8fbcbd003758b92ed8a25375f437ef6"
|
||||
integrity sha512-/QGhhLWyaGautgEyU50UJr5YqKJix5t77ePTwreOVAhmZH+ff3nrrtYTTnccx+qF08ZNQmfAyYMCD3rQfzpiJA==
|
||||
|
||||
"@expo/config-types@^46.0.0", "@expo/config-types@^46.0.1":
|
||||
version "46.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-46.0.2.tgz#191f225ebfcbe624868ddc40efae79593f948dd8"
|
||||
integrity sha512-PXkmOgNwRyBfgVT1HmFZhfh3Qm7WKKyV6mk3/5HJ/LzPh1t+Zs2JrWX8U2YncTLV1QzV7nV8tnkyvszzqnZEzQ==
|
||||
|
||||
"@expo/config@6.0.24", "@expo/config@^6.0.14", "@expo/config@~6.0.23":
|
||||
version "6.0.24"
|
||||
resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.24.tgz#3602da8fdfa817e290a52fb328fc8ed9d6bc61e7"
|
||||
@@ -1223,6 +1249,23 @@
|
||||
slugify "^1.3.4"
|
||||
sucrase "^3.20.0"
|
||||
|
||||
"@expo/config@~7.0.0":
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@expo/config/-/config-7.0.1.tgz#d8e2e5410bb0b8e305690bbc76e6bb76f6a6de31"
|
||||
integrity sha512-4lu0wr45XXJ2MXiLAm2+fmOyy/jjqF3NuDm92fO6nuulRzEEvTP4w3vsibJ690rT81ohtvhpruKhkRs0wSjKWA==
|
||||
dependencies:
|
||||
"@babel/code-frame" "~7.10.4"
|
||||
"@expo/config-plugins" "~5.0.1"
|
||||
"@expo/config-types" "^46.0.1"
|
||||
"@expo/json-file" "8.2.36"
|
||||
getenv "^1.0.0"
|
||||
glob "7.1.6"
|
||||
require-from-string "^2.0.2"
|
||||
resolve-from "^5.0.0"
|
||||
semver "7.3.2"
|
||||
slugify "^1.3.4"
|
||||
sucrase "^3.20.0"
|
||||
|
||||
"@expo/dev-server@~0.1.110":
|
||||
version "0.1.114"
|
||||
resolved "https://registry.yarnpkg.com/@expo/dev-server/-/dev-server-0.1.114.tgz#4859d106a0e810a0932127180006e46fe381edae"
|
||||
@@ -3730,6 +3773,19 @@ expo-application@~4.1.0:
|
||||
resolved "https://registry.yarnpkg.com/expo-application/-/expo-application-4.1.0.tgz#e0214ff7cf73db5a5e97e609ffbab3cc98288030"
|
||||
integrity sha512-Z2kctgVMpYZB1Iwaxd+XcMBq7h8EEY50GGrwxXsb1OHHQKN+WEVGBWxjvtPkAroqCdujLaB5HBay46gvUHRDQg==
|
||||
|
||||
expo-asset@^8.6.1:
|
||||
version "8.6.1"
|
||||
resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-8.6.1.tgz#86355b3e231e8aa6cf68a456ce9746dff1478b48"
|
||||
integrity sha512-urbUp1YtwH2J0Qc3inGQJdqTjWKML77SeMNgff+iR9MUE8gDkFqSCDjrBi7i5Oj5DDtq43mmtDg8G8ei6Vchcg==
|
||||
dependencies:
|
||||
blueimp-md5 "^2.10.0"
|
||||
expo-constants "~13.2.2"
|
||||
expo-file-system "~14.1.0"
|
||||
invariant "^2.2.4"
|
||||
md5-file "^3.2.3"
|
||||
path-browserify "^1.0.0"
|
||||
url-parse "^1.5.9"
|
||||
|
||||
expo-asset@~8.5.0:
|
||||
version "8.5.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-asset/-/expo-asset-8.5.0.tgz#d83ed8e42f1aa3d74aeca67b87c90e17f1661b0f"
|
||||
@@ -3749,6 +3805,14 @@ expo-constants@~13.1.1:
|
||||
"@expo/config" "^6.0.14"
|
||||
uuid "^3.3.2"
|
||||
|
||||
expo-constants@~13.2.2:
|
||||
version "13.2.4"
|
||||
resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-13.2.4.tgz#eab4a553f074b2c60ad7a158d3b82e3484a94606"
|
||||
integrity sha512-Zobau8EuTk2GgafwkfGnWM6CmSLB7X8qnQXVuXe0nd3v92hfQUmRWGhJwH88uxXj3LrfqctM6PaJ8taG1vxfBw==
|
||||
dependencies:
|
||||
"@expo/config" "~7.0.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
expo-dev-client@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-dev-client/-/expo-dev-client-1.0.0.tgz#89948d7f07adaceb4c77053535f5c4efc9a41a31"
|
||||
@@ -3798,6 +3862,14 @@ expo-file-system@~14.0.0:
|
||||
"@expo/config-plugins" "^4.0.14"
|
||||
uuid "^3.4.0"
|
||||
|
||||
expo-file-system@~14.1.0:
|
||||
version "14.1.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-14.1.0.tgz#4fa410873ef12ac8bec873593f7489f4305a14b8"
|
||||
integrity sha512-lJcPGQ8yKXVknVkD5TmcJnR/TpQbEL0JP8hknLejfq3FIqPqI/LBFn31YiP37grxW8lITz1al8pq5T6CSUjAzQ==
|
||||
dependencies:
|
||||
"@expo/config-plugins" "~5.0.0"
|
||||
uuid "^3.4.0"
|
||||
|
||||
expo-font@~10.1.0:
|
||||
version "10.1.0"
|
||||
resolved "https://registry.yarnpkg.com/expo-font/-/expo-font-10.1.0.tgz#2e8f8954943c5afca8444c1ffb1d74623c6a4fb6"
|
||||
|
||||
Reference in New Issue
Block a user