React-create-rxdb-example
Install and Initial
1
2
| $ npx create-react-app rxdbdemo
$ npm install --save concurrently moment pouchdb-adapter-http pouchdb-adapter-idb pouchdb-server react-toastify rxdb rxjs serve
|
package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| {
"name": "rxdbdemo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"concurrently": "^5.3.0",
"moment": "^2.29.1",
"pouchdb-adapter-http": "^7.2.2",
"pouchdb-adapter-idb": "^7.2.2",
"pouchdb-server": "^4.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-toastify": "^6.0.9",
"rxdb": "^9.6.0",
"rxjs": "^6.6.3",
"serve": "^11.3.2"
},
"scripts": {
"start": "concurrently \"npm run server\" \"react-scripts start\"",
"server": "pouchdb-server -d ./db",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
|
會開啟一個本地的 db
可以透過 pounch-db
Create Schema
src/Schema.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const schema = {
title: 'Anonymous chat schema',
description: 'Database schema for an anonymous chat',
version: 0,
type: 'object',
properties: {
id: {
type: 'string',
primary: true
},
message: {
type: 'string'
}
},
required: ['message']
}
export default schema;
|
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| import React, { useEffect, useRef, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, toast } from "react-toastify";
import * as moment from "moment";
import * as RxDB from "rxdb";
import schema from "./Schema";
let localdb = null;
const dbName = "test";
const syncURL = "http://localhost:5984/";
RxDB.addRxPlugin(require("pouchdb-adapter-idb"));
RxDB.addRxPlugin(require("pouchdb-adapter-http"));
const createDatabase = async () => {
try {
const db = await RxDB.createRxDatabase({
name: dbName,
adapter: "idb",
password: "12345678",
});
db.waitForLeadership().then(() => {
document.title = "♛ " + document.title;
});
const messagesCollection = await db.collection({
name: "messages",
schema: schema,
});
messagesCollection.sync({ remote: syncURL + dbName + "/" });
console.log("createDatabase -> messagesCollection", messagesCollection);
return db;
} catch (error) {
console.log("createDatabase -> error", error);
}
};
const addMessage = async (message, setNewMessage) => {
console.log("addMessage -> localdb", localdb)
const id = Date.now().toString();
const newMessage = { id, message };
await localdb.messages.insert(newMessage);
setNewMessage("");
};
const renderMessages = (messages) =>
messages.map(({ id, message }) => {
const date = moment(id, 'x').fromNow();
return (
<div key={id}>
<p>{date}</p>
<p>{message}</p>
<hr />
</div>
)
});
function App() {
let dbRef = useRef(null);
const [messages, setMessages] = useState([]);
const [subs, setSubs] = useState([]);
const [newMessage, setNewMessage] = useState("");
useEffect(() => {
createDatabase().then((db) => {
localdb = db;
const sub = db.messages
.find()
.sort({ id: 1 })
.$.subscribe((msgs) => {
if (!msgs) return;
toast("Reloading messages");
setMessages(msgs);
});
setSubs([...subs, sub]);
});
return () => {
subs.forEach((sub) => sub.unsubscribe());
};
}, []);
return (
<div className="App">
<ToastContainer autoClose={3000} />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>{renderMessages(messages)}</div>
<div id="add-message-div">
<h3>Add Message</h3>
<input
type="text"
placeholder="Message"
value={newMessage}
onChange={(env) => setNewMessage(env.target.value)}
/>
<button onClick={() => addMessage(newMessage, setNewMessage)}>
Add message
</button>
</div>
</div>
);
}
export default App;
|
