final: episode 4

Jean Rauwers · Jean Rauwers · commit d2d057e7006a · 2021-03-04T23:26:51.000Z
diff --git a/episode-4-fetch-created-events/mobile-app/components/ModalComponent.js b/episode-4-fetch-created-events/mobile-app/components/ModalComponent.js
@@ -1,21 +1,24 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, TextInput, Modal, Dimensions, Image } from 'react-native';
-import { Picker } from '@react-native-picker/picker'
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Modal, Dimensions, Image } from 'react-native';
+
+import { MaterialIcons } from '@expo/vector-icons';
 
 const widowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
 import * as ImagePicker from 'expo-image-picker';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Picker } from '@react-native-picker/picker'
 
 
-const ModalComponent = ({ isVisible, setIsVisible, user }) => {
+const ModalComponent = ({ isVisible, setIsVisible, user, loadEvents }) => {
   const [eventTitle, setEventTitle] = useState(null)
   const [eventDescription, setEventDescription] = useState(null)
   const [eventPrice, setEventPrice] = useState(null)
   const [eventSport, setEventSport] = useState('Running')
+  const [eventDate, setEventDate] = useState(new Date())
   const [image, setImage] = useState(null)
 
-
   const pickImage = async () => {
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.All,
@@ -31,6 +34,50 @@ const ModalComponent = ({ isVisible, setIsVisible, user }) => {
     }
   };
 
+  const submitEventHandler = async () => {
+    const localUri = image;
+    const filename = localUri.split('/').pop()
+    const match = /\.(\w+)$/.exec(filename)
+    const type = match ? `image/${match[1]}` : `image`;
+
+    const data = new FormData()
+
+    data.append('thumbnail', { uri: localUri, name: filename, type })
+    data.append('title', eventTitle)
+    data.append('description', eventDescription)
+    data.append('price', eventPrice)
+    data.append('date', eventDate)
+    data.append('sport', eventSport)
+
+    try {
+      await fetch(`http://localhost:8080/api/event`, {
+        method: 'POST',
+        body: data,
+        headers: { user: user }
+      })
+      loadEvents()
+      cancelEventHandler()
+    } catch (error) {
+      console.log('🚀 -------------------------------------------------------------------------')
+      console.log('🚀 ~ file: ModalComponent.js ~ line 60 ~ submitEventHandler ~ error', error)
+      console.log('🚀 -------------------------------------------------------------------------')
+
+    }
+  }
+
+  const onChange = (event, selectedDate) => {
+    const currentDate = selectedDate || eventDate;
+    setEventDate(currentDate);
+  };
+
+  const cancelEventHandler = () => {
+    setIsVisible(!isVisible)
+    setImage(null)
+    setEventTitle(null)
+    setEventDescription(null)
+    setEventDate(new Date())
+    setEventSport('Running')
+  }
   return (
     <Modal
       animationType="slide"
@@ -43,42 +90,55 @@ const ModalComponent = ({ isVisible, setIsVisible, user }) => {
     >
       <View style={styles.centeredView}>
         <View style={styles.modalView}>
-          <Text style={styles.modalText}>Create a New Event</Text>
           <View style={styles.form}>
             <View>
-              <TouchableOpacity
-                style={[styles.button, styles.buttonClose]}
-                onPress={pickImage}
-              >
-                <Text>Pick an Image!</Text>
-              </TouchableOpacity>
-              {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
+
+              {image ? <TouchableOpacity onPress={pickImage}>
+                <Image source={{ uri: image }} style={styles.loadedImage} />
+              </TouchableOpacity> :
+                <TouchableOpacity
+                  style={styles.addImage}
+                  onPress={pickImage}
+                >
+                  <MaterialIcons name="add-a-photo" size={56} color="black" />
+                </TouchableOpacity>}
             </View>
             <View>
               <Text style={styles.label}>Event Title:</Text>
-              <TextInput style={styles.input} placeholder={"Event Title"} autoCapitalize='none' autoCorrect={false} value={eventTitle} onChangeText={text => console.log(text)} />
+              <TextInput style={styles.input} placeholder={"Event Title"} autoCapitalize='none' autoCorrect={false} value={eventTitle} onChangeText={text => setEventTitle(text)} />
               <Text style={styles.label}>Event Description:</Text>
-              <TextInput style={styles.input} placeholder={"Event Description"} autoCapitalize='none' autoCorrect={false} value={eventDescription} onChangeText={text => console.log(text)} />
+              <TextInput style={styles.input} placeholder={"Event Description"} autoCapitalize='none' autoCorrect={false} value={eventDescription} onChangeText={text => setEventDescription(text)} />
               <Text style={styles.label}>Event Price:</Text>
-              <TextInput style={styles.input} placeholder={"Price in $00,00"} autoCapitalize='none' autoCorrect={false} value={eventPrice} onChangeText={text => console.log(text)} />
+              <TextInput style={styles.input} placeholder={"Price in $00,00"} autoCapitalize='none' autoCorrect={false} value={eventPrice} onChangeText={text => setEventPrice(text)} />
+            </View>
+            <View>
+              <Text style={styles.label}>Event Date:</Text>
+              <DateTimePicker
+                value={eventDate}
+                mode='date'
+                onChange={onChange}
+              />
             </View>
             <View>
               <Text style={styles.label}>Sport: {eventSport}</Text>
-              <Picker selectedValue={eventSport} onValueChange={value => setEventSport(value)}>
+              <Picker mode={"dialog"} style={styles.sportPicker} selectedValue={eventSport} onValueChange={value => setEventSport(value)}>
                 <Picker.Item label={'Running'} value={'Running'} />
                 <Picker.Item label={'Cycling'} value={'Cycling'} />
                 <Picker.Item label={'Swimming'} value={'Swimming'} />
               </Picker>
-
             </View>
-
-
           </View>
           <TouchableOpacity
-            style={[styles.button, styles.buttonClose]}
-            onPress={() => setIsVisible(!isVisible)}
+            style={styles.primaryBtn}
+            onPress={submitEventHandler}
           >
-            <Text style={styles.textStyle}>Hide Modal</Text>
+            <Text style={styles.textStyle}>Submit Event</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.secondaryBtn}
+            onPress={cancelEventHandler}
+          >
+            <Text style={styles.textStyle}>Cancel</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -92,16 +152,15 @@ const styles = StyleSheet.create({
   centeredView: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center",
-    marginTop: 22
+    alignItems: "center"
   },
   modalView: {
     margin: 20,
     height: windowHeight,
     width: widowWidth,
     backgroundColor: "white",
     borderRadius: 20,
-    padding: 35,
+    padding: 25,
     alignItems: "center",
     shadowColor: "#000",
     shadowOffset: {
@@ -112,30 +171,14 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5
   },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2
-  },
-  buttonOpen: {
-    backgroundColor: "#F194FF",
-  },
-  buttonClose: {
-    backgroundColor: "#2196F3",
-  },
   textStyle: {
     color: "white",
     fontWeight: "bold",
     textAlign: "center"
   },
-  modalText: {
-    marginBottom: 15,
-    textAlign: "center"
-  },
   form: {
     alignSelf: "stretch",
-    paddingHorizontal: 30,
-    marginTop: 30
+    marginTop: 16
   },
   label: {
     fontSize: 16,
@@ -152,24 +195,42 @@ const styles = StyleSheet.create({
     fontWeight: "400",
     height: 44,
     shadowColor: '#000000',
-    marginBottom: 30,
+    marginBottom: 15,
     borderRadius: 4
   },
   primaryBtn: {
     height: 42,
+    width: '100%',
     backgroundColor: '#007bff',
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 4,
-    marginTop: 20
+    marginTop: 10
   },
   secondaryBtn: {
     height: 42,
+    width: '100%',
     backgroundColor: '#f04a5b',
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 4,
-    marginTop: 20
+    marginTop: 10
+  },
+  addImage: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 28,
+    width: '100%',
+    height: 150
+  },
+  loadedImage: {
+    width: '100%',
+    height: 150,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sportPicker: {
+
   }
 });
 
diff --git a/episode-4-fetch-created-events/mobile-app/package.json b/episode-4-fetch-created-events/mobile-app/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.13.4",
+    "@react-native-community/datetimepicker": "3.0.4",
     "@react-native-community/masked-view": "0.1.10",
     "@react-native-picker/picker": "^1.9.11",
     "@react-navigation/native": "^5.9.2",
diff --git a/episode-4-fetch-created-events/mobile-app/pages/Dashboard.js b/episode-4-fetch-created-events/mobile-app/pages/Dashboard.js
@@ -11,30 +11,21 @@ import { FontAwesome5, MaterialCommunityIcons, Ionicons } from '@expo/vector-ico
 const DashBoard = ({ navigation }) => {
   const [user, user_id] = isLoggedIn({ navigation });
   const [modalIsVisible, setModalIsVisible] = useState(false);
-  const [events, setEvents] = useState([{
-    _id: 'idblah',
-    title: 'London 5K running',
-    sport: 'Running',
-    description: "The best 5K event in London",
-    price: "39.00",
-    thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
-  },
-  {
-    _id: 'idbah',
-    title: 'London 5K running',
-    sport: 'Running',
-    description: "The best 5K event in London",
-    price: "39.00",
-    thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
-  },
-  {
-    _id: 'idbla',
-    title: 'London 5K running',
-    sport: 'Running',
-    description: "The best 5K event in London",
-    price: "39.00",
-    thumbnail_url: 'https://admin.concern.org.uk/sites/default/files/styles/hero_desktop/public/media/images/2019-06/London%20Marathon%20-%20Jenny%20Flynn.jpg/'
-  }])
+  const [events, setEvents] = useState([])
+
+  useEffect(() => {
+    loadEvents()
+  }, [])
+
+  const loadEvents = async () => {
+    const response = await fetch(`http://localhost:8080/api/dashboard`, {
+      method: 'GET',
+      headers: { user: user }
+    })
+
+    const jsonResponse = await response.json()
+    setEvents(jsonResponse.events)
+  }
 
   const logoutHandler = async () => {
     await AsyncStorage.removeItem('user');
@@ -69,7 +60,7 @@ const DashBoard = ({ navigation }) => {
             }}>
 
           </FlatList>
-          <ModalComponent isVisible={modalIsVisible} setIsVisible={setModalIsVisible} user={user}></ModalComponent>
+          <ModalComponent isVisible={modalIsVisible} setIsVisible={setModalIsVisible} user={user} loadEvents={loadEvents} />
           <TouchableOpacity onPress={logoutHandler}>
             <Text>Logout</Text>
           </TouchableOpacity>
diff --git a/episode-4-fetch-created-events/mobile-app/yarn.lock b/episode-4-fetch-created-events/mobile-app/yarn.lock
