import React from ‘react’;
import {
Text,
View,
TouchableOpacity,
TextInput,
Image,
StyleSheet,
} from ‘react-native’;
import * as Permissions from ‘expo-permissions’;
import { Camera } from ‘expo-camera’;
import { BarCodeScanner } from ‘expo-barcode-scanner’;
import firebase from ‘firebase’;
import db from ‘…/config’;
export default class BookTransactions extends React.Component {
constructor() {
super();
this.state = {
hasCameraPermissions: null,
scanned: false,
scannedBookId: ‘’,
scannedStudentId: ‘’,
buttonState: ‘normal’,
};
}
getCameraPermissions = async (id) => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
// const {status} = await Camera.requestPermissionsAsync(Permissions.CAMERA)
this.setState({
hasCameraPermissions: status === ‘granted’,
buttonState: id,
scanned: false,
});
};
handleBarCodeScanned = async ({ data }) => {
// const {buttonState} = this.state
if (this.state.buttonState === 'BookId') {
this.setState({
scanned: true,
scannedBookId: data,
buttonState: 'normal',
});
} else if (this.state.buttonState === 'StudentId') {
this.setState({
scanned: true,
scannedStudentId: data,
buttonState: 'normal',
});
}
};
handleTransaction = async()=>{
var transactionMessage = null;
db.collection(“books”).doc(this.state.scannedBookId).get()
.then((doc)=>{
var book = doc.data()
if(book.bookAvailability){
this.initiateBookIssue();
transactionMessage = “Book Issued”
}
else{
this.initiateBookReturn();
transactionMessage = “Book Returned”
}
})
this.setState({
transactionMessage : transactionMessage
})
}
render() {
const hasCameraPermissions = this.state.hasCameraPermissions;
const scanned = this.state.scanned;
const buttonState = this.state.buttonState;
if (buttonState !== 'normal' && hasCameraPermissions) {
return (
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
/>
);
} else if (buttonState === 'normal') {
return (
<View style={styles.container}>
<View>
<Image
source={require('../assets/book.png')}
style={{ width: 100, height: 100 }}
/>
<Text style={{ textAlign: 'center', fontSize: 30 }}>Wily</Text>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.inputBox}
placeholder="Book Id"
value={this.state.scannedBookId}
/>
<TouchableOpacity
style={styles.scanButton}
onPress={() => {
this.getCameraPermissions('BookId');
}}>
<Text style={styles.buttonText}>Scan</Text>
</TouchableOpacity>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.inputBox}
placeholder="Student Id"
value={this.state.scannedStudentId}
/>
<TouchableOpacity
style={styles.scanButton}
onPress={() => {
this.getCameraPermissions('StudentId');
}}>
<Text style={styles.buttonText}>Scan</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.scanButton}
onPress={this.handleTransaction()}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
displayText: {
fontSize: 15,
textDecorationLine: ‘underline’,
},
scanButton: {
backgroundColor: ‘#2196F3’,
padding: 10,
margin: 10,
},
buttonText: {
fontSize: 15,
textAlign: ‘center’,
marginTop: 10,
},
inputView: {
flexDirection: ‘row’,
margin: 20,
},
inputBox: {
width: 200,
height: 40,
borderWidth: 1.5,
borderRightWidth: 0,
fontSize: 20,
},
scanButton: {
backgroundColor: ‘#66BB6A’,
width: 50,
borderWidth: 1.5,
borderLeftWidth: 0,
},
});