daily pastebin goal
11%
SHARE
TWEET

Untitled

a guest Jul 12th, 2018 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import {  StyleSheet } from 'react-native'
  3. import { NavigationActions } from 'react-navigation'
  4. import {
  5.   Container, Content,
  6.   Text,
  7.   Form,
  8.   Item, Segment,
  9.   Input, Spinner, Thumbnail, Icon, Button,
  10.   Label, H1, ListItem, Radio, Right, Left
  11. } from 'native-base'
  12. import { connect } from 'react-redux'
  13. import axios, { post } from 'axios'
  14. import ImagePicker from 'react-native-image-picker'
  15. import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button'
  16.  
  17. class createKuisioner extends Component {
  18.  
  19.   constructor(){
  20.     super();
  21.     this.state = {
  22.       imageSource: null,
  23.       name: "",
  24.       no_hp: "",
  25.       pendidikan: "",
  26.       q1: "",
  27.       q2: "",
  28.       q3: "",
  29.       q4: "",
  30.       q5: "",
  31.       isValid: false
  32.     }
  33.  
  34.     this.handleRadio = this.handleRadio.bind(this);
  35.   }
  36.  
  37.   handleRadio(value){
  38.     this.setState({q5 : value});
  39.   }
  40.  
  41.   handleSend(e){
  42.     const self = this;
  43.    
  44.     var photo = {
  45.       uri: this.state.imageSource.uri,
  46.       type: 'image/jpeg',
  47.       name: 'photo.jpg',
  48.     };      
  49.  
  50.     var body = new FormData();
  51.     body.append('authToken', 'ut8lsei984oekjjdioure45jli09g80cfd798u4');
  52.     body.append('picture', photo);
  53.     body.append('name', this.state.name);
  54.     body.append('no_hp', this.state.no_hp);
  55.     body.append('pendidikan', this.state.pendidikan);
  56.     body.append('q1', this.state.q1);
  57.     body.append('q2', this.state.q2);
  58.     body.append('q3', this.state.q3);
  59.     body.append('q4', this.state.q4);
  60.     body.append('q5', this.state.q5);
  61.  
  62.     const config = {
  63.       headers: { 'content-type': 'multipart/form-data' }
  64.     }
  65.     const url = 'http://10.0.3.2/kuisionerapi/index.php/kuisioner/post';
  66.     axios.post(url, body, config)
  67.       .then(function(response) {
  68.           // console.log(response);
  69.           alert('Kuisioner anda berhasil dikirim!');
  70.       })
  71.       .catch(function(error) {
  72.           // console.log(error);
  73.           alert('Kuisioner gagal dikirim...');
  74.       });
  75.  
  76.   }
  77.  
  78.  
  79.  
  80.   handleImage(){
  81.     // var ImagePicker = require('react-native-image-picker');
  82.  
  83.     var options = {
  84.       title: 'Pilih Foto',
  85.       storageOptions: {
  86.         skipBackup: true,
  87.         path: 'images'
  88.       }
  89.     };
  90.  
  91.     ImagePicker.showImagePicker(options, (response) => {
  92.       console.log('Response = ', response);
  93.  
  94.       if (response.didCancel) {
  95.         console.log('User cancelled image picker');
  96.       }
  97.       else if(response.error) {
  98.         console.log('ImagePicker Error: ', response.error);
  99.       }
  100.       else {
  101.         let source = { uri:response.uri };
  102.  
  103.         // let source = { uri: 'data:image/jpeg;base64,' + response.data };
  104.  
  105.         this.setState({
  106.           imageSource: source,
  107.         });
  108.  
  109.         // console.log(source);
  110.       }
  111.  
  112.       this._checkIsValid();
  113.     });
  114.   }
  115.  
  116.   _checkIsValid(){
  117.     const self = this;
  118.     setTimeout(()=>{
  119.       const {name, no_hp, pendidikan, q1, q2, q3, q4, q5, imageSource} = self.state;
  120.       if(name != "" && no_hp != "" && pendidikan != "" && q1!="" && q2!="" && q3!="" && q4!="" && q5!=="" && imageSource!=null){
  121.         self.setState({isValid: true});
  122.       }else{
  123.         self.setState({isValid: false});
  124.       }
  125.      
  126.     }, 1000);
  127.  
  128.     console.log(self.state.q5);
  129.    
  130.   }
  131.  
  132.  
  133.  
  134.  
  135.   render() {
  136.     const {isValid} = this.state;
  137.  
  138.     return (
  139.       <Container style={styles.container} >
  140.         <Content>
  141.         <Form>
  142.        
  143.           <ListItem itemDivider>
  144.             <Text>Biodata Anda</Text>
  145.           </ListItem>
  146.  
  147.           <Item stackedLabel>
  148.             <Label>Nama</Label>
  149.             <Input onChangeText={(text)=> {
  150.               this.setState({name: text});
  151.               this._checkIsValid();
  152.             }}/>
  153.           </Item>
  154.  
  155.           <Item stackedLabel>
  156.             <Label>No. Handphone / Whatsapp</Label>
  157.             <Input onChangeText={(text)=> {
  158.               this.setState({no_hp: text});
  159.               this._checkIsValid();
  160.             }}/>
  161.           </Item>
  162.  
  163.           <Item stackedLabel>
  164.             <Label>Pendidikan Terakhir</Label>
  165.             <Input onChangeText={(text)=> {
  166.               this.setState({pendidikan: text});
  167.               this._checkIsValid();
  168.             }}/>
  169.           </Item>
  170.  
  171.           <ListItem>
  172.             <Label>Foto Selfie Anda</Label>
  173.           </ListItem>
  174.  
  175.           <ListItem>
  176.             <Button light onPress={()=> this.handleImage()}>
  177.               <Icon name='image' />
  178.             </Button>
  179.  
  180.             <Thumbnail square
  181.               source={this.state.imageSource} style={{ width: 200, height: 200 }}
  182.             />
  183.           </ListItem>
  184.  
  185.  
  186.  
  187.           <ListItem itemDivider>
  188.             <Text>Jawab Pertanyaan Berikut</Text>
  189.           </ListItem>
  190.  
  191.           <Item stackedLabel>
  192.             <Label>1. Siapa Nama Presiden Indonesia?</Label>
  193.             <Input onChangeText={(text)=> {
  194.               this.setState({q1: text});
  195.               this._checkIsValid();
  196.             }}/>
  197.           </Item>
  198.  
  199.           <Item stackedLabel>
  200.             <Label>2. Siapa Nama Gubernur Kalimantan Selatan?</Label>
  201.             <Input onChangeText={(text)=> {
  202.               this.setState({q2: text});
  203.               this._checkIsValid();
  204.             }}/>
  205.           </Item>
  206.  
  207.           <Item stackedLabel>
  208.             <Label>3. Siapa Nama Bupati Kabupaten Banjar?</Label>
  209.             <Input onChangeText={(text)=> {
  210.               this.setState({q3: text});
  211.               this._checkIsValid();
  212.             }}/>
  213.           </Item>
  214.  
  215.           <Item stackedLabel>
  216.             <Label>4. Siapa Nama Kepala Dinas Kominfo Kab. Banjar?</Label>
  217.             <Input onChangeText={(text)=> {
  218.               this.setState({q4: text});
  219.               this._checkIsValid();
  220.             }}/>
  221.           </Item>
  222.  
  223.           <ListItem>
  224.             <Label>5. Apakah anda setuju radikalisme dan hoax?</Label>  
  225.           </ListItem>
  226.  
  227.           <ListItem
  228.             onPress={() => {
  229.               // this.setState({ q5: 1 });
  230.               this.handleRadio(1);
  231.               this.handleRadio(1);
  232.               this._checkIsValid();
  233.             }}
  234.           >
  235.             <Left>
  236.               <Text>Setuju</Text>
  237.             </Left>
  238.             <Right>
  239.               <Radio selected={this.state.q5 === 1 }/>
  240.             </Right>
  241.           </ListItem>
  242.  
  243.           <ListItem
  244.             onPress={() => {
  245.               // this.setState({ q5: 0 });  
  246.               this.handleRadio(0);
  247.               this.handleRadio(0);            
  248.               this._checkIsValid();
  249.             }}
  250.           >
  251.             <Left>
  252.               <Text>Tidak Setuju</Text>
  253.             </Left>
  254.             <Right>
  255.               <Radio selected={this.state.q5 === 0 }/>
  256.             </Right>
  257.           </ListItem>
  258.  
  259.  
  260.          
  261.  
  262.           {
  263.             isValid?
  264.             (
  265.               <Button block info onPress={()=> this.handleSend()}>
  266.                 <Text>Kirim</Text>
  267.               </Button>
  268.             ):
  269.             (
  270.               <Button block light>
  271.                 <Text style={{color: '#D0D0D0'}}>Kirim</Text>
  272.               </Button>
  273.             )
  274.           }
  275.  
  276.         </Form>
  277.         </Content>
  278.       </Container>
  279.     )
  280.   }
  281. }
  282.  
  283. export default connect()(createKuisioner);
  284.  
  285. const styles = StyleSheet.create({
  286.   container: {
  287.     flex: 1,
  288.     backgroundColor: '#ffffff'
  289.   }
  290. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top