dereknelson/ViewRequisition.js

## 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
  }
});
	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
	}
	});