Add App.js to Laura Branch

App.js

@@ -0,0 +1,133 @@
+import React, { Component } from 'react';
+
+import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from 'react-native';
+
+export default class App extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      name_l: '',
+      name_u: '',
+      lid: '',
+	  uid: ''
+    }
+  }
+
+  insertList_Function = () => {
+
+    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_list.php', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+
+        name_l: this.state.name_l,
+
+        name_u: this.state.name_u,
+
+        lid: this.state.lid,
+		
+		uid: this.state.uid,
+
+      })
+
+    }).then((response) => response.json())
+      .then((responseJson) => {
+        // Showing response message coming from server after inserting records.
+        Alert.alert(responseJson);
+      }).catch((error) => {
+        console.error(error);
+      });
+
+
+  }
+
+  render() {
+    return (
+
+      <View style={styles.MainContainer}>
+
+        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Draft: New List Form</Text>
+
+        <TextInput
+          placeholder="Who is using this list?"
+          onChangeText={data => this.setState({ name_u: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+		
+		 <TextInput
+          placeholder="Name the list!"
+          onChangeText={data => this.setState({ name_l: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+
+        <TextInput
+          placeholder="Enter UID(Hidden)"
+          onChangeText={data => this.setState({ uid: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+
+        <TextInput
+          placeholder="Enter LID(Hidden)"
+          onChangeText={data => this.setState({ lid: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+
+        <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >
+
+          <Text style={styles.text}>+</Text>
+        </TouchableOpacity>
+		<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your lists </Text>
+      </View>
+
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+
+  MainContainer: {
+
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    margin: 10
+  },
+
+  TextInputStyleClass: {
+
+    textAlign: 'center',
+    marginBottom: 7,
+    height: 40,
+    width: '80%',
+    borderWidth: 1,
+    borderColor: '#3414B3',
+    borderRadius: 5,
+  },
+
+  button: {
+	height:'10%',
+    width: '20%',
+    paddingTop: 2,
+    paddingBottom: 2,
+    backgroundColor: '#3414B3',
+    borderRadius: 100,
+    marginTop: 20
+  },
+
+  text: {
+    color: '#fff',
+    fontSize: 40,
+    textAlign: 'center',
+    padding: 5
+  }
+
+});