refactor: refactored react native demo to use new attachments API

Author: Amine

demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx

@@ -77,9 +77,13 @@ const TodoView: React.FC = () => {
   };
 
   const savePhoto = async (id: string, data: CameraCapturedPicture) => {
-    if (system.attachmentQueue) {
+    if (system.photoAttachmentQueue) {
       // We are sure the base64 is not null, as we are using the base64 option in the CameraWidget
-      const { id: photoId } = await system.attachmentQueue.savePhoto(data.base64!);
+      const { id: photoId } = await system.photoAttachmentQueue.saveFile({
+        data: data.base64!,
+        fileExtension: 'jpg',
+        mediaType: 'image/jpeg'
+      });
 
       await system.powersync.execute(`UPDATE ${TODO_TABLE} SET photo_id = ? WHERE id = ?`, [photoId, id]);
     }
@@ -99,12 +103,16 @@ const TodoView: React.FC = () => {
   };
 
   const deleteTodo = async (id: string, photoRecord?: AttachmentRecord) => {
-    await system.powersync.writeTransaction(async (tx) => {
-      if (system.attachmentQueue && photoRecord != null) {
-        await system.attachmentQueue.delete(photoRecord, tx);
-      }
-      await tx.execute(`DELETE FROM ${TODO_TABLE} WHERE id = ?`, [id]);
-    });
+    if (system.photoAttachmentQueue && photoRecord != null) {
+      await system.photoAttachmentQueue.deleteFile({
+        id: photoRecord.id,
+        updateHook: async (tx) => {
+          await tx.execute(`DELETE FROM ${TODO_TABLE} WHERE id = ?`, [id]);
+        }
+      });
+    } else {
+      await system.powersync.execute(`DELETE FROM ${TODO_TABLE} WHERE id = ?`, [id]);
+    }
   };
 
   if (isLoading) {

demos/react-native-supabase-todolist/library/powersync/PhotoAttachmentQueue.ts

@@ -2,31 +2,38 @@ import '@azure/core-asynciterator-polyfill';
 
 import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation } from '@powersync/react-native';
 import React from 'react';
-import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
-import { type AttachmentRecord } from '@powersync/attachments';
+import { 
+  AttachmentQueue, 
+  type AttachmentRecord, 
+  ExpoFileSystemAdapter, 
+  type WatchedAttachmentItem 
+} from '@powersync/attachments';
 import { configureFts } from '../fts/fts_setup';
 import { KVStorage } from '../storage/KVStorage';
+import { SupabaseRemoteStorageAdapter } from '../storage/SupabaseRemoteStorageAdapter';
 import { AppConfig } from '../supabase/AppConfig';
 import { SupabaseConnector } from '../supabase/SupabaseConnector';
-import { AppSchema } from './AppSchema';
-import { PhotoAttachmentQueue } from './PhotoAttachmentQueue';
+import { AppSchema, TODO_TABLE } from './AppSchema';
 
 const logger = createBaseLogger();
 logger.useDefaults();
 logger.setLevel(LogLevel.DEBUG);
 
 export class System {
   kvStorage: KVStorage;
-  storage: SupabaseStorageAdapter;
   supabaseConnector: SupabaseConnector;
   powersync: PowerSyncDatabase;
-  attachmentQueue: PhotoAttachmentQueue | undefined = undefined;
+  photoAttachmentQueue: AttachmentQueue | undefined = undefined;
 
   constructor() {
     this.kvStorage = new KVStorage();
-    this.supabaseConnector = new SupabaseConnector(this);
-    this.storage = this.supabaseConnector.storage;
+    this.supabaseConnector = new SupabaseConnector({
+      kvStorage: this.kvStorage,
+      supabaseUrl: AppConfig.supabaseUrl,
+      supabaseAnonKey: AppConfig.supabaseAnonKey
+    });
+    
     this.powersync = new PowerSyncDatabase({
       schema: AppSchema,
       database: {
@@ -50,17 +57,44 @@ export class System {
      */
 
     if (AppConfig.supabaseBucket) {
-      this.attachmentQueue = new PhotoAttachmentQueue({
-        powersync: this.powersync,
-        storage: this.storage,
-        // Use this to handle download errors where you can use the attachment
-        // and/or the exception to decide if you want to retry the download
-        onDownloadError: async (attachment: AttachmentRecord, exception: any) => {
-          if (exception.toString() === 'StorageApiError: Object not found') {
-            return { retry: false };
-          }
+      const localStorage = new ExpoFileSystemAdapter();
+      const remoteStorage = new SupabaseRemoteStorageAdapter({
+        client: this.supabaseConnector.client,
+        bucket: AppConfig.supabaseBucket
+      });
 
-          return { retry: true };
+      this.photoAttachmentQueue = new AttachmentQueue({
+        db: this.powersync,
+        localStorage,
+        remoteStorage,
+        watchAttachments: (onUpdate) => {
+          this.powersync.watch(
+            `SELECT photo_id as id FROM ${TODO_TABLE} WHERE photo_id IS NOT NULL`,
+            [],
+            {
+              onResult: (result: any) => {
+                const attachments: WatchedAttachmentItem[] = (result.rows?._array ?? []).map((row: any) => ({
+                  id: row.id,
+                  fileExtension: 'jpg'
+                }));
+                onUpdate(attachments);
+              }
+            }
+          );
+        },
+        errorHandler: {
+          onDownloadError: async (attachment: AttachmentRecord, error: Error) => {
+            if (error.toString() === 'StorageApiError: Object not found') {
+              return false; // Don't retry
+            }
+            return true; // Retry
+          },
+          onUploadError: async (attachment: AttachmentRecord, error: Error) => {
+            return true; // Retry uploads by default
+          },
+          onDeleteError: async (attachment: AttachmentRecord, error: Error) => {
+            return true; // Retry deletes by default
+          }
         }
       });
     }
@@ -70,8 +104,8 @@ export class System {
     await this.powersync.init();
     await this.powersync.connect(this.supabaseConnector, { clientImplementation: SyncClientImplementation.RUST });
 
-    if (this.attachmentQueue) {
-      await this.attachmentQueue.init();
+    if (this.photoAttachmentQueue) {
+      await this.photoAttachmentQueue.startSync();
     }
 
     // Demo using SQLite Full-Text Search with PowerSync.

demos/react-native-supabase-todolist/library/powersync/system.ts

@@ -0,0 +1,52 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+import { AttachmentRecord, RemoteStorageAdapter } from '@powersync/attachments';
+
+export interface SupabaseRemoteStorageAdapterOptions {
+  client: SupabaseClient;
+  bucket: string;
+}
+
+/**
+ * SupabaseRemoteStorageAdapter implements RemoteStorageAdapter for Supabase Storage.
+ * Handles upload, download, and deletion of files from Supabase Storage buckets.
+ */
+export class SupabaseRemoteStorageAdapter implements RemoteStorageAdapter {
+  constructor(private options: SupabaseRemoteStorageAdapterOptions) {}
+
+  async uploadFile(fileData: ArrayBuffer, attachment: AttachmentRecord): Promise<void> {
+    const mediaType = attachment.mediaType ?? 'application/octet-stream';
+
+    const { error } = await this.options.client.storage
+      .from(this.options.bucket)
+      .upload(attachment.filename, fileData, { contentType: mediaType });
+
+    if (error) {
+      throw error;
+    }
+  }
+
+  async downloadFile(attachment: AttachmentRecord): Promise<ArrayBuffer> {
+    const { data, error } = await this.options.client.storage
+      .from(this.options.bucket)
+      .download(attachment.filename);
+
+    if (error) {
+      throw error;
+    }
+
+    // Convert Blob to ArrayBuffer
+    return await data.arrayBuffer();
+  }
+
+  async deleteFile(attachment: AttachmentRecord): Promise<void> {
+    const { error } = await this.options.client.storage
+      .from(this.options.bucket)
+      .remove([attachment.filename]);
+
+    if (error) {
+      console.debug('Failed to delete file from Supabase Storage', error);
+      throw error;
+    }
+  }
+}
+