Skip to content

Commit d99d66b

Browse files
author
Jean Rauwers
committed
Add: Dasboard list and mock events
1 parent ef73b66 commit d99d66b

File tree

3 files changed

+111
-21
lines changed

3 files changed

+111
-21
lines changed

‎episode-2-start-dashboard/mobile-app/pages/Dashboard.js

+111-17
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,79 @@
1-
import React from 'react'
2-
import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native'
3-
import { color } from 'react-native-reanimated'
1+
import React, { useState } from 'react'
2+
import { View, Text, TouchableOpacity, StyleSheet, ImageBackground, SafeAreaView, FlatList, Image } from 'react-native'
43

54
const bgImage = require('../assets/background.jpg')
65

76
const DashBoard = ({ navigation }) => {
7+
const [events, setEvents] = useState([{
8+
_id: 'idblah',
9+
title: 'London 5K running',
10+
sport: 'Running',
11+
description: "The best 5K event in London",
12+
price: "39.00",
13+
thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
14+
},
15+
{
16+
_id: 'idbah',
17+
title: 'London 5K running',
18+
sport: 'Running',
19+
description: "The best 5K event in London",
20+
price: "39.00",
21+
thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
22+
},
23+
{
24+
_id: 'idbla',
25+
title: 'London 5K running',
26+
sport: 'Running',
27+
description: "The best 5K event in London",
28+
price: "39.00",
29+
thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
30+
}])
31+
832
return (
9-
<View style={styles.container}>
10-
<ImageBackground source={bgImage} style={styles.image}>
11-
<Text style={styles.title}>Sport's App - DashBoard</Text>
12-
<TouchableOpacity onPress={() => navigation.navigate('Login')}>
13-
<Text>Logout</Text>
14-
</TouchableOpacity>
15-
</ImageBackground>
16-
</View>
33+
<SafeAreaView style={styles.container}>
34+
<View style={styles.container}>
35+
<ImageBackground source={bgImage} style={styles.image}>
36+
<Text style={styles.title}>DashBoard</Text>
37+
<FlatList
38+
style={styles.list}
39+
data={events}
40+
showHorizontalScrollIndicator={true}
41+
keyExtractor={event => event._id}
42+
renderItem={({ item }) => {
43+
44+
console.log('🚀 ---------------------------------------------------------')
45+
console.log('🚀 ~ file: Dashboard.js ~ line 51 ~ DashBoard ~ item', item)
46+
console.log('🚀 ---------------------------------------------------------')
47+
48+
return (<View style={styles.listItem}>
49+
<Image
50+
style={styles.thumbnail}
51+
source={{ uri: item.thumbnail_url }}
52+
/>
53+
<Text style={styles.eventTitle}><Text style={styles.boldText}>Title:</Text> {item.title}</Text>
54+
<Text style={styles.sport}><Text style={styles.boldText}>Sport:</Text> {item.sport}</Text>
55+
<Text style={styles.price}><Text style={styles.boldText}>Price:</Text> {'$' + item.price}</Text>
56+
<Text style={styles.description}><Text style={styles.boldText}>Description:</Text> {item.description}</Text>
57+
<TouchableOpacity style={styles.primaryBtn} onPress={() => console.log('Register')}>
58+
<Text style={{ color: "#FFFF" }}>Register</Text>
59+
</TouchableOpacity>
60+
</View>)
61+
}}>
62+
63+
</FlatList>
64+
<TouchableOpacity onPress={() => navigation.navigate('Login')}>
65+
<Text>Logout</Text>
66+
</TouchableOpacity>
67+
</ImageBackground>
68+
</View>
69+
</SafeAreaView>
1770
)
1871
}
1972

2073

2174
const styles = StyleSheet.create({
2275
container: {
2376
flex: 1,
24-
justifyContent: "center",
25-
alignItems: 'center'
2677
},
2778
image: {
2879
flex: 1,
@@ -31,12 +82,55 @@ const styles = StyleSheet.create({
3182
justifyContent: "center",
3283
alignItems: 'center'
3384
},
34-
title: {
35-
fontSize: 32,
85+
list: {
86+
width: "100%",
87+
paddingHorizontal: 20
88+
},
89+
listItem: {
90+
padding: 8,
91+
backgroundColor: "#FFFF",
92+
marginVertical: 8,
93+
opacity: 0.9
94+
},
95+
thumbnail: {
96+
width: 'auto',
97+
height: 150,
98+
marginBottom: 8
99+
},
100+
eventTitle: {
101+
fontSize: 20,
36102
marginBottom: 8,
37103
fontWeight: "bold",
38-
color: "#f04a5b"
39-
}
104+
color: "#444",
105+
marginBottom: 15,
106+
},
107+
sport: {
108+
fontSize: 16,
109+
color: "#444",
110+
},
111+
price: {
112+
fontSize: 16,
113+
color: '#999',
114+
marginTop: 5,
115+
fontWeight: 'bold'
116+
},
117+
description: {
118+
fontSize: 16,
119+
color: "#444",
120+
},
121+
boldText: {
122+
fontSize: 13,
123+
fontWeight: 'bold',
124+
color: "#444"
125+
},
126+
primaryBtn: {
127+
height: 42,
128+
backgroundColor: '#007bff',
129+
justifyContent: 'center',
130+
alignItems: 'center',
131+
borderRadius: 4,
132+
marginTop: 20
133+
},
40134
})
41135

42136

‎episode-2-start-dashboard/mobile-app/pages/Login.js

-2
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,6 @@ const Login = ({ navigation }) => {
6363
<TextInput style={styles.input}
6464
placeholder="Password:"
6565
placeholderTextColor="#ffffff"
66-
keyboardType="password"
67-
type="password"
6866
secureTextEntry={true}
6967
autoCorrect={false}
7068
value={password}

‎episode-2-start-dashboard/mobile-app/pages/Register.js

-2
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@ const Register = ({ navigation }) => {
7979
<TextInput style={styles.input}
8080
placeholder="Password:"
8181
placeholderTextColor="#ffffff"
82-
keyboardType="password"
83-
type="password"
8482
secureTextEntry={true}
8583
autoCorrect={false}
8684
value={password}

0 commit comments

Comments
 (0)