Upload files to ''

Add Product.js which is for product input

Product.js

@@ -0,0 +1,252 @@
+import React, { Component } from 'react';
+import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text, ScrollView, Platform,Picker} from 'react-native';
+import DatePicker from 'react-native-datepicker';
+import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
+
+const food=[{label:'food',value:'food'},{label:'not food',value:'notfood'}];
+
+export default class Product extends Component {
+  
+  constructor(props) {
+
+    super(props)
+
+    this.state = {
+      uid:'1234',
+      lid:'5678',
+      name_p: '',
+	    bought_date:'',
+      expiration_date:'',
+      type:'fresh',
+      quantity:'',
+      notes:'',
+      renew:'1',
+      picked:'no'
+
+    }
+  }
+  
+  insertList_Function = () => {
+    this.setState({ picked: "yes" })
+    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_productsss.php', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+
+    name_p: this.state.name_p,
+
+    lid: this.state.lid,
+		
+		uid: this.state.uid,
+		
+		bought_date:this.state.bought_date,
+		
+		expiration_date:this.state.expiration_date,
+		
+		type:this.state.type,
+		
+		quantity:this.state.quantity,
+		
+		renew:this.state.renew,
+		
+		notes:this.state.notes,
+
+      })
+
+    }).then((response) => response.json())
+      .then((responseJson) => {
+        // Showing response message coming from server after inserting records.
+        Alert.alert(responseJson);
+      });
+
+
+  }
+
+  render() {
+    return (
+
+
+      <View style={styles.MainContainer}>
+      
+        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Add Products!</Text>
+
+		<TextInput
+          placeholder="Product Name"
+          onChangeText={data => this.setState({ name_p: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+       
+		<DatePicker
+          style={styles.TextInputStyleClass}
+          mode="date" // The enum of date, datetime and time
+          placeholder="Bought"
+          format="YYYY-MM-DD"
+          date={this.state.bought_date}
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
+          customStyles={{
+            dateIcon: {
+              position: 'absolute',
+              left: 0,
+              top: 4,
+              marginLeft: 0,
+            },
+            dateInput: {
+              marginLeft: 36,
+            },
+          }}
+          onDateChange={data => this.setState({bought_date:data}) }
+          
+        />
+  		<DatePicker
+          style={styles.TextInputStyleClass}
+          mode="date" // The enum of date, datetime and time
+          date={this.state.expiration_date}
+          placeholder="Expiration"
+          format="YYYY-MM-DD"
+          confirmBtnText="Confirm"
+          cancelBtnText="Cancel"
+          customStyles={{
+            dateIcon: {
+              position: 'absolute',
+              left: 0,
+              top: 4,
+              marginLeft: 0,
+            },
+            dateInput: {
+              marginLeft: 36,
+            },
+          }}
+          onDateChange={data => this.setState({expiration_date:data}) }
+          
+        />
+
+<TextInput 
+  placeholder="Quantity"
+  style={styles.TextInputStyleClass}
+  keyboardType = 'number-pad'
+  onChangeText = {(text)=> this.setState({quantity: text})}
+  value = {this.state.quantity}
+/>
+
+		<TextInput
+          placeholder="Notes"
+          onChangeText={data => this.setState({ notes: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+
+ 
+
+          <RNPickerSelect
+          placeholder={{label: 'Select type of food...',color: '#9EA0A4',}}
+            items={ [{label: 'Fruit',value: 'fruit'}, {label: 'Meat',value: 'meat'}]}
+            selectedValue={this.state.type}
+            onValueChange={(itemValue, itemIndex) =>this.setState({type: itemValue})}
+            style={pickerSelectStyles}
+            useNativeAndroidPickerStyle={false}
+          />
+
+
+        <RNPickerSelect
+            placeholder={{label: 'Select to renew or not...',color: '#9EA0A4',}}
+            items={ [{label: 'Renew',value: '1'}, {label: 'Do not Renew',value: '0'}]}
+              selectedValue={this.state.renew}
+              onValueChange={(itemValue, itemIndex) => this.setState({renew: itemValue})} 
+              style={pickerSelectStyles}
+            useNativeAndroidPickerStyle={false}
+          />
+
+
+      <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 products </Text>
+
+
+      </View>
+
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+
+  MainContainer: {
+
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    margin: 10
+  },
+
+  TextInputStyleClass: {
+    color: 'gray',
+    textAlign: 'center',
+    marginBottom: 7,
+    height: 40,
+    width: '80%',
+    borderWidth: 1,
+    borderColor: '#3414B3'
+  },
+
+  button: {
+	  height:50,
+    width: 50,
+    paddingTop: 2,
+    paddingBottom: 2,
+    backgroundColor: '#3414B3',
+    borderRadius: 100,
+    marginTop: 20
+  },
+
+  text: {
+    color: '#fff',
+    fontSize: 32,
+    textAlign: 'center',
+    padding: 0
+  },
+
+}
+
+);
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOS: {
+    fontSize: 16,
+    borderWidth: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderColor: '#3414B3',
+    color: 'gray',
+    marginTop: 20,
+    paddingRight: 30, // to ensure the text is never behind the icon
+  },
+  inputAndroid: {
+    justifyContent: 'center',
+    borderWidth: 1,
+    alignItems: 'center',
+    fontSize: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderColor: '#3414B3',
+    marginBottom: 7,
+    height: 40,
+    width: 270,
+    color: 'gray',
+    paddingRight: 30, // to ensure the text is never behind the icon
+  },
+});
+
+