Skip to content

Commit bb8211f

Browse files
vazravazra
committed
feat: ✨ Added SQLite
1 parent bedfb18 commit bb8211f

File tree

9 files changed

+1115
-196
lines changed

9 files changed

+1115
-196
lines changed

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,23 @@
3232
"realm": "^6.0.2",
3333
"rxdb": "9.1.0",
3434
"rxjs": "6.5.5",
35-
"source-map-support": "^0.5.19"
35+
"source-map-support": "^0.5.19",
36+
"sql.js": "^1.3.0",
37+
"sqlite3": "^4.2.0",
38+
"trilogy": "^2.0.2"
3639
},
3740
"devDependencies": {
3841
"@babel/preset-react": "^7.10.1",
3942
"@types/electron-devtools-installer": "^2.2.0",
4043
"@types/faker": "4.1.12",
44+
"@types/generic-pool": "^3.1.9",
4145
"@types/node": "^12.12.47",
4246
"@types/react": "^16.9.36",
4347
"@types/react-bootstrap-table-next": "4.0.4",
4448
"@types/react-bootstrap-table2-paginator": "2.1.1",
4549
"@types/react-dom": "^16.9.8",
4650
"electron": "8.1.1",
51+
"electron-builder": "^22.7.0",
4752
"electron-webpack": "^2.8.2",
4853
"electron-webpack-ts": "^4.0.1",
4954
"typescript": "^3.9.5",

‎src/renderer/components/Home.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useState } from "react";
22
import { Container, Jumbotron, Button } from "react-bootstrap";
3-
import RealMDashboard from "./RealMDashboard";
3+
// import RealMDashboard from "./RealMDashboard";
44
import RxJsDashboard from "./Dashboard";
5+
import SQLiteDashboard from "./SQLiteDashboard";
56

67
// interface IHome {
78
// children: React.ReactNode;
@@ -10,8 +11,8 @@ import RxJsDashboard from "./Dashboard";
1011
export function Home() {
1112
const [isRxDB, setIsRxDB] = useState<boolean>(true);
1213

13-
const title = isRxDB ? `RxDB ` : `Realm`;
14-
const dashboard = isRxDB ? <RxJsDashboard /> : <RealMDashboard />;
14+
const title = isRxDB ? `RxDB ` : `SQLite`;
15+
const dashboard = isRxDB ? <RxJsDashboard /> : <SQLiteDashboard />;
1516
return (
1617
<Container className="p-3">
1718
<Jumbotron style={{ textAlign: "center" }}>

‎src/renderer/components/SQLiteDashboard.tsx‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import React, { useState, useEffect } from "react";
2+
import {
3+
Button,
4+
Row,
5+
Col,
6+
Form,
7+
ProgressBar,
8+
Spinner,
9+
ButtonGroup,
10+
Card,
11+
} from "react-bootstrap";
12+
import RemoteTable from "./RemoteTable";
13+
import { TableChangeType, TableChangeState } from "react-bootstrap-table-next";
14+
import { UserDocType } from "../types";
15+
import { addUserstoDB, getCount, getDocs } from "../sqlitedb/service";
16+
17+
// interface ISQLiteDashboard {
18+
// children: React.ReactNode;
19+
// }
20+
21+
export function SQLiteDashboard() {
22+
const [users, setUsers] = useState<UserDocType[]>();
23+
// const [db, setDB] = useState<RxDatabase<MyDatabaseCollections>>();
24+
const [totalCount, setTotalCount] = useState<number>(0);
25+
const [addCount, setAddCount] = useState<number>(100);
26+
const [progress, setProgress] = useState<number>(0);
27+
const [sizePerPage, setSizePerPage] = useState<number>(10);
28+
const [page, setPage] = useState<number>(1);
29+
const [isLoading, setLoading] = useState<[boolean, string]>([false, ""]);
30+
const [latestReadTime, setLatestReadTime] = useState<[number, number]>([
31+
334.54,
32+
20,
33+
]);
34+
const [latestWriteTime, setLatestWriteTime] = useState<[number, number]>([
35+
334.54,
36+
20,
37+
]);
38+
39+
useEffect(() => {
40+
// create the databse
41+
async function anyNameFunction() {
42+
setLoading([true, "initializing database"]);
43+
// testRe alm();
44+
console.log("start === ", "addUserstoSQLite");
45+
await addUserstoDB(100, setProgress, setLatestWriteTime);
46+
47+
// console.log("start === ", "getCount");
48+
// setTotalCount(getCount());
49+
50+
// console.log("start === ", "getDocs");
51+
// const users = getDocs(10, 1, setLatestReadTime);
52+
// setUsers(users);
53+
setLoading([false, ""]);
54+
}
55+
anyNameFunction();
56+
}, []);
57+
58+
const reloadUI = async () => {
59+
setUsers([]);
60+
setProgress(0);
61+
setTotalCount(0);
62+
setPage(1);
63+
setSizePerPage(10);
64+
};
65+
66+
async function getDocsAndCount(perPageCount: number, pageNo: number) {
67+
const count = await getCount();
68+
setTotalCount(count);
69+
const newUsers = await getDocs(perPageCount, pageNo, setLatestReadTime);
70+
setUsers(newUsers);
71+
}
72+
73+
useEffect(() => {
74+
console.log("pagechanged === ", "getDocsAndCount", page, sizePerPage);
75+
getDocsAndCount(sizePerPage, page);
76+
}, [page, sizePerPage]);
77+
78+
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
79+
e.preventDefault();
80+
setAddCount(+e.target.value);
81+
setProgress(0);
82+
};
83+
84+
const handleAddSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
85+
e.preventDefault();
86+
setProgress(0);
87+
await addUserstoDB(addCount, setProgress, setLatestWriteTime);
88+
setAddCount(100);
89+
getDocsAndCount(sizePerPage, page);
90+
};
91+
92+
const handleTableChange = (
93+
type: TableChangeType,
94+
{ page, sizePerPage }: TableChangeState<any>
95+
) => {
96+
// if (type === "pagination")
97+
setPage(page);
98+
setSizePerPage(sizePerPage);
99+
};
100+
101+
const progressInstance = (
102+
<ProgressBar now={progress} label={`${progress}%`} />
103+
);
104+
return (
105+
<>
106+
<Row>
107+
<Col>
108+
<Form onSubmit={handleAddSubmit}>
109+
<Form.Row className="align-items-center">
110+
<Col xs="auto">
111+
<Form.Control
112+
className="mb-1"
113+
id="inlineFormInput"
114+
placeholder="Enter No"
115+
value={addCount}
116+
onChange={handleChangeInput}
117+
/>
118+
</Col>
119+
120+
<Col xs="auto">
121+
<Button variant="success" type="submit" className="mb-2">
122+
Add {addCount} Users
123+
</Button>
124+
<br />
125+
{progressInstance}
126+
</Col>
127+
<Col> </Col>
128+
</Form.Row>
129+
</Form>
130+
</Col>
131+
<Col>
132+
{isLoading[0] ? (
133+
<Row>
134+
<Spinner animation="border" role="status">
135+
<span className="sr-only">Loading...{isLoading[1]}</span>
136+
</Spinner>
137+
</Row>
138+
) : (
139+
<ButtonGroup aria-label="Adapters"></ButtonGroup>
140+
)}
141+
</Col>
142+
143+
<Col xs="auto">
144+
<Button
145+
variant="primary"
146+
className="mb-2"
147+
onClick={() => {
148+
reloadUI();
149+
}}
150+
>
151+
Reload
152+
</Button>{" "}
153+
<Button
154+
variant="outline-danger"
155+
className="mb-2"
156+
onClick={() => {
157+
reloadUI();
158+
}}
159+
>
160+
Delete DB
161+
</Button>{" "}
162+
<p>
163+
({users?.length}/{totalCount}) Fetched
164+
</p>
165+
</Col>
166+
<Col xs="auto"></Col>
167+
</Row>
168+
<Row>
169+
<Col>
170+
<Card style={{ marginTop: "16px" }}>
171+
<Card.Body>
172+
Latest Read Time : {latestReadTime[0]}ms for {latestReadTime[1]}{" "}
173+
docs
174+
</Card.Body>
175+
</Card>
176+
</Col>
177+
<Col>
178+
<Card style={{ marginTop: "16px" }}>
179+
<Card.Body>
180+
Latest Write Time : {latestWriteTime[0]}ms for{" "}
181+
{latestWriteTime[1]} docs
182+
</Card.Body>
183+
</Card>
184+
</Col>
185+
</Row>
186+
<Row>
187+
<Col style={{ marginTop: "16px" }}>
188+
<RemoteTable
189+
data={users || []}
190+
page={page}
191+
sizePerPage={sizePerPage}
192+
totalSize={totalCount}
193+
onTableChange={handleTableChange}
194+
/>
195+
</Col>
196+
</Row>
197+
<Row>
198+
<Col>
199+
<Card style={{ marginTop: "16px" }}>
200+
<Card.Body>
201+
{" "}
202+
First Doc : {JSON.stringify(users && users[0])}
203+
</Card.Body>
204+
</Card>
205+
</Col>
206+
</Row>
207+
</>
208+
);
209+
}
210+
211+
export default SQLiteDashboard;

0 commit comments

Comments
 (0)