SHARE
TWEET

Untitled

a guest Oct 10th, 2019 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import axios from 'axios';
  3. import { View, TextInput, Text, Button, StyleSheet, ScrollView } from 'react-native';
  4. import { Table, Row, Rows } from 'react-native-table-component';
  5.  
  6. export default class Contact extends Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       tableHead: ['ID', 'Name', 'Email', 'No', 'Address'],
  11.       tableData: [
  12.         // ['1', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
  13.         // ['2', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
  14.         // ['3', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
  15.         // ['4', 'Joko', 'joko@gmail.com', '0812484548', 'Tangerang'],
  16.       ]
  17.     }
  18.   }
  19.  
  20.   // Add
  21.   handleSubmit() {
  22.     axios({
  23.       method: 'post',
  24.       url: 'http://192.168.1.24/training1/public/api/contacts',
  25.       data: {
  26.         TextInputName: '',
  27.         TextInputEmail: '',
  28.         TextInputNo: '',
  29.         TextInputAddress: '',
  30.       }
  31.     })
  32.       .then(function (response) {
  33.         console.log(response.data)
  34.       })
  35.       .catch(function (error) {
  36.         console.log(error);
  37.       });
  38.     //  alert('success')
  39.   }
  40.  
  41.   // Index
  42.   componentDidMount() {
  43.     axios({
  44.       method: 'get',
  45.       url: 'http://192.168.1.24/training1/public/api/contacts',
  46.       dataType: 'json',
  47.       headers: {
  48.         'Accept': 'application/json',
  49.         'Content-Type': 'application/json'
  50.       }
  51.     })
  52.       .then(function (response) {
  53.         console.log(response.data)
  54.         const contacts = response.data.result.contacts;
  55.         this.setState({ contacts });
  56.         // console.log(contacts)
  57.       })
  58.       .catch(function (error) {
  59.         console.log(error);
  60.       });
  61.  
  62.   }
  63.  
  64.  
  65.   // constructor(props) {
  66.   //   super(props)
  67.   //   this.state = {
  68.   //     TextInputName: '',
  69.   //     TextInputEmail: '',
  70.   //     TextInputNo: '',
  71.   //     TextInputAddress: '',
  72.   //   }
  73.   // }
  74.  
  75.   // InsertContacts = () => {
  76.   //   const {TextInputName} = this.state;
  77.   //   const {TextInputEmail} = this.state;
  78.   //   const {TextInputNo} = this.state;
  79.   //   const {TextInputAddress} = this.state;
  80.   // }
  81.  
  82.   render() {
  83.     const state = this.state;
  84.     return (
  85.       <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
  86.          <View style={{ backgroundColor: '#00a1dd', height: 45, alignItems: 'center', justifyContent: 'center' }}>
  87.             <Text style={{ color: '#fff', fontWeight: 'bold' }}>Contact</Text>
  88.           </View>
  89.         <View style={{ alignItems: 'center' }} >
  90.           <Text style={styles.title}>Send Message</Text>
  91.         </View>
  92.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  93.           <TextInput placeholder="Your Name" onChangeText={TextInputValue => this.setState({ TextInputName: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
  94.         </View>
  95.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  96.           <TextInput placeholder="Your Email" onChangeText={TextInputValue => this.setState({ TextInputEmail: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
  97.         </View>
  98.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  99.           <TextInput placeholder="Your No" onChangeText={TextInputValue => this.setState({ TextInputNo: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
  100.         </View>
  101.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  102.           <TextInput placeholder="Your Address" onChangeText={TextInputValue => this.setState({ TextInputAddress: TextInputValue })} style={{ borderWidth: 1, borderColor: '#E8E8E8', borderRadius: 25, height: 40, fontSize: 13, paddingLeft: 45, paddingRight: 20, backgroundColor: 'white' }} />
  103.         </View>
  104.         <View style={{ alignItems: 'center' }} >
  105.           <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  106.             <Button title="Send Message" onPress={this.handleSubmit} />
  107.           </View>
  108.         </View>
  109.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  110.           </View>
  111.         <View style={{ marginHorizontal: 17, paddingTop: 15, }}>
  112.           <View style={{ alignItems: 'center' }} >
  113.             <Text style={styles.title}>Data Contact</Text>
  114.           </View>
  115.           <ScrollView style={styles.dataWrapper}>
  116.           <Table borderStyle={{ borderWidth: 1, borderColor: '#778899' }}>
  117.             <Row data={state.tableHead} style={styles.head} textStyle={styles.text} />
  118.             <Rows data={state.tableData} style={styles.data} textStyle={styles.text} />
  119.           </Table>
  120.           </ScrollView>
  121.         </View>
  122.       </View>
  123.  
  124.     );
  125.   }
  126. }
  127.  
  128. const styles = StyleSheet.create({
  129.   container: { flex: 1, padding: 10, paddingTop: 20, backgroundColor: '#fff' },
  130.   head: { height: 25, backgroundColor: '#fff' },
  131.   data: { backgroundColor: '#fff' },
  132.   text: { margin: 6, },
  133.   texthead: { textAlign: 'center' }
  134.  
  135. });
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top