Upload files to ''

Última entrega. Incluye pantallas de insert de Laura y pantallas de display de Coral.  La última vez que se corrieron, todo corrió bien.  Para ver cuál fue el resultado, baje el app Expo y siga este enlace: https://expo.io/@coralsalort/projects/GroceryPolice_Final. Aún las pantallas no se hacen display solas, hay que retroceder y volver a la pantalla para ver reflejado cualquier insert.

ListInput.js

+import React, { Component } from 'react';
+
+import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from 'react-native';
+
+export default class Lists extends Component {
+
+  constructor(props) {
+    // const {navigation,route}=props
+    // const {uid} = route.params;
+
+    super(props)
+
+    this.state = {
+      name_l: '',
+      store: '',
+      lid: '',
+	    uid: this.props.navigation.getParam('uid')
+    }
+  }
+
+  insertList_Function = () => {
+
+    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_l.php', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+
+        name_l: this.state.name_l,
+
+        store: this.state.store,
+		
+		    uid: this.state.uid,
+
+      })
+
+    }).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('Lists') }
+              ],
+              { cancelable: false }
+            );
+      
+      });
+
+
+  }
+
+  render() {
+    return (
+
+      <View style={styles.MainContainer}>
+
+        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>List Form</Text>
+
+		 <TextInput
+          placeholder="Name the list!"
+          onChangeText={data => this.setState({ name_l: data })}
+          underlineColorAndroid='transparent'
+          style={styles.TextInputStyleClass}
+        />
+        
+        <TextInput
+          placeholder="Where are you using this list?"
+          onChangeText={data => this.setState({ store: 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:50,
+    width: 50,
+    paddingTop: 2,
+    paddingBottom: 2,
+    backgroundColor: '#3414B3',
+    borderRadius: 100,
+    marginTop: 20,
+    alignItems: 'center'
+  },
+
+  text: {
+    color: '#fff',
+    fontSize: 35,
+    textAlign: 'center',
+    padding: 0
+  }
+
+});

Listas.js

+import { StatusBar } from 'expo-status-bar';
+import 'react-native-gesture-handler';
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { StyleSheet, Text, View, Image, ImageBackground, Button, TouchableOpacity, Platform, Alert, FlatList} from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+TouchableOpacity.defaultProps = { activeOpacity: 0.8 };
+
+export default function Listas({ navigation }) {
+  
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    fetch('https://ada.uprrp.edu/~victor.hernandez17/groceryPolice/viewUserLists.php', {
+      method: 'POST',
+      mode: 'no-cors',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        uid: 1234
+      })
+    })
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json);
+      console.log(json);
+
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+  }, []);
+
+
+  return (
+    <View style = {styles.container} >
+      <View style = {styles.pageTitleView}>
+        <Text style = {styles.pageTitleText}> Lists </Text>
+      </View>
+      <View style = {styles.contents}>
+        <ScrollView style = {styles.scrollView}>
+          <FlatList
+            data={data}
+            keyExtractor={(list) => list.id}
+            renderItem={({ item }) => (
+              <TouchableOpacity style={styles.listCards} onPress={() => navigation.navigate('Products', item)} >
+                <Text key={item.lid} style={styles.listText}>{item.name_l}</Text>
+              </TouchableOpacity>
+            )}
+          />
+        </ScrollView>
+      </View>
+      <View style = {styles.contentsPlus}>
+        <TouchableOpacity style={styles.plusButton} onPress={() => navigation.navigate('NewList', { uid: '1234' })}>
+          <Text style={styles.plusText}>+</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+    );
+ };
+
+ // STYLING
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#2F5597',
+  },
+
+  pageTitleView: {
+    flex: 1,
+    alignContent: 'flex-end',
+    justifyContent:  'flex-end'
+  },
+
+  contents: {
+    flex: 2,
+  },
+
+  contentsPlus: {
+    flex: 1,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+
+  pageTitleText: {
+    color: 'white',
+    fontSize: 45,
+    paddingLeft: 10,
+    paddingBottom: 30,
+    fontFamily: 'Avenir'
+  },
+
+  listCards: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: 'rgb(32,56,100)',
+    width: '99%',
+    borderRadius: 10,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+    shadowColor: 'rgba(0,0,0,.5)',
+    shadowOffset: { width: 2, height: 2},
+    shadowOpacity: 0.3,
+  },
+
+  plusButton: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgb(255,255,255)',
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    marginBottom: 50,
+    shadowColor: 'rgba(0,0,0,.5)',
+    shadowOffset: { width: 2, height: 2},
+    shadowOpacity: 0.3,
+  },
+
+  plusText: {
+    color: 'rgb(32,56,100)',
+    fontSize: 60,
+    fontWeight: '600',
+    fontFamily: 'Avenir'
+
+  },
+
+  listText: {
+    color: 'white',
+    fontSize: 20,
+    fontFamily: 'Avenir'
+
+  },
+
+  appButtonText: {
+    fontSize: 17,
+    color: "#fff",
+    alignSelf: "center",
+  },
+
+  bContainer: {
+    padding: 50,
+    paddingTop: -20,
+    flex: 2,
+    width: '100%',
+    justifyContent: "space-evenly",
+  },
+
+  scrollView: {
+    backgroundColor: 'transparent',
+    marginHorizontal: 20,
+  },
+
+});

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',
+  }
+});

Productos.js

+import { StatusBar } from 'expo-status-bar';
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { StyleSheet, Text, View, Image, ImageBackground, Button, TouchableOpacity, Platform, Alert, FlatList} from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+
+TouchableOpacity.defaultProps = { activeOpacity: 0.8 };
+
+export default function Listas  ({ navigation }) {
+
+    
+  
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    fetch('https://ada.uprrp.edu/~victor.hernandez17/groceryPolice/viewListProducts.php', {
+      method: 'POST',
+      mode: 'no-cors',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        lid: navigation.getParam('lid')
+      })
+    })
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json);
+      console.log(json);
+
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+  }, []);  
+
+
+  return (
+    <View style = {styles.container} >
+      <View style = {styles.pageTitleView}>
+        <Text style = {styles.pageTitleText}>{ navigation.getParam('name_l') } </Text>
+        <Text style = {styles.location}>{ navigation.getParam('store') } </Text>
+      </View>
+      <View style = {styles.contents}>
+        <ScrollView style = {styles.scrollView}>
+          <FlatList
+            data={data}
+            keyExtractor={(list) => list.id}
+            renderItem={({ item }) => (
+              <TouchableOpacity style={styles.listCards}>
+                <Text key={item.lid} style={styles.listText}>{item.name_p}</Text>
+              </TouchableOpacity>
+            )}
+          />
+        </ScrollView>
+      </View>
+      <View style = {styles.contentsPlus}>
+            <TouchableOpacity style={styles.plusButton} onPress={() => navigation.navigate('NewProduct', { lid:navigation.getParam('lid')})}>
+                <Text style={styles.plusText}>+</Text>
+            </TouchableOpacity>
+        </View>
+    </View>
+    );
+ };
+
+//  navigation.getParam('lid')
+ // STYLING
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F2F2F2',
+  },
+
+  pageTitleView: {
+    flex: 1,
+    alignContent: 'flex-end',
+    justifyContent:  'flex-end'
+  },
+
+  contents: {
+    flex: 2,
+  },
+
+  contentsPlus: {
+    flex: 1,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+
+  pageTitleText: {
+    color: '#888',
+    fontSize: 35,
+    paddingLeft: 10,
+    paddingBottom: -10,
+    fontFamily: 'Avenir'
+  },
+
+  location: {
+    color: 'rgb(32,56,100)',
+    fontSize: 25,
+    paddingLeft: 15,
+    paddingBottom: 30,
+    fontFamily: 'Avenir'
+  },
+
+
+  listCards: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: 'rgb(32,56,100)',
+    width: '99%',
+    borderRadius: 10,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    marginBottom: 10,
+    shadowColor: 'rgba(0,0,0,.5)',
+    shadowOffset: { width: 2, height: 2},
+    shadowOpacity: 0.3,
+  },
+
+  listText: {
+    color: 'white',
+    fontSize: 20,
+    fontFamily: 'Avenir'
+
+  },
+
+  plusButton: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgb(32,56,100)',
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    marginBottom: 50,
+    shadowColor: 'rgba(0,0,0,.5)',
+    shadowOffset: { width: 2, height: 2},
+    shadowOpacity: 0.3,
+  },
+
+  plusText: {
+    color: '#F2F2F2',
+    fontSize: 60,
+    fontWeight: '600',
+    fontFamily: 'Avenir'
+
+  },
+
+  appButtonText: {
+    fontSize: 17,
+    color: "#fff",
+    alignSelf: "center",
+  },
+
+  bContainer: {
+    padding: 50,
+    paddingTop: -20,
+    flex: 2,
+    width: '100%',
+    justifyContent: "space-evenly",
+  },
+
+  scrollView: {
+    backgroundColor: 'transparent',
+    marginHorizontal: 20,
+  },
+
+});

homeStack.js

+import { createStackNavigator } from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+import WelcomeScreen from './WelcomeScreen.js';
+import Listas from './Listas.js';
+import Productos from './Productos.js';
+import InputP from './ProductInput.js';
+import InputL from './ListInput.js';
+
+const screens = {
+
+    Welcome: {
+        screen: WelcomeScreen
+    },
+
+    Lists: {
+        screen: Listas
+    },
+
+    Products: {
+        screen: Productos
+    },
+
+    NewProduct: {
+        screen: InputP
+    },
+
+    NewList: {
+        screen: InputL
+    },
+
+}
+
+const HomeStack = createStackNavigator(screens);
+
+export default createAppContainer(HomeStack);