update database subscriber
This commit is contained in:
parent
cb4c5a875e
commit
02233b8941
37
README.md
37
README.md
|
@ -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,19 +40,32 @@ Included:
|
|||
</Layout>
|
||||
```
|
||||
|
||||
### Realtime todo app using CollectionSubscriber
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { createDocumentSubscriber } from '$lib/database'
|
||||
import Layout from '$lib/components/Layout'
|
||||
<script>
|
||||
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' }
|
||||
</script>
|
||||
const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
|
||||
let value = ''
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{$subscriber?.name ?? ''}
|
||||
</Layout>
|
||||
<Layout>
|
||||
<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>
|
||||
```
|
||||
|
||||
## Routing
|
||||
|
|
|
@ -1,57 +1,61 @@
|
|||
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>) => {
|
||||
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents`, (response: RealtimeResponseEvent<any>) => {
|
||||
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
|
||||
store.update(current => {
|
||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||
if (index === -1) return current
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
|
||||
this.store.update(current => {
|
||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||
if (index === -1) return current
|
||||
|
||||
current.splice(index, 1)
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
current.splice(index, 1)
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
|
||||
store.update(current => {
|
||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||
if (index === -1) return current
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
|
||||
this.store.update(current => {
|
||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||
if (index === -1) return current
|
||||
|
||||
current[index] = response.payload
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
current[index] = response.payload
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
|
||||
store.update(current => {
|
||||
current.push(response.payload)
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
|
||||
this.store.update(current => {
|
||||
current.push(response.payload)
|
||||
return current
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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 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
|
||||
}
|
||||
export default CollectionSubscriber
|
||||
|
|
Loading…
Reference in New Issue