Created
July 12, 2019 15:37
-
-
Save anastely/dc86a5ef591b1399503bf682307d68c1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Here is a one of the Two Tabs | |
| import React, { Component } from "react"; | |
| import { | |
| View, | |
| Text, | |
| StyleSheet, | |
| Dimensions, | |
| FlatList, | |
| ScrollView, | |
| TouchableOpacity | |
| } from "react-native"; | |
| import firebase from "react-native-firebase"; | |
| import Icon from "react-native-vector-icons/Ionicons"; | |
| const { width } = Dimensions.get("window"); | |
| export default class AcceptedOrders extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| currentUser: null | |
| }; | |
| } | |
| componentDidMount() { | |
| const currentUser = firebase.auth().currentUser.uid; | |
| this.setState({ currentUser }); | |
| const Orders = firebase.database().ref(`AcceptedOrders/${currentUser}`); | |
| Orders.on("value", snapshot => { | |
| let orders = []; | |
| snapshot.forEach(childSnapshot => { | |
| if (childSnapshot.val().statusInfo == "Accepted") { | |
| orders.push({ | |
| gKey: childSnapshot.key, | |
| id: childSnapshot.val().id, | |
| nameOfProblem: childSnapshot.val().nameOfProblem, | |
| description: childSnapshot.val().description, | |
| date: childSnapshot.val().date, | |
| time: childSnapshot.val().time, | |
| Price: childSnapshot.val().Price, | |
| statusInfo: childSnapshot.val().statusInfo, | |
| region: childSnapshot.val().region | |
| }); | |
| this.setState({ orders }); | |
| } | |
| }); | |
| }); | |
| } | |
| _listEmptyComponent = () => { | |
| return ( | |
| <View style={styles.container}> | |
| <Text style={{ alignSelf: "center" }}> | |
| {" "} | |
| No Orders Found :( try Later! | |
| </Text> | |
| </View> | |
| ); | |
| }; | |
| render() { | |
| return ( | |
| <View style={styles.container}> | |
| <FlatList | |
| data={this.state.orders} | |
| key={Math.random() * 1000} | |
| contentContainerStyle={{ flexGrow: 1 }} | |
| ListEmptyComponent={this._listEmptyComponent()} | |
| extraData={this.state} | |
| renderItem={({ item }) => { | |
| return ( | |
| <ScrollView scrollEnabled={true} style={{ marginTop: 20 }}> | |
| <TouchableOpacity | |
| onPress={() => | |
| this.props.navigation.navigate("OrderDetails", { | |
| title: item.nameOfProblem, | |
| description: item.description, | |
| date: item.date, | |
| time: item.time, | |
| status: item.statusInfo, | |
| gKey: item.gKey, | |
| price: item.Price, | |
| // location: item.location | |
| region: item.region | |
| }) | |
| } | |
| > | |
| <View style={styles.listCard}> | |
| <View | |
| style={{ | |
| justifyContent: "flex-start", | |
| alignItems: "baseline" | |
| }} | |
| > | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-build" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}>Title:</Text>{" "} | |
| {item.nameOfProblem} | |
| </Text> | |
| </View> | |
| {/* <View style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }}> | |
| <Icon name="md-clipboard" size={25} color='#4d8dd6' style={{ margin: 5 }} /> | |
| <Text numberOfLines={1} ellipsizeMode='tail' style={{ color: "#1567d3", paddingEnd: 10 }}> | |
| <Text style={{ color: "#828282" }}> Description:</Text> {item.description} | |
| </Text> | |
| </View> */} | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center", | |
| flexWrap: "wrap", | |
| paddingEnd: 50, | |
| marginVertical: 10 | |
| }} | |
| > | |
| <Icon | |
| name="md-clipboard" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#828282" }}> Description:</Text> | |
| <Text | |
| numberOfLines={3} | |
| ellipsizeMode="tail" | |
| style={{ width: "100%", color: "#1567d3", left: 40 }} | |
| > | |
| {item.description} | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-calendar" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| <Text style={{ color: "#828282" }}> Date:</Text>{" "} | |
| {item.date} | |
| <Text style={{ color: "#828282" }}> Time:</Text>{" "} | |
| {item.time} | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-cash" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}> Price:</Text>{" "} | |
| {item.Price}$ | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-alert" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}> | |
| {" "} | |
| Status: | |
| </Text>{" "} | |
| {item.statusInfo} | |
| </Text> | |
| </View> | |
| </View> | |
| <TouchableOpacity | |
| style={{ | |
| width: width - 50, | |
| borderRadius: 5, | |
| height: 45, | |
| marginVertical: 10, | |
| alignSelf: "center", | |
| backgroundColor: "#35b5ce", | |
| alignItems: "center", | |
| justifyContent: "center" | |
| }} | |
| onPress={() => | |
| this.props.navigation.navigate("OrderDetails", { | |
| title: item.nameOfProblem, | |
| description: item.description, | |
| date: item.date, | |
| time: item.time, | |
| status: item.statusInfo, | |
| gKey: item.gKey, | |
| price: item.Price, | |
| // location: item.location | |
| region: item.region | |
| }) | |
| } | |
| > | |
| <Text style={{ color: "#fff", fontSize: 18 }}>Open</Text> | |
| </TouchableOpacity> | |
| </View> | |
| </TouchableOpacity> | |
| </ScrollView> | |
| ); | |
| }} | |
| keyExtractor={(item, index) => index.toString()} | |
| /> | |
| </View> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| alignSelf: "center" | |
| }, | |
| listCard: { | |
| flex: 1, | |
| padding: 15, | |
| borderRadius: 5, | |
| width: width - 20, | |
| alignItems: "flex-start", | |
| justifyContent: "flex-start", | |
| backgroundColor: "#eee" | |
| }, | |
| btnContainer: { | |
| width: width - 50, | |
| flexDirection: "row", | |
| justifyContent: "space-around", | |
| margin: 10, | |
| marginBottom: 0 | |
| }, | |
| btnAccept: { | |
| backgroundColor: "#5ed81c", | |
| width: 170, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| borderColor: "#5ed81c", | |
| borderWidth: 1, | |
| margin: 10, | |
| padding: 10 | |
| }, | |
| btnReject: { | |
| width: 100, | |
| justifyContent: "center", | |
| borderColor: "#333", | |
| borderWidth: 1, | |
| margin: 10, | |
| padding: 10, | |
| alignItems: "center" | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| other Tabs "CompletedOrders" | |
| import React, { Component } from "react"; | |
| import { | |
| View, | |
| Text, | |
| StyleSheet, | |
| Dimensions, | |
| FlatList, | |
| ScrollView, | |
| TouchableOpacity | |
| } from "react-native"; | |
| import { SwitchActions } from "react-navigation"; | |
| import firebase from "react-native-firebase"; | |
| import Icon from "react-native-vector-icons/Ionicons"; | |
| const { width } = Dimensions.get("window"); | |
| export default class CompletedOrders extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| currentUser: null | |
| }; | |
| } | |
| componentDidMount() { | |
| const currentUser = firebase.auth().currentUser.uid; | |
| this.setState({ currentUser }); | |
| const Orders = firebase.database().ref(`AcceptedOrders/${currentUser}`); | |
| Orders.on("value", snapshot => { | |
| let orders = []; | |
| snapshot.forEach(childSnapshot => { | |
| if (childSnapshot.val().statusInfo == "Completed") { | |
| orders.push({ | |
| gKey: childSnapshot.key, | |
| id: childSnapshot.val().id, | |
| nameOfProblem: childSnapshot.val().nameOfProblem, | |
| description: childSnapshot.val().description, | |
| date: childSnapshot.val().date, | |
| time: childSnapshot.val().time, | |
| Price: childSnapshot.val().Price, | |
| statusInfo: childSnapshot.val().statusInfo, | |
| region: childSnapshot.val().region | |
| }); | |
| this.setState({ orders }); | |
| } | |
| }); | |
| }); | |
| } | |
| _listEmptyComponent = () => { | |
| return ( | |
| <View style={styles.container}> | |
| <Text style={{ alignSelf: "center" }}> | |
| No Orders Found :( try Later! | |
| </Text> | |
| </View> | |
| ); | |
| }; | |
| render() { | |
| return ( | |
| <View style={styles.container}> | |
| <FlatList | |
| data={this.state.orders} | |
| key={Math.random() * 1000} | |
| contentContainerStyle={{ flexGrow: 1 }} | |
| ListEmptyComponent={this._listEmptyComponent()} | |
| extraData={this.state} | |
| renderItem={({ item }) => { | |
| return ( | |
| <ScrollView scrollEnabled={true} style={{ marginTop: 20 }}> | |
| <TouchableOpacity | |
| onPress={() => | |
| this.props.navigation.navigate("OrderDetails", { | |
| title: item.nameOfProblem, | |
| description: item.description, | |
| date: item.date, | |
| time: item.time, | |
| status: item.statusInfo, | |
| gKey: item.gKey, | |
| price: item.Price, | |
| // location: item.location | |
| region: item.region | |
| }) | |
| } | |
| > | |
| <View style={styles.listCard}> | |
| <View | |
| style={{ | |
| justifyContent: "flex-start", | |
| alignItems: "baseline" | |
| }} | |
| > | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-build" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}>Title:</Text>{" "} | |
| {item.nameOfProblem} | |
| </Text> | |
| </View> | |
| {/* <View style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }}> | |
| <Icon name="md-clipboard" size={25} color='#4d8dd6' style={{ margin: 5 }} /> | |
| <Text numberOfLines={1} ellipsizeMode='tail' style={{ color: "#1567d3", paddingEnd: 10 }}> | |
| <Text style={{ color: "#828282" }}> Description:</Text> {item.description} | |
| </Text> | |
| </View> */} | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center", | |
| flexWrap: "wrap", | |
| paddingEnd: 50, | |
| marginVertical: 10 | |
| }} | |
| > | |
| <Icon | |
| name="md-clipboard" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#828282" }}> Description:</Text> | |
| <Text | |
| numberOfLines={3} | |
| ellipsizeMode="tail" | |
| style={{ width: "100%", color: "#1567d3", left: 40 }} | |
| > | |
| {item.description} | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-calendar" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| <Text style={{ color: "#828282" }}> Date:</Text>{" "} | |
| {item.date} | |
| <Text style={{ color: "#828282" }}> Time:</Text>{" "} | |
| {item.time} | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-cash" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}> Price:</Text>{" "} | |
| {item.Price}$ | |
| </Text> | |
| </View> | |
| <View | |
| style={{ | |
| flexDirection: "row", | |
| alignItems: "center" | |
| }} | |
| > | |
| <Icon | |
| name="ios-alert" | |
| size={25} | |
| color="#4d8dd6" | |
| style={{ margin: 5 }} | |
| /> | |
| <Text style={{ color: "#1567d3" }}> | |
| {" "} | |
| <Text style={{ color: "#828282" }}> | |
| {" "} | |
| Status: | |
| </Text>{" "} | |
| {item.statusInfo} | |
| </Text> | |
| </View> | |
| </View> | |
| <TouchableOpacity | |
| style={{ | |
| width: width - 50, | |
| alignSelf: "center", | |
| borderRadius: 5, | |
| height: 45, | |
| marginVertical: 10, | |
| backgroundColor: "#35b5ce", | |
| alignItems: "center", | |
| justifyContent: "center" | |
| }} | |
| onPress={() => { | |
| this.props.navigation.navigate("OrderDetails", { | |
| title: item.nameOfProblem, | |
| description: item.description, | |
| date: item.date, | |
| time: item.time, | |
| status: item.statusInfo, | |
| gKey: item.gKey, | |
| price: item.Price, | |
| // location: item.location | |
| region: item.region | |
| }); | |
| }} | |
| > | |
| <Text style={{ color: "#fff", fontSize: 18 }}>Open</Text> | |
| </TouchableOpacity> | |
| </View> | |
| </TouchableOpacity> | |
| </ScrollView> | |
| ); | |
| }} | |
| keyExtractor={(item, index) => index.toString()} | |
| /> | |
| </View> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| alignSelf: "center" | |
| }, | |
| listCard: { | |
| flex: 1, | |
| padding: 15, | |
| borderRadius: 5, | |
| width: width - 20, | |
| alignItems: "flex-start", | |
| justifyContent: "flex-start", | |
| backgroundColor: "#eee" | |
| }, | |
| btnContainer: { | |
| width: width - 50, | |
| flexDirection: "row", | |
| justifyContent: "space-around", | |
| margin: 10, | |
| marginBottom: 0 | |
| }, | |
| btnAccept: { | |
| backgroundColor: "#5ed81c", | |
| width: 170, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| borderColor: "#5ed81c", | |
| borderWidth: 1, | |
| margin: 10, | |
| padding: 10 | |
| }, | |
| btnReject: { | |
| width: 100, | |
| justifyContent: "center", | |
| borderColor: "#333", | |
| borderWidth: 1, | |
| margin: 10, | |
| padding: 10, | |
| alignItems: "center" | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment