From de2d75fb24ed443197a6ac4690e3e3e2c6b215be Mon Sep 17 00:00:00 2001
From: Jason Bao <jabao@ucsd.edu>
Date: Sun, 3 Dec 2017 21:46:39 -0800
Subject: [PATCH] popup with too much text

---
 Popup.js | 306 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 154 insertions(+), 152 deletions(-)

diff --git a/Popup.js b/Popup.js
index fbac597..5937dd8 100644
--- a/Popup.js
+++ b/Popup.js
@@ -1,152 +1,154 @@
-import React, {Component} from 'react';
-import PopupDialog from 'react-native-popup-dialog';
-import { Picker, Platform, StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';
-import DateTimePicker from './Datepick.js';
-
-class Popup extends React.Component{
-
-  constructor(props) {
-    super(props);
-    var now = new Date().toLocaleString();
-    this.state = {
-      name: '',
-      details: '',
-      eventStartDate: now,
-      eventEndDate: now,
-      tag: 'food',
-    }
-
-    console.log(this.state.eventStartDate);
-  }
-
-  show(lat, long) {
-    this.lat = lat;
-    this.long = long;
-    this.popupDialog.show();
-  }
-
-  sendInformation() {
-
-    // name and time must be filled out, description and tag are optional
-    if(this.state.name === '') {
-      Alert.alert("Please input an event name!");
-      return;
-    }
-    var now = new Date().getTime();
-    var start = new Date(this.state.eventStartDate).getTime();
-    var end = new Date(this.state.eventEndDate).getTime();
-    // past is invalid
-    if(start < now || end <= start) {
-      Alert.alert("Invalid event time!");
-      return;
-    }
-
-
-    let dbRef = this.props.db.database().ref('events');
-    dbRef.push({
-      coordinate: {latitude: this.lat, longitude: this.long},
-      description: this.state.details,
-      title: this.state.name,
-      date: {
-        // milliseconds since epoch
-        start: new Date(this.state.eventStartDate).getTime(),
-        end: new Date(this.state.eventEndDate).getTime()
-      },
-      tag: this.state.tag,
-      thumbUpUsers: 0,
-      thumbDownUsers: 0,
-      score: 0
-    });
-    console.log('hi')
-    console.log(this.state.name)
-    console.log(this.state.details)
-    console.log(this._startDateTimePicker.state.date)
-    console.log(this._endDateTimePicker.state.date)
-    console.log(this.long)
-    console.log(this.lat)
-    this.popupDialog.dismiss()
-
-    this.refs['textInput'].clear(0)
-    this.refs['textInputD'].clear(0)
-
-    var now = new Date().toLocaleString();
-    this.setState({
-      name: '',
-      details: '',
-      eventStartDate: now,
-      eventEndDate: now,
-      tag: 'food',
-    });
-  }
-
-
-  setStartDate = (date) => this.setState({eventStartDate: date});
-  setEndDate = (date) => this.setState({eventEndDate: date});
-
-  render() {
-    return (
-      <PopupDialog
-        ref={(popupDialog) => { this.popupDialog = popupDialog; }}
-      >
-        <View>
-        <TextInput
-          style={{height: 40}}
-          placeholder="Enter Event Name"
-          onChangeText={(name) => this.setState({name})}
-          ref = {"textInput"}
-        />
-        <Text style={{fontSize:17}}>Choose Event Start Time</Text>
-        <DateTimePicker
-          ref={(startDateTimePicker) => {this._startDateTimePicker = startDateTimePicker;}}
-          onChange={this.setStartDate}/>
-        <Button
-          title={this.state.eventStartDate.substring()}
-          color="#4B0082"
-          onPress={() => this._startDateTimePicker._showDateTimePicker()}
-        />
-        <Text style={{fontSize: 17}}>Choose Event End Time</Text>
-        <DateTimePicker
-          ref={(endDateTimePicker) => {this._endDateTimePicker = endDateTimePicker;}}
-          onChange={this.setEndDate}/>
-        <Button
-          title={this.state.eventEndDate.toString()}
-          color="#4B0082"
-          onPress={() => this._endDateTimePicker._showDateTimePicker()}
-                  // this.setState({textValue:{this._endDateTimePicker.date}})}
-        />
-        <TextInput
-          style={{height: 40}}
-          placeholder="Enter Event Details"
-          onChangeText={(details) => this.setState({details})}
-          ref = {"textInputD"}
-        />
-        <Picker
-          selectedValue={this.state.tag.toString()}
-          onValueChange={(itemValue, itemIndex) => this.setState({tag: itemValue})}>
-          <Picker.Item label="Food" value="food" />
-          <Picker.Item label="Cookie" value="cookie" />
-          <Picker.Item label="Gluten Free" value="gluten" />
-          <Picker.Item label="Vegetarian" value="veg" />   
-          <Picker.Item label="Other" value="other" />       
-        </Picker>
-        <Button
-          title="Create"
-          color="#32CD32"
-          accessibilityLabel="Learn more about this purple button"
-          onPress={() => this.sendInformation()}
-        />
-        <Button
-          title="Cancel"
-          color="#DC143C"
-          accessibilityLabel="Learn more about this purple button"
-          onPress={() => this.popupDialog.dismiss()}
-        />
-        </View>
-      </PopupDialog>
-      );
-    }
-  }
-const styles = StyleSheet.create({
-});
-
-export default Popup;
+import React, {Component} from 'react';
+import PopupDialog from 'react-native-popup-dialog';
+import { Picker, Platform, StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';
+import DateTimePicker from './Datepick.js';
+
+class Popup extends React.Component{
+
+  constructor(props) {
+    super(props);
+    var now = new Date().toLocaleString();
+    this.state = {
+      name: '',
+      details: '',
+      eventStartDate: now,
+      eventEndDate: now,
+      tag: 'food',
+    }
+
+    console.log(this.state.eventStartDate);
+  }
+
+  show(lat, long) {
+    this.lat = lat;
+    this.long = long;
+    this.popupDialog.show();
+  }
+
+  sendInformation() {
+
+    // name and time must be filled out, description and tag are optional
+    if(this.state.name === '') {
+      Alert.alert("Please input an event name!");
+      return;
+    }
+    var now = new Date().getTime();
+    var start = new Date(this.state.eventStartDate).getTime();
+    var end = new Date(this.state.eventEndDate).getTime();
+    // past is invalid
+    if(start < now - 86400000 || end <= start) {
+      Alert.alert("Invalid event time!");
+      return;
+    }
+
+
+    let dbRef = this.props.db.database().ref('events');
+    dbRef.push({
+      coordinate: {latitude: this.lat, longitude: this.long},
+      description: this.state.details,
+      title: this.state.name,
+      date: {
+        // milliseconds since epoch
+        start: new Date(this.state.eventStartDate).getTime(),
+        end: new Date(this.state.eventEndDate).getTime()
+      },
+      tag: this.state.tag,
+      thumbUpUsers: 0,
+      thumbDownUsers: 0,
+      score: 0
+    });
+    console.log('hi')
+    console.log(this.state.name)
+    console.log(this.state.details)
+    console.log(this._startDateTimePicker.state.date)
+    console.log(this._endDateTimePicker.state.date)
+    console.log(this.long)
+    console.log(this.lat)
+    this.popupDialog.dismiss()
+
+    this.refs['textInput'].clear(0)
+    this.refs['textInputD'].clear(0)
+    
+    var now = new Date().toLocaleString();
+    this.setState({
+      name: '',
+      details: '',
+      eventStartDate: now,
+      eventEndDate: now,
+      tag: 'food',
+    });
+  }
+
+
+  setStartDate = (date) => this.setState({eventStartDate: date});
+  setEndDate = (date) => this.setState({eventEndDate: date});
+
+  render() {
+    return (
+      <PopupDialog
+        ref={(popupDialog) => { this.popupDialog = popupDialog; }}
+      >
+        <View>
+        <TextInput
+          style={{height: 40}}
+          placeholder="Enter Event Name"
+          onChangeText={(name) => this.setState({name})}
+          ref = {"textInput"}
+        />
+        <Text style={{fontSize:17}}>Choose Event Start Time</Text>
+
+        <DateTimePicker
+          ref={(startDateTimePicker) => {this._startDateTimePicker = startDateTimePicker;}}
+          onChange={this.setStartDate}/>
+        <Button
+          title={this.state.eventStartDate.substring()}
+          color="#4B0082"
+          onPress={() => this._startDateTimePicker._showDateTimePicker()}
+        />
+        <Text style={{fontSize: 17}}>Choose Event End Time</Text>
+
+        <DateTimePicker
+          ref={(endDateTimePicker) => {this._endDateTimePicker = endDateTimePicker;}}
+          onChange={this.setEndDate}/>
+        <Button
+          title={this.state.eventEndDate.toString()}
+          color="#4B0082"
+          onPress={() => this._endDateTimePicker._showDateTimePicker()}
+                  // this.setState({textValue:{this._endDateTimePicker.date}})}
+        />
+        <TextInput
+          style={{height: 40}}
+          placeholder="Enter Event Details"
+          onChangeText={(details) => this.setState({details})}
+          ref = {"textInputD"}
+        />
+        <Picker
+          selectedValue={this.state.tag.toString()}
+          onValueChange={(itemValue, itemIndex) => this.setState({tag: itemValue})}>
+          <Picker.Item label="Food" value="Food" />
+          <Picker.Item label="Cookie" value="Cookie" />
+          <Picker.Item label="Gluten Free" value="Gluten Free" />
+          <Picker.Item label="Vegetarian" value="Vegetarian" />   
+          <Picker.Item label="Other" value="Other" />       
+        </Picker>
+        <Button
+          title="Create"
+          color="#32CD32"
+          accessibilityLabel="Learn more about this purple button"
+          onPress={() => this.sendInformation()}
+        />
+        <Button
+          title="Cancel"
+          color="#DC143C"
+          accessibilityLabel="Learn more about this purple button"
+          onPress={() => this.popupDialog.dismiss()}
+        />
+        </View>
+      </PopupDialog>
+      );
+    }
+  }
+const styles = StyleSheet.create({
+});
+
+export default Popup;