Grocery_Police/ProductInput.js

import React, { Component } from 'react';
import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text, ScrollView, Platform,Picker,SafeAreaView} from 'react-native';
import DatePicker from 'react-native-datepicker';
import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
import Constants from 'expo-constants';


export default class Product extends Component {
  
  constructor(props) {

    super(props)

    this.state = {
      uid:this.props.navigation.getParam('uid'),
      lid:this.props.navigation.getParam('lid'),
      name_p: '',
	    bought_date:'',
      expiration_date:'',
      iso_date:'',
      i:'',
      typ:'',
      quantity:'',
      notes:'',
      renew:'',
      picked:'no'

    }
  }

  insertList_Function = () => {
    this.setState({ picked: "yes" })
    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_p.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

    name_p: this.state.name_p,

    lid: this.state.lid,
		
		bought_date:this.state.bought_date,
		
		expiration_date:this.state.expiration_date,
		
		type:this.state.typ,
		
		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("Status",responseJson, [
              {
                  text: 'Cancel',
                  style: 'cancel'
                },
                { text: 'OK', onPress:() => this.props.navigation.navigate('Products') }
              ],
              { cancelable: false }
            );



        //navigation.navigate('Landing');
      });


  }



setBought=(data)=>{
    this.setState({bought_date:data});
    this.setExpiration;
  }

setType=(itemValue)=>{ 
  this.setExpiration;
  }

setExpiration=()=>{

if(this.state.typ!=='' && this.state.bought_date!=='' ){
  const e_date=new Date(this.state.bought_date);
  //this.setState({e_date: new Date(this.state.bought_date)});
  if(this.state.typ==='fruits'){
      e_date.setDate(e_date.getDate() + 5);
   }
   else if(this.state.typ==='eggs'){
      e_date.setDate(e_date.getDate() + 28);
   }
   else if(this.state.typ==='meats'){
      e_date.setDate(e_date.getDate() + 14);
   }
    else if(this.state.typ==='salads'){
      e_date.setDate(e_date.getDate() + 3);
   }

   else if(this.state.typ==='poultry'){
      e_date.setDate(e_date.getDate() + 2);
   }

  else if(this.state.typ==='soups'){
      e_date.setDate(e_date.getDate() + 3);
   }
  else if(this.state.typ==='scr'){
      e_date.setDate(e_date.getDate() + 4);
   }
  else if(this.state.typ==='bacon'){
      e_date.setDate(e_date.getDate() + 7);
   }
  else if(this.state.typ==='sausage'){
      e_date.setDate(e_date.getDate() + 2);
   }

  else if(this.state.typ==='gmeat'){
      e_date.setDate(e_date.getDate() + 2);
   }

  else if(this.state.typ==='pizza'){
      e_date.setDate(e_date.getDate() + 4);
   }
  this.setState({expiration_date: e_date.toISOString().slice(0,10)});
  this.setState({ iso_date: e_date.toISOString().slice(0,10)});
}
}

 

  render() {
    return (


      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
       <View style={styles.MainContainer}>
        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Products Form</Text>

    		<TextInput
          placeholder="Product Name"
          onChangeText={data => this.setState({ name_p: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />      
    


    <RNPickerSelect
          placeholder={{label: 'Select type of food to refrigerate',color: 'gray',}}
            items={ [{label: 'Fruits',value: 'fruits'}, {label: 'Unopened Luncheon Meat',value: 'meats'},{label: 'Eggs',value: 'eggs'},{label: 'Salad',value: 'salads'},{label: 'Fresh Poultry',value: 'poultry'},{label: 'Soups',value: 'soups'},{label: 'Steaks, Chops or Roasts',value: 'scr'},{label: 'Bacon',value: 'bacon'},{label: 'Sausage',value: 'sausage'},{label: 'Ground Meat(Hamburguers)',value: 'gmeat'},{label: 'Pizza',value: 'pizza'}]}
            
            onValueChange={(itemValue, itemIndex) => {this.setState({typ:itemValue},()=>{ this.setExpiration();});}}
            style={pickerSelectStyles}
            useNativeAndroidPickerStyle={false}
    />

		<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: 2,
              top: 3,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 0,
            },
          }}
          //onDateChange={data => this.setBought(data)}
          onDateChange={data => {this.setState({bought_date:data},()=>{ this.setExpiration();});}}
        />

<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}> Expected expiration date {this.state.iso_date} </Text>

<Text style={{ fontSize: 10, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}>Add date here if you  prefer to add your own expiration date</Text>

  		<DatePicker
          style={styles.datestyling}
          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: 2,
              top: 3,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 0,
            },
          }}
          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 to renew or not',color: '#9EA0A4',}}
            items={ [{label: 'Renew',value: '1'}, {label: 'Do not Renew',value: '2'}]}
              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>
      </ScrollView>


    );
  }
}

const styles = StyleSheet.create({

  MainContainer: {
    marginTop: Constants.statusBarHeight,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },

  TextInputStyleClass: {
    color: 'gray',
    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#3414B3'
  },

    datestyling: {
    textAlign: 'center',
    color: 'gray',
    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,
    alignItems: 'center'
  },

  text: {
    color: '#fff',
    fontSize: 30,
    textAlign: 'center',
    padding: 0
  },


}

);

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    textAlign: 'center',
    marginLeft:35,
    borderWidth: 1,
    fontSize: 16,
    borderColor: '#3414B3',
    marginBottom: 7,
    height: 40,
    width: '80%',
    color: 'gray'
  },
  inputAndroid: {
    textAlign: "center",
    borderWidth: 1,
    fontSize: 16,
    borderColor: '#3414B3',
    marginBottom: 7,
    height: 40,
    width: 270,
    color: 'gray'
  },

    inputWeb: {
    color: 'gray',
    alignItems: 'center',
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#3414B3',
  }
});