Skip to content

Commit 109845a

Browse files
quangta99quangta99
committed
push
1 parent 48eb56e commit 109845a

37 files changed

+1395
-330
lines changed

‎package-lock.json

Lines changed: 519 additions & 249 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,20 @@
55
"description": "A sample Apache Cordova application that responds to the deviceready event.",
66
"homepage": "./",
77
"dependencies": {
8+
"@ionic-native/core": "^5.35.0",
89
"@testing-library/jest-dom": "^5.14.1",
910
"@testing-library/react": "^11.2.7",
1011
"@testing-library/user-event": "^12.8.3",
12+
"@types/jest": "^26.0.24",
13+
"@types/node": "^12.20.18",
14+
"@types/react": "^17.0.15",
15+
"@types/react-dom": "^17.0.9",
1116
"react": "^17.0.2",
1217
"react-dom": "^17.0.2",
1318
"react-scripts": "4.0.3",
1419
"rimraf": "^3.0.2",
20+
"rxjs": "^7.3.0",
21+
"typescript": "^4.3.5",
1522
"web-vitals": "^1.1.2"
1623
},
1724
"scripts": {
@@ -20,9 +27,6 @@
2027
"test": "react-scripts test",
2128
"eject": "react-scripts eject"
2229
},
23-
"keywords": [
24-
"ecosystem:cordova"
25-
],
2630
"browserslist": {
2731
"production": [
2832
">0.2%",
@@ -35,18 +39,30 @@
3539
"last 1 safari version"
3640
]
3741
},
42+
"keywords": [
43+
"ecosystem:cordova"
44+
],
3845
"author": "Apache Cordova Team",
3946
"license": "Apache-2.0",
4047
"devDependencies": {
48+
"cordova-browser": "^6.0.0",
4149
"cordova-ios": "^6.2.0",
50+
"cordova-plugin-sqlite-2": "^1.0.7",
4251
"cordova-plugin-whitelist": "^1.3.4"
4352
},
4453
"cordova": {
4554
"plugins": {
46-
"cordova-plugin-whitelist": {}
55+
"cordova-plugin-whitelist": {},
56+
"cordova-plugin-sqlite-2": {}
4757
},
4858
"platforms": [
59+
"browser",
4960
"ios"
5061
]
62+
},
63+
"eslintConfig": {
64+
"extends": [
65+
"react-app"
66+
]
5167
}
52-
}
68+
}

‎public/index.html

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
13-
<meta name="format-detection" content="telephone=no">
14-
<meta name="msapplication-tap-highlight" content="no">
15-
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
16-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
17-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<meta name="format-detection" content="telephone=no">
11+
<meta name="msapplication-tap-highlight" content="no">
12+
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover, maximum-scale=1">
13+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14+
<!--
1815
manifest.json provides metadata used when your web app is installed on a
1916
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
2017
-->
21-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22-
<!--
18+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19+
<!--
2320
Notice the use of %PUBLIC_URL% in the tags above.
2421
It will be replaced with the URL of the `public` folder during the build.
2522
Only files inside the `public` folder can be referenced from the HTML.
@@ -28,12 +25,13 @@
2825
work correctly both with client-side routing and a non-root public URL.
2926
Learn how to configure a non-root public URL by running `npm run build`.
3027
-->
31-
<title>React App</title>
32-
</head>
33-
<body>
34-
<noscript>You need to enable JavaScript to run this app.</noscript>
35-
<div id="root"></div>
36-
<!--
28+
<title>React App</title>
29+
</head>
30+
31+
<body>
32+
<noscript>You need to enable JavaScript to run this app.</noscript>
33+
<div id="root"></div>
34+
<!--
3735
This HTML file is a template.
3836
If you open it directly in the browser, you will see an empty page.
3937
@@ -43,6 +41,7 @@
4341
To begin the development, run `npm start` or `yarn start`.
4442
To create a production bundle, use `npm run build` or `yarn build`.
4543
-->
46-
<script src="cordova.js" type="text/javascript"></script>
47-
</body>
48-
</html>
44+
<script src="cordova.js" type="text/javascript"></script>
45+
</body>
46+
47+
</html>

‎src/App.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,17 @@
2828
color: #61dafb;
2929
}
3030

31+
.list-user {
32+
max-width: 300px;
33+
overflow: auto;
34+
}
35+
3136
@keyframes App-logo-spin {
3237
from {
3338
transform: rotate(0deg);
3439
}
40+
3541
to {
3642
transform: rotate(360deg);
3743
}
38-
}
44+
}

‎src/App.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/App.test.js renamed to ‎src/App.test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { render, screen } from '@testing-library/react';
23
import App from './App';
34

‎src/App.tsx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React, { useState } from 'react';
2+
import logo from './logo.svg';
3+
import './App.css';
4+
import { useSqlite } from './sqlite-hook';
5+
import { User } from './models/User';
6+
7+
function App() {
8+
const sqliteDb = useSqlite();
9+
const [inputUser, setInputUser] = useState<User>({
10+
userId: 0,
11+
name: '',
12+
email: '',
13+
status: false
14+
});
15+
const [deleteId, setDeleteId] = useState<string>('');
16+
const [inputId, setInputId] = useState<string>('');
17+
18+
const handleFetch = () => {
19+
sqliteDb.all().then(res => console.log(res));
20+
}
21+
22+
const handleInputUserId = (e: any) => {
23+
setInputUser((prev) => ({...prev, userId: e.target.value}));
24+
};
25+
const handleInputName = (e: any) => {
26+
setInputUser((prev) => ({...prev, name: e.target.value}));
27+
};
28+
const handleInputEmail = (e: any) => {
29+
setInputUser((prev) => ({...prev, email: e.target.value}));
30+
};
31+
const handleInputStatus = (e: any) => {
32+
setInputUser((prev) => ({...prev, status: e.target.value}));
33+
};
34+
const handleInputDelete = (e: any) => {
35+
setDeleteId(e.target.value);
36+
};
37+
const handleInputId = (e: any) => {
38+
setInputId(e.target.value);
39+
};
40+
41+
const handleInsert = () => {
42+
sqliteDb.insert(inputUser);
43+
setInputUser((prev) => ({...prev,userId: 0, name: '', email: '', status: false}));
44+
handleFetch();
45+
}
46+
47+
const handleDelete = () => {
48+
sqliteDb.deleteUser(deleteId);
49+
setDeleteId('');
50+
handleFetch();
51+
}
52+
53+
const load = () => {
54+
sqliteDb.load(inputId);
55+
setInputId('');
56+
}
57+
58+
const handleUpdate = () => {
59+
sqliteDb.update(inputUser);
60+
setInputUser({userId: 0, name: '', email: '', status: false});
61+
handleFetch();
62+
}
63+
64+
const inserMany = () => {
65+
const users: User[] = [
66+
{
67+
userId: 5,
68+
name: '5',
69+
email: '5',
70+
status: false
71+
},
72+
{
73+
userId: 6,
74+
name: '6',
75+
email: '6',
76+
status: false
77+
},
78+
{
79+
userId: 7,
80+
name: '7',
81+
email: '7',
82+
status: false
83+
},
84+
{
85+
userId: 8,
86+
name: '8',
87+
email: '8',
88+
status: false
89+
},
90+
];
91+
sqliteDb.insertMany(users);
92+
};
93+
94+
return (
95+
<div className="App">
96+
<header className="App-header">
97+
<img src={logo} className="App-logo" alt="logo" />
98+
<div className='list-user'>
99+
{sqliteDb.users ? sqliteDb.users.map(item => (
100+
<>
101+
<p>User Name: {item.name}</p>
102+
<p>Email: {item.email}</p>
103+
<hr />
104+
</>
105+
)) : (
106+
<p>
107+
Hello World!
108+
</p>
109+
)}
110+
</div>
111+
<button onClick={handleFetch}>Fetch</button>
112+
<div style={{display: 'contents'}}>
113+
<input value={inputId} placeholder='Input Id' onChange={handleInputId}/>
114+
</div>
115+
<button onClick={load}>Load</button>
116+
<div style={{display: 'contents'}}>
117+
<input value={inputUser.userId} placeholder='userId' onChange={handleInputUserId}/>
118+
<input value={inputUser.name} placeholder='name' onChange={handleInputName}/>
119+
<input value={inputUser.email} placeholder='email' onChange={handleInputEmail}/>
120+
<input value={inputUser.status ? 'true' : 'false'} placeholder='status' onChange={handleInputStatus}/>
121+
</div>
122+
<div style={{display: 'flex', justifyContent:'space-between'}}>
123+
<button onClick={handleInsert}>Insert</button>
124+
<button onClick={handleUpdate}>Update</button>
125+
</div>
126+
<button onClick={inserMany}>Insert Many</button>
127+
<div style={{display: 'contents'}}>
128+
<input value={deleteId} placeholder='Delete Id' onChange={handleInputDelete}/>
129+
</div>
130+
<button onClick={handleDelete}>Delete</button>
131+
</header>
132+
</div>
133+
);
134+
}
135+
136+
export default App;

‎src/index.js renamed to ‎src/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import './index.css';
44
import App from './App';
55
import reportWebVitals from './reportWebVitals';
66

7+
78
const renderReactDom = () => {
89
ReactDOM.render(<App />, document.getElementById('root'));
910
};
10-
11+
// @ts-ignore: Unreachable code error
1112
if (window.cordova) {
1213
document.addEventListener('deviceready', () => {
1314
renderReactDom();

‎src/models/User.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export interface User {
2+
userId: number;
3+
name: string;
4+
email?: string;
5+
status?: boolean
6+
phone?: string;
7+
dateOfBirth?: Date;
8+
}

‎src/react-app-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

0 commit comments

Comments
 (0)