Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Simple_Database/App.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
170 lines (156 sloc)
4.38 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
import { Text, View, StyleSheet, TextInput, Button, TouchableOpacity, ScrollView, Keyboard, Alert } from 'react-native'; | |
import * as SQLite from 'expo-sqlite'; | |
export default function App() { | |
const myDB = SQLite.openDatabase('myproducts.db'); | |
const [char, setChar] = useState(''); | |
const [frequency, setFrequency] = useState(''); | |
const [records, setRecords] = useState([]); | |
useEffect(() => { | |
init(); | |
fetchRecords(); | |
}, []); //eslint-disable-line | |
const deleteR = (which) => { | |
myDB.transaction((tx) => { | |
tx.executeSql( | |
'DELETE FROM products WHERE p_id=?', | |
[which], | |
(_, result) => { | |
if (result.rowsAffected > 0) { | |
fetchRecords(); | |
Alert.alert('Success', 'Record deleted from the database.'); | |
} else { | |
Alert.alert('Error', 'Failed to delete record from the database.'); | |
} | |
}, | |
(_, error) => { | |
console.error(error); | |
Alert.alert('Error', 'Failed to delete record from the database.'); | |
} | |
); | |
}); | |
}; | |
const init = () => { | |
myDB.transaction((tx) => { | |
tx.executeSql( | |
'CREATE TABLE IF NOT EXISTS products (p_id INTEGER PRIMARY KEY NOT NULL, p_title TEXT, p_description TEXT, p_inventory INTEGER, p_image TEXT);' | |
); | |
}); | |
console.log('Database table created'); | |
}; | |
const fetchRecords = () => { | |
myDB.transaction((tx) => { | |
tx.executeSql( | |
'SELECT * FROM products ORDER BY p_id DESC', | |
[], | |
(_, { rows }) => { | |
setRecords(rows._array); | |
}, | |
(_, error) => { | |
console.error(error); | |
} | |
); | |
}); | |
}; | |
const insert = () => { | |
if (!char || !frequency) { | |
Alert.alert('Missing Information', 'Please enter both character(s) and frequency.'); | |
return; | |
} | |
const parsedFrequency = parseInt(frequency); | |
if (isNaN(parsedFrequency)) { | |
Alert.alert('Invalid Frequency', 'Please enter a valid integer number for frequency.'); | |
return; | |
} | |
const outcome = char.repeat(parsedFrequency); // Compute the outcome | |
myDB.transaction((tx) => { | |
tx.executeSql( | |
'INSERT INTO products (p_title, p_description, p_inventory, p_image) VALUES (?, ?, ?, ?)', | |
[char, frequency, outcome, ''] // Insert the outcome instead of parsedFrequency | |
); | |
}); | |
Keyboard.dismiss(); | |
setChar(''); | |
setFrequency(''); | |
fetchRecords(); | |
Alert.alert('Success', 'Record added to the database.'); | |
}; | |
return ( | |
<View style={styles.container}> | |
<View style={styles.itemlist}> | |
<Text style={styles.itemheading}>Character(s):</Text> | |
<TextInput | |
style={styles.textinput} | |
onChangeText={(item) => setChar(item)} | |
value={char} | |
/> | |
</View> | |
<View style={styles.itemlist}> | |
<Text style={styles.itemheading}>Frequency:</Text> | |
<TextInput | |
style={styles.textinput} | |
onChangeText={(item) => setFrequency(item)} | |
value={frequency} | |
keyboardType="numeric" | |
/> | |
</View> | |
<View style={styles.button}> | |
<Button title="Add to Database" onPress={insert} /> | |
</View> | |
<ScrollView style={styles.recordsContainer}> | |
{records.map((record) => ( | |
<View key={record.p_id} style={styles.recordItem}> | |
<TouchableOpacity onPress={() => deleteR(record.p_id)}> | |
<Text>Character(s): {record.p_title}</Text> | |
<Text>Frequency: {record.p_description}</Text> | |
<Text>Outcome: {record.p_inventory}</Text> | |
</TouchableOpacity> | |
</View> | |
))} | |
</ScrollView> | |
</View> | |
); | |
}; | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
marginTop: 65, | |
alignItems: 'center', | |
backgroundColor: 'green', | |
paddingHorizontal: 20, | |
}, | |
itemlist: { | |
flexDirection: 'row', | |
alignItems: 'center', | |
marginBottom: 10, | |
}, | |
itemheading: { | |
fontSize: 16, | |
fontWeight: 'bold', | |
color: 'cyan', | |
marginLeft: 10, | |
marginBottom: 5, | |
width: 150, | |
marginTop: 10, | |
}, | |
textinput: { | |
flex: 1, | |
borderBottomWidth: 2, | |
borderBottomColor: 'black', | |
marginTop: 10, | |
}, | |
button: { | |
width: '100%', | |
marginTop: 20, | |
backgroundColor: 'purple' | |
}, | |
recordsContainer: { | |
flex: 1, | |
marginTop: 20, | |
}, | |
recordItem: { | |
backgroundColor: '#eee', | |
padding: 10, | |
marginBottom: 10, | |
}, | |
}); |