gMVWtTJ7

1import React from 'react';
2import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
3import { Constants, SQLite } from 'expo';
4
5const db = SQLite.openDatabase('db.db');
6
7class Items extends React.Component {
8  state = {
9    items: null
10  };
11
12  componentDidMount() {
13    this.update();
14  }
15
16  render() {
17    const { done: doneHeading } = this.props;
18    const { items } = this.state;
19    const heading = doneHeading ? 'Completed' : 'Todo';
20
21    if (items === null || items.length === 0) {
22      return null;
23    }
24
25    return (
26      <View style={{ marginBottom: 16, marginHorizontal: 16 }}>
27        <Text style={styles.sectionHeading}>{heading}</Text>
28        {items.map(({ id, done, value }) => (
29          <TouchableOpacity
30            key={id}
31            onPress={() => this.props.onPressItem && this.props.onPressItem(id)}
32            style={{
33              backgroundColor: done ? '#1c9963' : '#fff',
34              borderColor: '#000',
35              borderWidth: 1,
36              padding: 8
37            }}>
38            <Text style={{ color: done ? '#fff' : '#000' }}>{value}</Text>
39          </TouchableOpacity>
40        ))}
41      </View>
42    );
43  }
44
45  update() {
46    db.transaction(tx => {
47      tx.executeSql(
48        'select * from items where done = ?;',
49        [this.props.done ? 1 : 0],
50        (_, { rows: { _array } }) => this.setState({ items: _array })
51      );
52    });
53  }
54}
55
56export default class App extends React.Component {
57  state = {
58    text: null
59  };
60
61  componentDidMount() {
62    db.transaction(tx => {
63      tx.executeSql(
64        'create table if not exists items (id integer primary key not null, done int, value text);'
65      );
66    });
67  }
68
69  render() {
70    return (
71      <View style={styles.container}>
72        <Text style={styles.heading}>SQLite Example</Text>
73        <View style={styles.flexRow}>
74          <TextInput
75            style={styles.input}
76            placeholder="what do you need to do?"
77            value={this.state.text}
78            onChangeText={text => this.setState({ text })}
79            onSubmitEditing={() => {
80              this.add(this.state.text);
81              this.setState({ text: null });
82            }}
83          />
84        </View>
85        <View style={styles.listArea}>
86          <Items
87            done={false}
88            ref={todo => (this.todo = todo)}
89            onPressItem={id =>
90              db.transaction(
91                tx => {
92                  tx.executeSql(`update items set done = 1 where id = ?;`, [id]);
93                },
94                null,
95                this.update
96              )}
97          />
98          <Items
99            done={true}
100            ref={done => (this.done = done)}
101            onPressItem={id =>
102              db.transaction(
103                tx => {
104                  tx.executeSql(`delete from items where id = ?;`, [id]);
105                },
106                null,
107                this.update
108              )}
109          />
110        </View>
111      </View>
112    );
113  }
114
115  add(text) {
116    db.transaction(
117      tx => {
118        tx.executeSql('insert into items (done, value) values (0, ?)', [text]);
119        tx.executeSql('select * from items', [], (_, { rows }) =>
120          console.log(JSON.stringify(rows))
121        );
122      },
123      null,
124      this.update
125    );
126  }
127
128  update = () => {
129    this.todo && this.todo.update();
130    this.done && this.done.update();
131  };
132}
133
134const styles = StyleSheet.create({
135  container: {
136    backgroundColor: '#fff',
137    flex: 1,
138    paddingTop: Constants.statusBarHeight,
139  },
140  heading: {
141    fontSize: 20,
142    fontWeight: 'bold',
143    textAlign: 'center'
144  },
145  flexRow: {
146    flexDirection: 'row'
147  },
148  input: {
149    borderColor: '#4630eb',
150    borderRadius: 4,
151    borderWidth: 1,
152    flex: 1,
153    height: 48,
154    margin: 16,
155    padding: 5
156  },
157  listArea: {
158    backgroundColor: '#f0f0f0',
159    flex: 1,
160    paddingTop: 16
161  },
162  sectionHeading: {
163    fontSize: 18,
164    marginBottom: 8
165  },
166});