Create Event Page

app/App.tsx

@@ -13,6 +13,7 @@ import { EventPage } from "./pages/EventPage";
 import { Button } from "react-native-paper";
 import { EventData } from "./types/EventData";
 import ProfilePage from "./pages/ProfilePage";
+import { CreateEventPage } from "./pages/CreateEventPage";
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -61,7 +62,7 @@ function Tabs() {
         }} />
       <Tab.Screen
         name="Updates"
-        component={Home}
+        component={CreateEventPage}
         options={{
           tabBarIcon: ({ color }) => TabIcon("bell", color)
         }} />

app/components/create_event/UploadImageButton.tsx

@@ -0,0 +1,70 @@
+
+import React, { useState, useEffect } from 'react';
+import { Image, View, Platform, TouchableOpacity, Text, StyleSheet, Button } from 'react-native';
+import { AntDesign } from '@expo/vector-icons';
+import * as ImagePicker from 'expo-image-picker';
+
+export default function UploadImage(props: {onChange: any}) {
+  const [image, setImage] = useState('');
+  const addImage = async () => {
+    let _image = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [16,9],
+      quality: 1,
+    });
+    if (_image.canceled === false) {
+        props.onChange(_image.assets[0]['uri'])
+        setImage(_image.assets[0]['uri']);
+    }
+  };
+  return (
+        <View>
+            <TouchableOpacity onPress={addImage}>
+                <View>
+                    {
+                    image && (
+                        <View>
+                            <Image source={{ uri: image }} style={imageUploaderStyles.container} />
+                            <Button title='Delete Image' onPress={() => {
+                                props.onChange('');
+                                setImage('');
+                            }}/>
+                        </View>
+                    )} 
+                    {
+                    !image && (
+                        <View style={imageUploaderStyles.container}>
+                            <AntDesign name="camerao" size={70} color='#103158' />
+                            <Text style={imageUploaderStyles.text}>Upload event image</Text>
+                        </View>
+                    )}
+                </View>
+            </TouchableOpacity>
+        </View>
+  );
+}
+const imageUploaderStyles=StyleSheet.create({
+    container:{
+        width:330,
+        height: 187.25,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#4C4D4F',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        backgroundColor:'white',
+        alignItems:"center",
+        justifyContent: 'center'
+    },
+    text: {
+        paddingTop: 5,
+        fontSize: 15,
+        color: '#103158'
+    },
+    deleteButton: {
+
+    }
+})

app/package.json

@@ -11,11 +11,13 @@
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",
     "@expo/vector-icons": "^13.0.0",
+    "@react-native-community/datetimepicker": "^7.6.3",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.10",
     "@react-navigation/native-stack": "^6.9.18",
     "@types/react-native-vector-icons": "^6.4.18",
     "expo": "~49.0.13",
+    "expo-image-picker": "^14.7.1",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "0.72.6",

app/pages/CreateEventPage.tsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import UploadImageButton from "../components/create_event/UploadImageButton";
+import RNDateTimePicker from "@react-native-community/datetimepicker";
+
+export function CreateEventPage() {
+  const [eventTitle, setEventTitle] = useState("");
+  const [URLAddress, setURLAddress] = useState("");
+  const [location, setLocation] = useState("");
+  const [eventDescription, setEventDescription] = useState("");
+  const [fromDate, setFromDate] = useState(new Date());
+  const [toDate, setToDate] = useState(new Date());
+  const [image, setImage] = useState('');
+
+  const handleDateFromChange = (event: any, date: Date | undefined) => {
+    if (date) {
+        setFromDate(date);
+    }
+  };
+
+  const handleDateToChange = (event: any, date: Date | undefined) => {
+    if (date) {
+        setToDate(date);
+    }
+  };
+
+  const handleButtonClick = async () => {
+    try {
+      console.log('here')
+      const duration = fromDate.getTime() - toDate.getTime()
+      const response = await fetch('http://[Server Host IP]:3000/API/event/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title: eventTitle,
+          description: eventDescription,
+          img: image,
+          link: URLAddress,
+          location: {
+            latitude: 0,
+            longitude: 0,
+            address: location
+          },
+          date: fromDate,
+          duration: duration,
+          organization: '65cfda3383058492e13dba01' //Placeholder value
+        }),
+      })
+      .then(response => response.json())
+      .then(response => console.log(response))
+    }
+    catch (error) {
+      console.error('Error: ' + "[" + error + "]")
+    };
+  }
+
+  const handleImageChanges = async (img: string) => {
+    setImage(img)
+  }
+
+  const styles = StyleSheet.create({
+    titleText: {
+      color: "#00426e",
+      marginBottom: 10,
+      marginTop: 10,
+      fontSize: 17,
+      fontWeight: "500",
+    },
+    input: {
+      borderWidth: 1,
+      padding: 10,
+      borderRadius: 5,
+    },
+    block: {
+      marginTop: 10,
+      marginBottom: 10,
+    },
+    buttonView: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    createButton: {
+      borderWidth: 1,
+      borderRadius: 70,
+      width: 150,
+      padding: 10,
+    },
+    dateDisplay: {
+        display: "flex", 
+        flexDirection: "row", 
+        alignItems: "center"
+    }
+  });
+
+  return (
+    <ScrollView style={{ backgroundColor: "#f5f7fd" }}>
+      <View style={{ margin: 25 }}>
+        <View style={{ marginTop: 50 }}></View>
+        {/* Upload event image */}
+        <UploadImageButton onChange={handleImageChanges}/>
+
+        {/* Event title input */}
+        <View style={styles.block}>
+          <Text style={styles.titleText}>Event Title</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setEventTitle}
+            value={eventTitle}
+            placeholder="Event title"
+            placeholderTextColor="#00426e"
+          />
+        </View>
+
+        {/* Date input */}
+        <View style={styles.block}>
+          <Text style={styles.titleText}>Date</Text>
+          <View style={styles.dateDisplay}>
+            <Text style={{color: "#00426e", fontSize: 15}}>From</Text>
+            <RNDateTimePicker
+                value={fromDate}
+                mode="date"
+                onChange={handleDateFromChange}
+                minimumDate={new Date()}
+            />
+            <Text style={{color: "#00426e", fontSize: 15, marginLeft: 10}}>to</Text>
+            <RNDateTimePicker
+                value={toDate}
+                mode="date"
+                onChange={handleDateToChange}
+                minimumDate={fromDate}
+            />
+          </View>
+        </View>
+
+        {/* Location search */}
+
+        {/* Add URL */}
+        <View style={styles.block}>
+          <Text style={styles.titleText}>Add URL</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setURLAddress}
+            value={URLAddress}
+            placeholder="URL address"
+            placeholderTextColor="#00426e"
+          />
+        </View>
+
+        {/* Add Location */}
+        <View style={styles.block}>
+          <Text style={styles.titleText}>Location</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setLocation}
+            value={location}
+            placeholder="Search for location"
+            placeholderTextColor="#00426e"
+          />
+        </View>
+
+        {/* Event description input */}
+        <View style={styles.block}>
+          <Text style={styles.titleText}>Event description</Text>
+          <TextInput
+            style={{
+              borderWidth: 1,
+              borderRadius: 5,
+              padding: 10,
+              height: 150,
+            }}
+            multiline
+            numberOfLines={5}
+            onChangeText={setEventDescription}
+            value={eventDescription}
+            placeholder="Write a description for your event"
+            placeholderTextColor="#00426e"
+          />
+        </View>
+
+        {/* Create event button */}
+        <View style={styles.block}>
+            <View style={styles.buttonView}>
+                <Pressable onPress={handleButtonClick} style={styles.createButton}>
+                    <Text
+                    style={{
+                        fontSize: 18,
+                        textAlign: "center",
+                        fontWeight: "500",
+                    }}
+                    >
+                    Create Event
+                    </Text>
+                </Pressable>
+            </View>
+        </View>
+
+        <View style={{margin: 90}}></View>
+      </View>
+    </ScrollView>
+  );
+}

app/pages/EventPage.tsx

@@ -64,7 +64,7 @@ export function EventPage(props: { navigator: any, event?: EventData }) {
   });
 
   props.navigator.navigation.setOptions({ title: event.title });
-  fetch(`http://localhost:3000/api/organization/${event.organization}`)
+  fetch(`http://[Server Host IP]:3000/api/organization/${event.organization}`)
     .then((res) => res.json())
     .then((data) => setOrgName(data.name));
 

app/pages/EventsPage.tsx

@@ -141,7 +141,7 @@ export default function EventsPage(props: { navigator: any }) {
   const [eventData, setEventData] = useState<EventData[]>([]);
   const [filteredEvents, setFilteredEvents] = useState(eventData);
 
-  const EVENTS_ROUTE = "http://localhost:3000/api/event/recent";
+  const EVENTS_ROUTE = "http://[Server Host IP]:3000/api/event/recent";
 
   useEffect(() => {
     const fetchEventData = async () => {