Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

update database subscriber

This commit is contained in:
Ludvík Prokopec 2022-12-02 16:35:24 +01:00
parent cb4c5a875e
commit 02233b8941
2 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

@ -27,10 +27,10 @@ Included:
```svelte
<script>
import { createCollectionSubscriber } from '$lib/database'
import CollectionSubscriber from '$lib/database'
import Layout from '$lib/components/Layout'
const subscriber = createCollectionSubscriber('[database-id]', '[collection-id]')
const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
// listen changes in database and automatically rerender on change
// current data = [{ name: 'John', lastName: 'Doe' }, ...]
</script>
@ -40,18 +40,31 @@ Included:
</Layout>
```
### Realtime todo app using CollectionSubscriber
```svelte
<script>
import { createDocumentSubscriber } from '$lib/database'
import CollectionSubscriber from '$lib/database'
import Layout from '$lib/components/Layout'
const subscriber = createDocumentSubscriber('[database-id]', '[collection-id]', '[document-id]')
// listen changes in database and automatically rerender on change
// current data = { name: 'John', lastName: 'Doe' }
const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
let value = ''
</script>
<Layout>
{$subscriber?.name ?? ''}
<div>
<input type="text" bind:value />
<button on:click={() => names.add({ name: value })}>Add</button>
</div>
<div>
{#each $subscriber as collectionDocument}
<div>
<p>{collectionDocument.name}</p>
<button on:click={() => names.delete(collectionDocument.$id)}>Remove</button>
</div>
{/each}
</div>
</Layout>
```

40
src/lib/database.ts
View File

@ -1,16 +1,19 @@
import { writable } from 'svelte/store'
import { client, databases } from './stores/appwrite'
import type { Models, RealtimeResponseEvent } from 'appwrite'
import { ID } from 'appwrite'
export const createCollectionSubscriber = (databaseId: string, collectionId: string) => {
const store = writable<Models.Document[]>([])
class CollectionSubscriber {
protected store = writable<Models.Document[]>([])
public subscribe = this.store.subscribe
databases.listDocuments(databaseId, collectionId).then(data => store.set(data.documents))
constructor(protected databaseId: string, protected collectionId: string) {
databases.listDocuments(databaseId, collectionId).then(data => this.store.set(data.documents))
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents`, (response: RealtimeResponseEvent<any>) => {
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
store.update(current => {
this.store.update(current => {
const index = current.findIndex(item => item.$id === response.payload.$id)
if (index === -1) return current
@ -21,7 +24,7 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
}
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
store.update(current => {
this.store.update(current => {
const index = current.findIndex(item => item.$id === response.payload.$id)
if (index === -1) return current
@ -32,7 +35,7 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
}
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
store.update(current => {
this.store.update(current => {
current.push(response.payload)
return current
})
@ -40,18 +43,19 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
}
})
return store
}
export const createDocumentSubscriber = (databaseId: string, collectionId: string, documentId: string) => {
const store = writable<Models.Document>(null)
databases.getDocument(databaseId, collectionId, documentId).then(data => store.set(data.documents))
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents.${documentId}`, (response) => {
store.set(response.payload as Models.Document)
})
return store
add(data: { [key: string]: any } = {}, permissions: string[] = null) {
return databases.createDocument(this.databaseId, this.collectionId, ID.unique(), data, permissions)
}
set(documentId: string, data: { [key: string]: any } = {}, permissions: string[] = null) {
return databases.updateDocument(this.databaseId, this.collectionId, documentId, data, permissions)
}
delete(documentId: string) {
return databases.deleteDocument(this.databaseId, this.collectionId, documentId)
}
}
export default CollectionSubscriber