Skip to content

Instantly share code, notes, and snippets.

@dereknelson

dereknelson/ViewRequisition.js

Created January 6, 2019 19:44
Show Gist options
  • Save dereknelson/e0a136a9d9327ebb927f91da82544043 to your computer and use it in GitHub Desktop.
Save dereknelson/e0a136a9d9327ebb927f91da82544043 to your computer and use it in GitHub Desktop.
Download ZIP
ViewRequisition help
Raw
ViewRequisition.js
import React, { Component } from 'react';
import { StyleSheet, ListView, AsyncStorage, Alert, FlatList } from "react-native";
import {
Container,
Body,
Content,
Header,
Left,
Right,
List,
ListItem,
Card,
CardItem,
Button,
Text,
Icon,
Title
} from "native-base";
import axios from 'axios'
import Spinner from "react-native-loading-spinner-overlay";
import Constants from "../config";
const datas = [];
const id = id;
var userToken = 'theToken'
export default class ViewRequisition extends Component {
constructor(props) {
super(props);
this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
basic: true,
listViewData: datas,
requisition: id,
spinnerVisible: true
};
}
componentDidMount = async () => {
try {
const value = await AsyncStorage.getItem("api/user");
if (value !== null) {
console.log("token", value);
userToken = JSON.parse(value)
}
} catch (error) {
this.props.navigation.navigate("Login");
Alert.alert("Error", "Your session expired, please login again",
[{ text: "Ok", onPress: () => console.log("OK Pressed") }],
{ cancelable: false }
);
}
try {
const id = 1
const url = `${Constants.urls.root}api/requisition/view/${id}`
const config = {
headers: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
// axios is a library that makes http requests more easily
let response = await axios.get(url, config)
// data is the equivalent of response.json()
const { data } = response
// you can pass multiple keys per setstate
this.setState({ spinnerVisible: false, listViewData: data })
console.log("response:", data);
} catch (e) {
this.setState({ spinnerVisible: false })
Alert.alert("Error", "An error occurred, please ensure you are connected to the internet and try again",
[{ text: "Try Again", onPress: () => console.log("OK Pressed") }],
{ cancelable: false }
);
console.log("caught", e);
}
}
_onDelete = async id => {
// this.setState({ spinnerVisible: true });
try {
const url = Constants.urls.root + "/api/requisition/delete/" + id
const config = { headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + userToken
} }
let response = axios.delete(url, config)
console.log("response:", response);
if (response.status === "success") {
// this.setState({ spinnerVisible: false });
console.log("done", response);
} else {
// this.setState({ spinnerVisible: false });
this.props.navigation.navigate("RequisitionList");
Alert.alert("Error", response.error,
[{ text: "Try Again", onPress: () => console.log("OK Pressed") }],
{ cancelable: false }
);
}
} catch (error) {
// this.setState({ spinnerVisible: false });
this.props.navigation.navigate("RequisitionList");
Alert.alert(
"Error",
"An error occurred, please ensure you are connected to the internet and try again",
[{ text: "Try Again", onPress: () => console.log("OK Pressed") }],
{ cancelable: false }
);
console.log("caught", error);
}
};
deleteRow(secId, rowId, rowMap, serveId) {
rowMap[`${secId}${rowId}`].props.closeRow();
const newData = [...this.state.listViewData];
newData.splice(rowId, 1);
this.setState({ listViewData: newData });
this._onDelete(serveId);
}
render() {
return (
<Container style={styles.container}>
<Header
style={{ backgroundColor: "#37474F" }}
androidStatusBarColor="#263238"
>
<Body style={{ flex: 3 }}>
<Title>Requisition Details</Title>
</Body>
<Right>
<Button
transparent
onPress={() =>
this.props.navigation.navigate("AddRequisitionItem")
}
>
<Icon name="add" />
</Button>
</Right>
</Header>
<Spinner
visible={this.state.spinnerVisible}
textStyle={{ color: "#8bb4c2", fontSize: 16, marginTop: -30 }}
color={"#8bb4c2"}
/>
<Content padder>
{this.state.listViewData.length < 1 ? (
<Text style={{ textAlign: "center", marginTop: 50 }}>
No requisition Item yet
</Text>
) : (
<FlatList
data={this.state.listViewData}
extraData={this.state}
keyExtractor={(item, index) => item.id}
renderItem={(item, index) => (
<ListItem thumbnail style={{ paddingLeft: 20 }}>
{/* <Left>
<Thumbnail source={require("../assets/money.png")} />
</Left> */}
<Body>
<Text>Name: {item.name} </Text>
{item.requisition_items === null ? (
<Text note numberOfLines={6}>
{item.supplier + "\n" + item.unit_cost}
</Text>
) : (
<Text note numberOfLines={6}>
{"Supplier"}: {item.supplier + "\n"}
{"Unit cost"}: {item.unit_cost + "\n"}
{"Quantity"}: {item.quantity + "\n"}
{"Category"}: {item.requisition_item.name + "\n"}
</Text>
)}
</Body>
<Right>
<Button
transparent
onPress={() =>
this.props.navigation.navigate("EditRequisitionItem", {
id: item.id,
itemname: this.props.navigation.getParam("itemname", null),
supplier: this.props.navigation.getParam("supplier",null),
quantity: this.props.navigation.getParam("quantity",null),
unit_cost: this.props.navigation.getParam("unit_cost", null),
requisition_category: this.props.navigation.getParam("requisition_category", null),
requisition_categoryId: this.props.navigation.getParam("requisition_categoryId", null)
})
}
>
<Text>Edit</Text>
</Button>
</Right>
</ListItem>
)}
// not sure how this fits in sorry
/* renderRightHiddenRow={(data, secId, rowId, rowMap) => (
<Button
full
danger
onPress={() => this.deleteRow(secId, rowId, rowMap, data.id)}
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Icon active name="trash" />
</Button>
)} */
leftOpenValue={75}
rightOpenValue={-75}
/>
)}
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#FFF"
},
text: {
alignSelf: "center",
marginBottom: 7
},
mb: {
marginBottom: 15
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment