Skip to content

Commit 1faf881

Browse files
author
Jean Rauwers
committed
episode 5 first commit
1 parent d2d057e commit 1faf881

File tree

16 files changed

+7487
-0
lines changed

16 files changed

+7487
-0
lines changed

‎episode-5-dashboard-filter/mobile-app/.gitignore

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
node_modules/**/*
2+
.expo/*
3+
.expo-shared
4+
npm-debug.*
5+
*.jks
6+
*.p8
7+
*.p12
8+
*.key
9+
*.mobileprovision
10+
*.orig.*
11+
web-build/
12+
13+
# macOS
14+
.DS_Store

‎episode-5-dashboard-filter/mobile-app/App.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import { StyleSheet, LogBox } from 'react-native';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
6+
import Login from './pages/Login';
7+
import Register from './pages/Register';
8+
import Dashboard from './pages/Dashboard'
9+
10+
11+
LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
12+
LogBox.ignoreAllLogs();
13+
14+
15+
export default function App() {
16+
const Stack = createStackNavigator()
17+
18+
return (
19+
<NavigationContainer>
20+
<Stack.Navigator screenOptions={{
21+
headerShown: false
22+
}}>
23+
<Stack.Screen name="Login" component={Login} />
24+
<Stack.Screen name="Register" component={Register} />
25+
<Stack.Screen name="Dashboard" component={Dashboard} />
26+
</Stack.Navigator>
27+
</NavigationContainer>
28+
);
29+
}
30+
31+
const styles = StyleSheet.create({
32+
container: {
33+
flex: 1,
34+
backgroundColor: '#fff',
35+
alignItems: 'center',
36+
justifyContent: 'center',
37+
},
38+
btnContainer: {
39+
position: 'absolute',
40+
bottom: 50
41+
},
42+
text: {
43+
color: 'black'
44+
}
45+
});

‎episode-5-dashboard-filter/mobile-app/app.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"expo": {
3+
"name": "mobile-app",
4+
"slug": "mobile-app",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"splash": {
9+
"image": "./assets/splash.png",
10+
"resizeMode": "contain",
11+
"backgroundColor": "#ffffff"
12+
},
13+
"updates": {
14+
"fallbackToCacheTimeout": 0
15+
},
16+
"assetBundlePatterns": [
17+
"**/*"
18+
],
19+
"ios": {
20+
"supportsTablet": true
21+
},
22+
"android": {
23+
"adaptiveIcon": {
24+
"foregroundImage": "./assets/adaptive-icon.png",
25+
"backgroundColor": "#FFFFFF"
26+
}
27+
},
28+
"web": {
29+
"favicon": "./assets/favicon.png"
30+
}
31+
}
32+
}

‎episode-5-dashboard-filter/mobile-app/assets/adaptive-icon.png

17.1 KB
Loading

‎episode-5-dashboard-filter/mobile-app/assets/background.jpg

203 KB
Loading

‎episode-5-dashboard-filter/mobile-app/assets/favicon.png

1.43 KB
Loading

‎episode-5-dashboard-filter/mobile-app/assets/icon.png

21.9 KB
Loading

‎episode-5-dashboard-filter/mobile-app/assets/splash.png

47.3 KB
Loading

‎episode-5-dashboard-filter/mobile-app/babel.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ['babel-preset-expo'],
5+
};
6+
};

‎episode-5-dashboard-filter/mobile-app/components/ModalComponent.js

+237
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
import React, { useState } from 'react';
2+
import { View, Text, StyleSheet, TouchableOpacity, TextInput, Modal, Dimensions, Image } from 'react-native';
3+
4+
import { MaterialIcons } from '@expo/vector-icons';
5+
6+
const widowWidth = Dimensions.get('window').width;
7+
const windowHeight = Dimensions.get('window').height;
8+
9+
import * as ImagePicker from 'expo-image-picker';
10+
import DateTimePicker from '@react-native-community/datetimepicker';
11+
import { Picker } from '@react-native-picker/picker'
12+
13+
14+
const ModalComponent = ({ isVisible, setIsVisible, user, loadEvents }) => {
15+
const [eventTitle, setEventTitle] = useState(null)
16+
const [eventDescription, setEventDescription] = useState(null)
17+
const [eventPrice, setEventPrice] = useState(null)
18+
const [eventSport, setEventSport] = useState('Running')
19+
const [eventDate, setEventDate] = useState(new Date())
20+
const [image, setImage] = useState(null)
21+
22+
const pickImage = async () => {
23+
const result = await ImagePicker.launchImageLibraryAsync({
24+
mediaTypes: ImagePicker.MediaTypeOptions.All,
25+
allowsEditing: true,
26+
aspect: [4, 3],
27+
quality: 1,
28+
});
29+
30+
console.log(result);
31+
32+
if (!result.cancelled) {
33+
setImage(result.uri);
34+
}
35+
};
36+
37+
const submitEventHandler = async () => {
38+
const localUri = image;
39+
const filename = localUri.split('/').pop()
40+
const match = /\.(\w+)$/.exec(filename)
41+
const type = match ? `image/${match[1]}` : `image`;
42+
43+
const data = new FormData()
44+
45+
data.append('thumbnail', { uri: localUri, name: filename, type })
46+
data.append('title', eventTitle)
47+
data.append('description', eventDescription)
48+
data.append('price', eventPrice)
49+
data.append('date', eventDate)
50+
data.append('sport', eventSport)
51+
52+
try {
53+
await fetch(`http://localhost:8080/api/event`, {
54+
method: 'POST',
55+
body: data,
56+
headers: { user: user }
57+
})
58+
loadEvents()
59+
cancelEventHandler()
60+
} catch (error) {
61+
console.log('🚀 -------------------------------------------------------------------------')
62+
console.log('🚀 ~ file: ModalComponent.js ~ line 60 ~ submitEventHandler ~ error', error)
63+
console.log('🚀 -------------------------------------------------------------------------')
64+
65+
}
66+
}
67+
68+
const onChange = (event, selectedDate) => {
69+
const currentDate = selectedDate || eventDate;
70+
setEventDate(currentDate);
71+
};
72+
73+
const cancelEventHandler = () => {
74+
setIsVisible(!isVisible)
75+
setImage(null)
76+
setEventTitle(null)
77+
setEventDescription(null)
78+
setEventDate(new Date())
79+
setEventSport('Running')
80+
}
81+
return (
82+
<Modal
83+
animationType="slide"
84+
transparent={true}
85+
visible={isVisible}
86+
onRequestClose={() => {
87+
Alert.alert("Modal has been closed.");
88+
setIsVisible(!setIsVisible);
89+
}}
90+
>
91+
<View style={styles.centeredView}>
92+
<View style={styles.modalView}>
93+
<View style={styles.form}>
94+
<View>
95+
96+
{image ? <TouchableOpacity onPress={pickImage}>
97+
<Image source={{ uri: image }} style={styles.loadedImage} />
98+
</TouchableOpacity> :
99+
<TouchableOpacity
100+
style={styles.addImage}
101+
onPress={pickImage}
102+
>
103+
<MaterialIcons name="add-a-photo" size={56} color="black" />
104+
</TouchableOpacity>}
105+
</View>
106+
<View>
107+
<Text style={styles.label}>Event Title:</Text>
108+
<TextInput style={styles.input} placeholder={"Event Title"} autoCapitalize='none' autoCorrect={false} value={eventTitle} onChangeText={text => setEventTitle(text)} />
109+
<Text style={styles.label}>Event Description:</Text>
110+
<TextInput style={styles.input} placeholder={"Event Description"} autoCapitalize='none' autoCorrect={false} value={eventDescription} onChangeText={text => setEventDescription(text)} />
111+
<Text style={styles.label}>Event Price:</Text>
112+
<TextInput style={styles.input} placeholder={"Price in $00,00"} autoCapitalize='none' autoCorrect={false} value={eventPrice} onChangeText={text => setEventPrice(text)} />
113+
</View>
114+
<View>
115+
<Text style={styles.label}>Event Date:</Text>
116+
<DateTimePicker
117+
value={eventDate}
118+
mode='date'
119+
onChange={onChange}
120+
/>
121+
</View>
122+
<View>
123+
<Text style={styles.label}>Sport: {eventSport}</Text>
124+
<Picker mode={"dialog"} style={styles.sportPicker} selectedValue={eventSport} onValueChange={value => setEventSport(value)}>
125+
<Picker.Item label={'Running'} value={'Running'} />
126+
<Picker.Item label={'Cycling'} value={'Cycling'} />
127+
<Picker.Item label={'Swimming'} value={'Swimming'} />
128+
</Picker>
129+
</View>
130+
</View>
131+
<TouchableOpacity
132+
style={styles.primaryBtn}
133+
onPress={submitEventHandler}
134+
>
135+
<Text style={styles.textStyle}>Submit Event</Text>
136+
</TouchableOpacity>
137+
<TouchableOpacity
138+
style={styles.secondaryBtn}
139+
onPress={cancelEventHandler}
140+
>
141+
<Text style={styles.textStyle}>Cancel</Text>
142+
</TouchableOpacity>
143+
</View>
144+
</View>
145+
</Modal>
146+
)
147+
148+
};
149+
150+
151+
const styles = StyleSheet.create({
152+
centeredView: {
153+
flex: 1,
154+
justifyContent: "center",
155+
alignItems: "center"
156+
},
157+
modalView: {
158+
margin: 20,
159+
height: windowHeight,
160+
width: widowWidth,
161+
backgroundColor: "white",
162+
borderRadius: 20,
163+
padding: 25,
164+
alignItems: "center",
165+
shadowColor: "#000",
166+
shadowOffset: {
167+
width: 0,
168+
height: 2
169+
},
170+
shadowOpacity: 0.25,
171+
shadowRadius: 4,
172+
elevation: 5
173+
},
174+
textStyle: {
175+
color: "white",
176+
fontWeight: "bold",
177+
textAlign: "center"
178+
},
179+
form: {
180+
alignSelf: "stretch",
181+
marginTop: 16
182+
},
183+
label: {
184+
fontSize: 16,
185+
color: 'black',
186+
fontWeight: "bold",
187+
marginBottom: 8
188+
},
189+
input: {
190+
borderWidth: 1,
191+
borderColor: '#007bff',
192+
paddingHorizontal: 10,
193+
fontSize: 16,
194+
color: '#000000',
195+
fontWeight: "400",
196+
height: 44,
197+
shadowColor: '#000000',
198+
marginBottom: 15,
199+
borderRadius: 4
200+
},
201+
primaryBtn: {
202+
height: 42,
203+
width: '100%',
204+
backgroundColor: '#007bff',
205+
justifyContent: 'center',
206+
alignItems: 'center',
207+
borderRadius: 4,
208+
marginTop: 10
209+
},
210+
secondaryBtn: {
211+
height: 42,
212+
width: '100%',
213+
backgroundColor: '#f04a5b',
214+
justifyContent: 'center',
215+
alignItems: 'center',
216+
borderRadius: 4,
217+
marginTop: 10
218+
},
219+
addImage: {
220+
justifyContent: 'center',
221+
alignItems: 'center',
222+
marginBottom: 28,
223+
width: '100%',
224+
height: 150
225+
},
226+
loadedImage: {
227+
width: '100%',
228+
height: 150,
229+
justifyContent: 'center',
230+
alignItems: 'center',
231+
},
232+
sportPicker: {
233+
234+
}
235+
});
236+
237+
export default ModalComponent;

‎episode-5-dashboard-filter/mobile-app/hooks/isLoggedIn.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { useEffect, useState } from 'react';
2+
import AsyncStorage from '@react-native-async-storage/async-storage';
3+
4+
const isLoggedIn = (navigation) => {
5+
const [user, setUser] = useState(null)
6+
const [user_id, setUserId] = useState(null)
7+
8+
useEffect(() => {
9+
const getData = async () => {
10+
try {
11+
const user = await AsyncStorage.getItem('user')
12+
const user_id = await AsyncStorage.getItem('user_id')
13+
if (user !== null && user_id !== null) {
14+
setUser(user)
15+
setUserId(user_id)
16+
}
17+
} catch (e) {
18+
console.log('🚀 -------------------------------------------------')
19+
console.log('🚀 ~ file: Dashboard.js ~ line 44 ~ getData ~ e', e)
20+
console.log('🚀 -------------------------------------------------')
21+
}
22+
}
23+
getData();
24+
}, [user, user_id])
25+
26+
return [user, user_id];
27+
};
28+
29+
export default isLoggedIn;
30+

0 commit comments

Comments
 (0)