Realtime

// Subscribe to all changes in 'messages'
base.collection('messages').subscribe('*', (e) => {
  console.log(e.action)  // 'create' | 'update' | 'delete'
  console.log(e.record)  // the changed record
})

// Subscribe to a single record
base.collection('tasks').subscribe(recordId, (e) => {
  console.log('Task updated:', e.record)
})

interface RecordSubscription {
  action: 'create' | 'update' | 'delete'
  record: Record           // The full record after the change
}

// Unsubscribe from specific topic
base.collection('messages').unsubscribe('*')
base.collection('tasks').unsubscribe(recordId)

// Unsubscribe from all subscriptions
base.collection('messages').unsubscribe()

import { useEffect, useState } from 'react'
import { BaseClient } from '@hanzoai/base'

const base = new BaseClient('http://localhost:8090')

function MessageList({ channelId }: { channelId: string }) {
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    // Initial load
    base.collection('messages')
      .getFullList({ filter: `channel = "${channelId}"`, sort: 'created' })
      .then(setMessages)

    // Subscribe to new messages
    base.collection('messages').subscribe('*', (e) => {
      if (e.record.channel !== channelId) return

      if (e.action === 'create') {
        setMessages(prev => [...prev, e.record])
      } else if (e.action === 'update') {
        setMessages(prev =>
          prev.map(m => m.id === e.record.id ? e.record : m)
        )
      } else if (e.action === 'delete') {
        setMessages(prev =>
          prev.filter(m => m.id !== e.record.id)
        )
      }
    })

    return () => {
      base.collection('messages').unsubscribe()
    }
  }, [channelId])

  return (
    <ul>
      {messages.map(msg => (
        <li key={msg.id}>{msg.text}</li>
      ))}
    </ul>
  )
}