Skip to content
Snippets Groups Projects
Commit ae0cdd41 authored by johngitt's avatar johngitt
Browse files

Added database funcionality

parent 08894a6a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/createGroup.js
+ 97
− 3
View file @ ae0cdd41
import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme } from "react-native";
import React, { useEffect, useState} from 'react';
import { Alert, Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme, ActivityIndicator, Dimensions , TextInput} from "react-native";
import { Link } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing } from 'react-native-reanimated';
import db from './database';
export default function createGroup() {
const colorScheme = useColorScheme();
const [groupname, setGroupname] = useState("");
const [prize, setPrize] = useState("");
const [username1, setUsername1] = useState("");
const [username2, setUsername2] = useState("");
//const [leaderid, setLeaderid] = useState(0);
const [items, setItems] = useState([])
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
useEffect(() => {
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS groups (id INTEGER PRIMARY KEY NOT NULL, groupname TEXT, prize TEXT, username1 TEXT, username2 TEXT);');
});
}, []);
const insertItem = (groupname,prize,username1, username2) => {
db.transaction(tx => {
tx.executeSql('INSERT INTO groups (groupname,prize, username1, username2) VALUES (?, ?, ?, ?);', [groupname,prize, username1, username2]);
});
setUsername1("");
setUsername2("");
setGroupname("");
setPrize("");
//setLeaderid("");
};
const fetchItems = () => {
db.transaction(tx => {
tx.executeSql('SELECT * FROM groups;', [], (_, { rows }) => {
console.log(rows._array);
setItems(rows._array);
});
});
};
return (
<SafeAreaProvider>
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>This is create group page</Text>
<Text style={[styles.text, themeTextStyle]}>Please fill in the blanks and press insert to create a group!</Text>
<StatusBar style="auto" />
<TextInput
style={styles.input}
value={groupname}
autoCapitalize='none'
onChangeText={text => setGroupname(text)}
placeholder="Enter Group Name"
/>
<TextInput
style={styles.input}
value={username1}
autoCapitalize='none'
onChangeText={text => setUsername1(text)}
placeholder="Enter Username 1"
/>
<TextInput
style={styles.input}
value={username2}
autoCapitalize = 'words'
onChangeText={text => setUsername2(text)}
placeholder="Enter Username 2"
/>
<TextInput
style={styles.input}
value={prize}
autoCapitalize = 'words'
onChangeText={text => setPrize(text)}
placeholder="Enter Prize"
/>
<Button title="Insert Test Item" onPress={() => insertItem(groupname, prize, username1, username2)} />
</View>
</SafeAreaProvider>
);
......@@ -28,6 +113,15 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
input: {
height: 40,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
marginTop: 10,
padding: 10,
},
lightContainer: {
// white
backgroundColor: '#FFFFFF',
......
app/createUser.js
+ 86
− 9
View file @ ae0cdd41
import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme } from "react-native";
import React, { useEffect, useState} from 'react';
import { Alert, Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme, ActivityIndicator, Dimensions , TextInput} from "react-native";
import { Link } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing } from 'react-native-reanimated';
import db from './database';
export default function Page() {
const colorScheme = useColorScheme();
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [fullname, setFullname] = useState("");
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
useEffect(() => {
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY NOT NULL, username TEXT, password TEXT, fullname TEXT);');
});
}, []);
const insertItem = (username,password,fullname) => {
db.transaction(tx => {
tx.executeSql('INSERT INTO users (username,password,fullname) VALUES (?, ?, ?);', [username, password, fullname]);
});
setUsername("");
setPassword("");
setFullname("");
};
const fetchItems = () => {
db.transaction(tx => {
tx.executeSql('SELECT * FROM users;', [], (_, { rows }) => {
console.log(rows._array);
setItems(rows._array);
});
});
};
return (
<SafeAreaProvider>
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>This is create user page</Text>
<Text style={[styles.text, themeTextStyle]}>This is User Creation Page</Text>
<Link href="/profile" asChild>
</Link>
<TextInput
style={styles.input}
value={username}
autoCapitalize='none'
onChangeText={text => setUsername(text)}
placeholder="Enter username"
/>
<TextInput
style={styles.input}
value={password}
autoCapitalize='none'
onChangeText={text => setPassword(text)}
placeholder="Enter password"
/>
<TextInput
style={styles.input}
value={fullname}
autoCapitalize = 'words'
onChangeText={text => setFullname(text)}
placeholder="Enter fullName"
/>
<Button title="Insert Test Item" onPress={() => insertItem(username,password,fullname)} />
<Button title="Fetch Items" onPress={fetchItems} />
{items.map((item, index) => (
<Text key={index} style={[styles.text, themeTextStyle]}>Username : {item.username} password: {item.password} FullName: {item.fullname}</Text>
))}
<StatusBar style="auto" />
</View>
</SafeAreaProvider>
......@@ -29,19 +101,24 @@ const styles = StyleSheet.create({
justifyContent: 'center',
},
lightContainer: {
// white
backgroundColor: '#FFFFFF',
},
input: {
height: 40,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
marginTop: 10,
padding: 10,
},
darkContainer: {
// black
backgroundColor: '#000000',
},
lightThemeText: {
// white
color: '#000000',
},
darkThemeText: {
// black
color: '#FFFFFF',
},
box: {
......
app/database.js 0 → 100644
+ 6
− 0
View file @ ae0cdd41
import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase('mydb1.db');
export default db;
\ No newline at end of file
app/index.js
+ 56
− 33
View file @ ae0cdd41
......@@ -4,19 +4,20 @@ import { Link } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing } from 'react-native-reanimated';
import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase('mydb1.db');
import db from './database';
export default function Page() {
const colorScheme = useColorScheme();
const [loggedIn, setLoggedIn] = useState(0);
const [incorrect, setIncorrect] = useState("")
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [fullname, setFullname] = useState("");
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
......@@ -25,39 +26,48 @@ export default function Page() {
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY NOT NULL, username TEXT, password TEXT, fullname TEXT);');
});
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY NOT NULL, username TEXT, password TEXT, fullname TEXT);');
});
}, []);
const insertItem = (username,password,fullname) => {
const verifyUser = (username,password) => {
db.transaction(tx => {
tx.executeSql('INSERT INTO items (username,password,fullname) VALUES (?, ?, ?);', [username, password, fullname]);
tx.executeSql('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (_, { rows }) => {
if(rows._array.length === 0){
setIncorrect("Incorrect Username or Password, Please Try Again");
console.log("incorrect");
}
else {
//initiate session somehow
console.log(rows._array);
console.log("correct");
setLoggedIn(1);
}
});
});
setUsername("");
setPassword("");
setFullname("");
setUsername("");
setPassword("");
};
const fetchItems = () => {
db.transaction(tx => {
tx.executeSql('SELECT * FROM items;', [], (_, { rows }) => {
tx.executeSql('SELECT * FROM users;', [], (_, { rows }) => {
console.log(rows._array);
setItems(rows._array);
});
});
};
return (
<SafeAreaProvider>
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>This is index page</Text>
<Link href="/profile" asChild>
<Pressable>
<Text style={[styles.text, themeTextStyle]}>Press this to go to the profile page</Text>
</Pressable>
</Link>
<Text style={[styles.text, themeTextStyle]}>Log into your account</Text>
<TextInput
style={styles.input}
value={username}
......@@ -72,24 +82,37 @@ export default function Page() {
onChangeText={text => setPassword(text)}
placeholder="Enter password"
/>
<TextInput
style={styles.input}
value={fullname}
autoCapitalize = 'words'
onChangeText={text => setFullname(text)}
placeholder="Enter fullName"
/>
<Button title="Insert Test Item" onPress={() => insertItem(username,password,fullname)} />
<Text style={[styles.text, themeTextStyle]}>{incorrect}</Text>
<Button title="Login" onPress={() => verifyUser(username,password)} />
<Button title="Fetch Items" onPress={fetchItems} />
<Link href="/profile" />
{items.map((item, index) => (
<Text key={index} style={[styles.text, themeTextStyle]}>Username : {item.username} password: {item.password} FullName: {item.fullname}</Text>
))}
<Button title="Fetch Items" onPress={fetchItems} />
<Link href="/createUser" asChild>
<Pressable>
<Text style={[styles.text, themeTextStyle]}>Dont have an account? Click Here </Text>
</Pressable>
</Link>
{ /*<BarChart
barWidth={22}
noOfSections={3}
barBorderRadius={4}
frontColor="lightgray"
data={barData}
yAxisThickness={0}
xAxisThickness={0}
/>
*/}
{items.map((item, index) => (
<Text key={index} style={[styles.text, themeTextStyle]}>Username : {item.username} password: {item.password} FullName: {item.fullname}</Text>
))}
<StatusBar style="auto" />
</View>
</SafeAreaProvider>
......
package-lock.json
+ 5
− 128
View file @ ae0cdd41
......@@ -8,19 +8,17 @@
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"@expo/webpack-config": "^18.1.3",
"@expo/webpack-config": "^19.0.0",
"expo": "^49.0.16",
"expo-constants": "~14.4.2",
"expo-linking": "~5.0.2",
"expo-router": "^2.0.10",
"expo-router": "^2.0.0",
"expo-sqlite": "~11.3.3",
"expo-status-bar": "~1.6.0",
"expo-system-ui": "~2.4.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.5",
"react-native-chart": "^0.1.14",
"react-native-chart-kit": "^6.12.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
......@@ -3257,9 +3255,9 @@
"integrity": "sha512-TI+l71+5aSKnShYclFa14Kum+hQMZ86b95SH6tQUG3qZEmLTarvWpKwqtTwQKqvlJSJrpFiSFu3eCuZokY6zWA=="
},
"node_modules/@expo/webpack-config": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-18.1.3.tgz",
"integrity": "sha512-lG2G7KmdW0y70b87Ul9A/1l1DgagSTqA3iIegxOYJCv38X7pNUcq0zIl+suBWtDV1ITkXmrfuYMPFMA1jqgtvA==",
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-19.0.0.tgz",
"integrity": "sha512-mX28BNyf4Cs0+4L44QQyhy5QMVfsYhOdB9Fpf3rp982KTKUsy01UFJ0irGI1jQ68jXrQn5/WU4u1pvN6DDao5Q==",
"dependencies": {
"@babel/core": "^7.20.2",
"babel-loader": "^8.3.0",
......@@ -14105,14 +14103,6 @@
"node": ">=8"
}
},
"node_modules/paths-js": {
"version": "0.4.11",
"resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz",
"integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA==",
"engines": {
"node": ">=0.11.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
......@@ -14335,11 +14325,6 @@
"node": ">=4.0.0"
}
},
"node_modules/point-in-polygon": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
"integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
......@@ -15243,29 +15228,6 @@
"react": "18.2.0"
}
},
"node_modules/react-native-chart": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/react-native-chart/-/react-native-chart-0.1.14.tgz",
"integrity": "sha512-pie127Gh5/F19cvWxLgl9dZ20tcqcmrcERrKtC3f+n6l/N9hPxiXRtGQBRmJooEFZhRAWJZe4ufi4KSXfrqQhg==",
"peerDependencies": {
"react-native": ">0.15.0"
}
},
"node_modules/react-native-chart-kit": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.12.0.tgz",
"integrity": "sha512-nZLGyCFzZ7zmX0KjYeeSV1HKuPhl1wOMlTAqa0JhlyW62qV/1ZPXHgT8o9s8mkFaGxdqbspOeuaa6I9jUQDgnA==",
"dependencies": {
"lodash": "^4.17.13",
"paths-js": "^0.4.10",
"point-in-polygon": "^1.0.1"
},
"peerDependencies": {
"react": "> 16.7.0",
"react-native": ">= 0.50.0",
"react-native-svg": "> 6.4.1"
}
},
"node_modules/react-native-gesture-handler": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
......@@ -15325,91 +15287,6 @@
"react-native": "*"
}
},
"node_modules/react-native-svg": {
"version": "13.14.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.14.0.tgz",
"integrity": "sha512-27ZnxUkHgWICimhuj6MuqBkISN53lVvgWJB7pIypjXysAyM+nqgQBPh4vXg+7MbqLBoYvR4PiBgKfwwGAqVxHg==",
"peer": true,
"dependencies": {
"css-select": "^5.1.0",
"css-tree": "^1.1.3"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-svg/node_modules/css-select": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
"peer": true,
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/react-native-svg/node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"peer": true,
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/react-native-svg/node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"peer": true,
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/react-native-svg/node_modules/domutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
"peer": true,
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/react-native-svg/node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"peer": true,
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/react-native-web": {
"version": "0.19.9",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment