reactnativefirebase/Form.js at master · dedisetiaji/reactnativefirebase · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react'
import {View,Text,Button,TextInput,FlatList,TouchableNativeFeedback,ToastAndroid} from 'react-native'
import firebase from 'react-native-firebase'

class Form extends React.Component
{
    static navigationOptions = {
        header: null,
    };
    constructor()
    {
        super()
        this.state=
        {
            text:"",
            action:"add",
            id:"",
            data:[]
        }
    }
    componentDidMount()
    {
        itemsRef=firebase.database().ref("Text")
        itemsRef.on('value', (snap) => {
            var items = [];
            snap.forEach((child) => {

              items.push({
                id: child.key,
                text: child.val().text,

              });
            });

            this.setState({data: items });
          });

    }
    _action=()=>{
        let data=
        {
           text:this.state.text,
        }
        if(this.state.action=="add")
        {
            firebase.database().ref('Text').push(data).key;
            ToastAndroid.show('Data is added!', ToastAndroid.SHORT);
        }
        else
        {
            firebase.database().ref('Text/'+this.state.id).update(data)
            ToastAndroid.show('Data is updated!', ToastAndroid.SHORT);
        }
        this.setState({
            text:""
        })

    }
    _edit=(text,id)=>
    {
        this.setState({
            text:text,
            id:id,
            action:"update"
        })
    }
    _hapus=(id)=>
    {
        firebase.database().ref('Text/'+id).remove()
        ToastAndroid.show('A data has been deleted!', ToastAndroid.SHORT);
    }
    render()
    {
        return(<View style={{padding:10}}>
            <Text>FORM CRUD</Text>
            <TextInput
                onChangeText={(text)=>this.setState({text:text})}
                style={{backgroundColor:"#fff",borderColor:"#000",borderWidth:1}}
                placeholder="Masukkan nama barang"
                value={this.state.text}
            />
            <Button
                title="SAVE"
                onPress={this._action}
            />
            <FlatList
                 data={this.state.data}
                 keyExtractor={item=>String(item.id)}
                 renderItem={({item,index})=>
                    <View style={{flexDirection:"row",padding:5}}>
                       <TouchableNativeFeedback
                        onPress={()=>this._edit(item.text,item.id)}
                       >
                            <View style={{flex:4}}>
                                <Text>{index+1} {item.text}</Text>
                            </View>
                        </TouchableNativeFeedback>
                            <View style={{flex:1}}>
                                <Button
                                    title="x"
                                    onPress={()=>this._hapus(item.id)}
                                    color="red"
                                />
                            </View>

                    </View>
                }
            />

        </View>)
    }
}
export default Form