<file_sep>import React, {Component} from 'react';
import {AsyncStorage, View} from 'react-native';
import {Button} from 'react-native-elements';
import styles from './styles'
export default class Logout extends Component {
  constructor(props) {
    super(props);
    this.logoutHandler = this.logoutHandler.bind(this);
  }


  renderButton(){
    if (this.props.needLogout) {
      return (<Button
        onPress={this.logoutHandler}
        title="Log Out"
        color="#841584"
        accessibilityLabel="Log out"
      />)
    }
  }
  logoutHandler() {
    if (this.props.needLogout) {
      AsyncStorage.removeItem('qrid', (err, res) => {
        if (!err) {
          console.log('no more id');
          this.props.navigation.navigate('Home')
        }
      })
    }
  }
  render() {
    return (
      <View style={styles.buttonContainer}>
        {this.renderButton()}
      </View>
    )

  }
}
<file_sep>import React, {Component} from 'react';
import {View, AsyncStorage, Image} from 'react-native';
import {Text, Card, Input, Button} from 'react-native-elements';
import NfcManager, {Ndef, NfcTech, ByteParser} from 'react-native-nfc-manager';
import Icon from 'react-native-vector-icons/FontAwesome';

import styles from './styles';
export default class Registration extends Component {
  constructor(props) {
    super(props);
    this.clickHandler = this.clickHandler.bind(this)
    this.renderConfirmation = this.renderConfirmation.bind(this)
    this.fillUsername = this.fillUsername.bind(this)
    this.state = {
      fillName: true,
      scannedID: '',
      name: ''
    }
  }
  clickHandler() {
    this.setState({fillName: false})
  }
  componentDidMount(){
    NfcManager.isSupported()
    .then(supported => {
      console.log('test' + supported)
      if (supported) {
        NfcManager.start()
        .then(result => {
          console.log('start OK', result);
        })
        .catch(error => {
          console.warn('device does not support nfc!');
        })
      }
    });
    NfcManager.registerTagEvent(tag => {
      console.log('Tag Discovered');
      //console.log(tag.id)
      if (tag.id) {
        this.setState({scannedID: tag.id})
        let user = { name: this.state.name, nfcid: this.state.scannedID}
        user = JSON.stringify(user)
        AsyncStorage.setItem('user', user, (err, res) => {
          if (err) {
            console.log(err)
          } else {
            console.log(user)
            AsyncStorage.removeItem('qrid', (err, res) => {
              if (err) {
                console.log(err)
              } else {
                setTimeout(() => this.props.navigation.navigate('Home'), 1000)
              }
            })
          }
        })
      } else {
        this.setState({scannedID: 'No ID Detected'})
      }
    });
  }

  componentWillUnmount() {
    NfcManager.unregisterTagEvent();
    NfcManager.stop();
  }
  renderConfirmation() {

    if (this.state.scannedID.length > 0) {
      return (
        <Card
          title='Successfully Registered Card'
          image={{uri: 'https://thumbs.gfycat.com/ShyCautiousAfricanpiedkingfisher-max-1mb.gif'}}
          imageProps={{resizeMode: 'contain'}}>

        </Card>
      )
    } else {
      return <View />
    }
  }

  fillUsername() {
    if (this.state.fillName) {
      return (
        <View style={styles.container}>
        <Input
        placeholder='Username'
        leftIcon={{ type: 'font-awesome', name: 'user-circle' }}
        style={styles.input}
        onChangeText={(name) => this.setState({name})}
        value={this.state.name}
        />
        <Button
          color="#ff300"
          accessibilityLabel="Submit"
          icon={
            <Icon
              name='arrow-right'
              size={15}
              color='white'
            />
          }
          title='Submit'
          onPress={this.clickHandler}
          buttonStyle = {styles.button}
          containerStyle = {styles.buttonContainer}
        />

        </View>
      )
    } else {
      return (
        <View>
          <Card>
          <Text h4 style={styles.text}>Place your bank card on your phone</Text>
          {this.renderConfirmation()}
          </Card>
        </View>
      )
    }
  }
  render(){
    return (
      <View>
        {this.fillUsername()}
      </View>
    )
  }
}
<file_sep>import React, {Component} from 'react';
import {View, AsyncStorage} from 'react-native';
import {Card, Button, Header, Icon, Text, ListItem} from 'react-native-elements';
import NFCHandler from '../components/NFCHandler';
import Logout from '../components/Logout';
import Modal from "react-native-modal";
import styles from './styles';

export default class NFCScreen extends Component {
  constructor(props) {
    super(props);
    this.hideModal = this.hideModal.bind(this);
    this.state = {hasId: false, id: '', user: '', transaction: '', modal: false}
  }
  componentDidMount() {
    AsyncStorage.multiGet(['user','qrid'], (err, res) => {
      if (err) {
        console.log('error'+ err)
      };
      if (res) {
        console.log(res)
        let user = res[0]
        user = user[1]
        user = JSON.parse(user)
        let qrid = res[1];
        qrid = qrid[1]

        console.log('User: ' + user.name + 'Qrid: ' + qrid)
        if (qrid){
          this.setState({hasId: true, id: qrid})
        }
        if (user){
          this.setState({user: user.name})
        }
      }
    })
    this.timer = setInterval(()=> this.poll(), 2000);

  }

poll() {
  if (this.state.user.length > 0) {
    const url = 'https://finul-api.herokuapp.com/auth_poll/' + this.state.user;
    fetch(url)
    .then((response) => response.json())
    .then((res) => {

      if (res) {
        console.log(res.transaction)
        if (res.transaction !== null) {
          console.log('Result: ' + res.transaction)
          clearInterval(this.timer)
          this.setState({transaction: res.transaction})
          if (typeof this.state.transaction === 'object') {
            this.setState({modal: true})
          }
        }
      }
    }).catch(err => console.log(err))
  }

}
componentWillUnmount() {
  clearInterval(this.timer)
  this.timer = null; // here...
}

hideModal(){
  this.setState({modal: false})
  this.timer = setInterval(()=> this.poll(), 2000);
  const url = `https://finul-api.herokuapp.com/reject_transaction/${this.state.user}`
  fetch(url).then((response) => response.json())
  .then((res) => {
    console.log("Forget everything")
  })
}

  render() {
    const {navigation} = this.props
    console.log('trans at render' + this.state.transaction)
    const {amount, date, receiver_id, time, description} = this.state.transaction;
    const list = [
      {name: 'Amount', val:amount},
      {name: 'Received On', val:`${date}, on ${time}`},
      {name: 'Given To', val: receiver_id},
      {name: 'Notes', val: description}
    ]
    return (
      <View>
        <Header containerStyle={styles.headerContainer} centerComponent={{ text: 'Verification', style: styles.header }} />

        <NFCHandler navigation={navigation}/>
        <Modal isVisible={this.state.modal}>
          <View>
          <Card
            title='Incoming Transaction'
          >
          {
            list.map((l, i) => (
              <ListItem
                key={i}
                title={l.name}
                subtitle={l.val}
                titleStyle={{ fontWeight: 'bold' }}

              />
            ))
          }
            <Text >You can tap your bank card on this phone to continue, or reject the transaction by pressing the button below</Text>
            <Button
              icon={<Icon name='code' color='#fff' />}
              backgroundColor='#5c1010'
              buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
              onPress={this.hideModal}
              title='REJECT THE TRANSACTION' />
            </Card>

          </View>

        </Modal>
        <Logout needLogout={this.state.hasId} navigation={navigation}/>
      </View>
    )
  }
}
<file_sep>import React, {Component} from 'react';
import {View, AsyncStorage, Button} from 'react-native';
import { Text, Card } from 'react-native-elements';
import NfcManager, {Ndef, NfcTech, ByteParser} from 'react-native-nfc-manager';

import styles from './styles';
export default class NFCHandler extends Component {
  constructor(props) {
    super(props);
    this.state = {
      NFCSupported: false,
      scannedNFC: false,
      scannedID: '',
      name: '',
      nfcid: '',
      msg: ''
    }
  }

  renderConfirmation() {
    if (this.state.scannedNFC) {
      if (this.state.msg === 'NFC Detected, redirecting...') {
        return (
          <View>
          <Card
            title='Scan Successful!'
            image={{uri: 'https://thumbs.gfycat.com/ShyCautiousAfricanpiedkingfisher-max-1mb.gif'}}
            imageProps={{resizeMode: 'contain'}}>

          </Card>
          </View>
        )
      } else {
        return (
          <View>
          <Card
            title='Try Again!'
            image={{uri: 'https://i.4pcdn.org/pol/1495138675713.gif'}}
            imageProps={{resizeMode: 'contain'}}>

          </Card>
          </View>
        )

      }


    }

    if (this.state.NFCSupported) {
      return (
        <Text style={styles.text}> NFC is supported </Text>
      )
    }
  }

  componentDidMount(){
    AsyncStorage.getItem('user', (err, res) => {
      if (err) {
        console.log(err)
      }
      if (res) {
        let info = JSON.parse(res);
        this.setState({name: info.name, nfcid: info.nfcid})
        console.log(this.state.nfcid)
      }
    })

    NfcManager.isSupported()
    .then(supported => {
      console.log('test' + supported)
      if (supported) {
        this.setState({NFCSupported: true});
        NfcManager.start()
        .then(result => {
          console.log('start OK', result);
        })
        .catch(error => {
          console.warn('device does not support nfc!');
          this.setState({supported: false});
        })
      }
    });
    console.log('testing tag')
    NfcManager.registerTagEvent(tag => {
      console.log('Tag Discovered');
      this.setState({scannedNFC: true})
      //console.log(tag.id)
      if (tag.id) {
        console.log(tag.id)
        if (this.state.nfcid !== tag.id) {
          this.setState({msg: 'Your card did not match our records, refreshing...'});
          setTimeout(() => {
            this.props.navigation.navigate('Home')
          }, 3000)
        } else {
          this.setState({scannedID: tag.id, msg: 'NFC Detected, redirecting...'})

          setTimeout(() => {
            this.props.navigation.navigate('Otp')
          }, 2000)
        }

      } else {
        this.setState({scannedID: 'No ID Detected'})
      }
    });

  }

  componentWillUnmount() {
    NfcManager.unregisterTagEvent();
    NfcManager.stop();
    this.setState({scannedNFC: false})


  }

  render(){
    return (
      <View style={styles.container}>
        <Card>
        <Text h2 style={styles.text}>Place your bank card on your phone</Text>
        {this.renderConfirmation()}
        </Card>

      </View>
    )
  }
}
<file_sep>import React, {Component} from 'react';
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
    margin:10,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 30,
    marginTop: 'auto'
  },
  button: {
    backgroundColor: '#940000',
    width: 250,
    height: 40,
    borderRadius: 2,
  },
  buttonContainer: {
    height:100,
    alignItems: 'center',
    padding: 30,
    marginTop: 90

  }

})

export default styles;
<file_sep># inu_mobile

#### Mobile app for CIMB App challenge
<file_sep>import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    marginBottom: 25,
    fontSize: 30,
    fontWeight: 'bold',
    alignItems: 'stretch',
    color: '#fff',
  },
  headerContainer: {
    backgroundColor: '#c30101',
  }
})

export default styles;
