Stuff

components/eventComponent.tsx

@@ -37,21 +37,17 @@ function EventComponent(event: Event) {
     }
 
     const likeEvent = async () => {
-
-        addVote(userId, event.id).then(() => {
-            if(!votes || votes == null)
-                setVotes([])
-            votes.push(userId)
-            setUserFollowedEvent(true)
-        })
+        if(!votes || votes == null)
+            setVotes([])
+        votes.push(userId)
+        setUserFollowedEvent(true)
+        addVote(userId, event.id)
     }
 
     const unlikeEvent = async () => {
-        removeVote(userId, event.id).then(() => {
-            setVotes(votes.filter(id => userId !== id))
-            setUserFollowedEvent(false)
-        })
-
+        setVotes(votes.filter(id => userId !== id))
+        setUserFollowedEvent(false)
+        removeVote(userId, event.id)
     }
 
     return (

components/eventListComponent.tsx

@@ -0,0 +1,19 @@
+import {  SafeAreaView } from 'react-native';
+import Event from '../models/event';
+import EventComponent from '../components/eventComponent';
+import { ScrollView } from 'react-native-gesture-handler';
+
+export default function EventListComponent(props: {events: Event[]}) {
+
+  const items = props.events.map((val) => {
+      return <EventComponent {...val} />
+  });
+
+    return (
+      <SafeAreaView>
+        <ScrollView>
+          {items}
+        </ScrollView>
+      </SafeAreaView>
+    );
+}

components/filterComponent.tsx

@@ -4,9 +4,8 @@ import {withNavigation} from "react-navigation";
 import {useState} from "react";
 import Filter from "../models/filter";
 
-function FilterComponent(props) {
+function FilterComponent(props: {handleFilter: (newFilter: Filter) => Promise<void>}) {
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
-
     const [distance, setDistance] = useState(0)
     const [likes, setLikes] = useState(0)
     const [isActive, setIsActive] = useState(true)
@@ -96,8 +95,8 @@ function FilterComponent(props) {
         <View
             style={{
             position: "absolute",
-            left: 10,
-            top: 10,
+            right: 10,
+            bottom: 10,
             zIndex: 999
         }}>
             <Button

models/filter.ts

@@ -2,10 +2,6 @@ export default class Filter {
     isActive: boolean = true
     distance: number = 0
     likes: number = 0
-
-    constructor() {
-        this.isActive = true
-        this.distance = 0
-        this.likes = 0
-    }
+    onlyMyEvents: boolean = false
+    onlyLikedByMe: boolean = false
 }

screens/eventCreationScreen.tsx

@@ -43,9 +43,7 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
         longitudeDelta: number,
   }
 
-  //let currentUserUID = firebase.auth().currentUser.uid;
   const [name, setName] = useState("")
-  //const [creator, setCreator] = useState("")
   const [descripton, setDescrition] = useState("")
   const [address, setAddress] = useState("")
   const [startDate, setStartDate] = useState("")
@@ -54,6 +52,7 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
   const mapRef = useRef(null);
   const [location, setLocation] = useState<marker | undefined>(undefined);
   const [initialRegion, setinitialRegion] = useState<region | undefined>(undefined);
+  const now = new Date()
 
   useEffect(() => {
     (async () => {
@@ -80,10 +79,39 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
         longitudeDelta: 0.003,
       }
       setinitialRegion(reg);
-      console.log(location);
     })();
   }, []);
 
+  function validateInput(input: string, alerts: boolean = false, inputName: string) : boolean {
+    if(input == ""){
+        if(alerts) Alert.alert(inputName + " cannot be empty");
+        return false;
+    }
+    if(input.length < 3){
+        if(alerts)Alert.alert(inputName + " cannot be less than 3 characters");
+        return false;
+    }
+    return true;
+}
+
+
+function CheckCurrentEventIsValid() : boolean {
+    if(
+        validateInput(name, true, "Name") && 
+        startDate != null &&
+        endDate != null && 
+        validateInput(address, true, "Address") &&
+        location != null &&
+        location.latitude != null &&
+        location.longitude != null) return true
+    else {
+        if (location == null ||
+        location.latitude == null ||
+        location.longitude == null)
+        Alert.alert("Event must have set location");
+        return false;
+    }
+}
 
     function Cancel() {
         setName("");
@@ -128,13 +156,13 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
 
     };
 
-    const submit = async () => {
-
+    async function submit() {
 
-      try{
+    try{
       //TODO: input validation
-      if (location?.latitude == null || location?.latitude == null) throw assertionError("location is null");
-      const imageUrl = await uploadImageAsync(uploadedImageUrl);
+      if (CheckCurrentEventIsValid()){
+        const imageUrl = uploadedImageUrl ? await uploadImageAsync(uploadedImageUrl) : "";
+
       const event = {
         id: uuid.v4(),
         creatorId: auth.currentUser?.uid,
@@ -151,16 +179,7 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
         votes: null
       }
 
-      console.log('Image Url: ', imageUrl);
-      console.log('Event name: ', name);
-      console.log('Event type: ', displayValue);
-      console.log('Event descr: ', descripton);
-      console.log('Event adress: ', address);
-      console.log('Event st date: ', startDate);
-      console.log('Event end date: ', endDate);
-
       //TODO: input validation
-
       await addEvent(event);
       setName("");
       setDescrition("");
@@ -172,19 +191,22 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
       setLocation(undefined);
       navigation.navigate("MapScreen");
       }
+    }
       //TODO: error handling
     catch(error: any) {
       return error.message
     }
 
+
     }
 
     function onMapPress(e: MapEvent) {
       setLocation(e.nativeEvent.coordinate)
     }
 
-
-
+    function isFilled() {
+        return name != "" && !descripton && !address && !startDate && !endDate;
+    }
 
     const _maybeRenderUploadingOverlay = () => {
         if (uploading) {
@@ -248,9 +270,6 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
             allowsEditing: true,
             aspect: [4, 3],
         });
-
-        console.log({pickerResult});
-
         _handleImagePicked(pickerResult);
     };
 
@@ -263,7 +282,6 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
                 setUploadedImageUrl(uploadUrl);
             }
         } catch (e) {
-            console.log(e);
             alert("Upload failed, sorry :(");
         } finally {
             setUploading(false);
@@ -279,7 +297,6 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
                 resolve(xhr.response);
             };
             xhr.onerror = function (e) {
-                console.log(e);
                 reject(new TypeError("Network request failed"));
             };
             xhr.responseType = "blob";
@@ -340,12 +357,21 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
       );
 
 
-
+      async function setMyLocation(){
+        await Location.getCurrentPositionAsync({}).then((location_corrds) => {;
+        setLocation(location_corrds.coords)}).then(() => {
+        mapRef.current.animateToRegion({
+            latitude: location?.latitude,
+            longitude: location?.longitude,
+            latitudeDelta: 0.003,
+            longitudeDelta: 0.003,
+          })});
+    }
 
   return (
 
     <Layout style={globalStyles.container}>
-        <ScrollView style={globalStyles.container}>
+        <ScrollView>
         <BottomSheet
         ref={bs}
         snapPoints={[330, -5]}
@@ -367,6 +393,8 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
             placeholder='Event name'
             value={name}
             onChangeText={(txt: string) => setName(txt)}
+            status={validateInput(name) ? "basic" : "danger"}
+            maxLength={25}
         />
 
         <Select
@@ -387,6 +415,8 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
             onChangeText={(txt: string) => setDescrition(txt)}
             multiline={true}
             textStyle={{ minHeight: 64 }}
+            maxLength={300}
+
         />
 
         <Datepicker
@@ -396,6 +426,8 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
             size="medium"
             date={startDate}
             onSelect={setStartDate}
+            min={new Date(now.getFullYear(), now.getMonth(), now.getDate())}
+            max={new Date(now.getFullYear() + 5, now.getMonth(), now.getDate())}
         />
 
         <Datepicker
@@ -405,6 +437,8 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
             size="medium"
             date={endDate}
             onSelect={setEndDate}
+            min={new Date(now.getFullYear(), now.getMonth(), now.getDate())}
+            max={new Date(now.getFullYear() + 5, now.getMonth(), now.getDate())}
         />
 
         <Input
@@ -435,15 +469,10 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
       <View 
         style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         {uploadedImageUrl ? null : (
-          <Text
-            style={{
-              fontSize: 20,
-              marginBottom: 20,
-              textAlign: 'center',
-              marginHorizontal: 15,
-            }}>
-            Image placeholder
-          </Text>
+          <Image
+          source={require('../assets/image.png')}
+            >
+          </Image>
         )}
         {_maybeRenderImage()}
         {_maybeRenderUploadingOverlay()}
@@ -463,6 +492,7 @@ export default function EventCreationScreen({navigation}: DefaultScreenProps) {
         <Button
             style={globalStyles.input}
             onPress={submit}
+            disabled={isFilled()}
         >
             Submit
         </Button>
@@ -566,10 +596,14 @@ const styles = StyleSheet.create({
       padding: 15,
       borderRadius: 10,
       marginTop: 20,
+      marginLeft: 20,
       width: 320,
       height: 180,
     },
     label: {
       marginTop: 20,
+    },
+    setLocationButton: {
+        margin: 5,
     }
   });