fix: expo blob compatability and attachment row mapping

Author: joshuabrink

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

@@ -1,4 +1,4 @@
-import { ATTACHMENT_TABLE, AttachmentRecord } from '@powersync/attachments';
+import { ATTACHMENT_TABLE, attachmentFromSql, AttachmentRecord } from '@powersync/attachments';
 import { usePowerSync, useQuery } from '@powersync/react-native';
 import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
@@ -12,21 +12,7 @@ import { TODO_TABLE, TodoRecord, LIST_TABLE } from '../../../../library/powersyn
 import { useSystem } from '../../../../library/powersync/system';
 import { TodoItemWidget } from '../../../../library/widgets/TodoItemWidget';
 
-type TodoEntry = TodoRecord & Partial<Omit<AttachmentRecord, 'id'>> & { todo_id: string; attachment_id: string | null };
-
-const toAttachmentRecord = _.memoize((entry: TodoEntry): AttachmentRecord | null => {
-  return entry.attachment_id == null
-    ? null
-    : {
-      id: entry.attachment_id,
-      filename: entry.filename!,
-      state: entry.state!,
-      timestamp: entry.timestamp,
-      local_uri: entry.local_uri,
-      media_type: entry.media_type,
-      size: entry.size
-    };
-});
+type TodoEntry = TodoRecord & { todo_id: string; attachment_id: string | null };
 
 const TodoView: React.FC = () => {
   const system = useSystem();
@@ -61,10 +47,10 @@ const TodoView: React.FC = () => {
     if (completed) {
       const userID = await system.supabaseConnector.userId();
       updatedRecord.completed_at = new Date().toISOString();
-      updatedRecord.completed_by = userID;
+      updatedRecord.completed_by = userID!;
     } else {
-      updatedRecord.completed_at = undefined;
-      updatedRecord.completed_by = undefined;
+      updatedRecord.completed_at = null;
+      updatedRecord.completed_by = null;
     }
     await system.powersync.execute(
       `UPDATE ${TODO_TABLE}
@@ -165,7 +151,7 @@ const TodoView: React.FC = () => {
       <ScrollView style={{ maxHeight: '90%' }}>
         {todos.map((r) => {
           const record = { ...r, id: r.todo_id };
-          const photoRecord = toAttachmentRecord(r);
+          const photoRecord = attachmentFromSql(r);
           return (
             <TodoItemWidget
               key={r.todo_id}

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

@@ -28,7 +28,7 @@ export const AppSchema = new Schema({
   todos,
   lists,
   attachments: new AttachmentTable({
-    name: 'attachments',
+    viewName: 'attachments',
   }),
 });
 

demos/react-native-supabase-todolist/library/storage/SupabaseRemoteStorageAdapter.ts

@@ -26,27 +26,28 @@ export class SupabaseRemoteStorageAdapter implements RemoteStorageAdapter {
   }
 
   async downloadFile(attachment: AttachmentRecord): Promise<ArrayBuffer> {
-    const { data, error } = await this.options.client.storage
-      .from(this.options.bucket)
-      .download(attachment.filename);
+    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();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        resolve(reader.result as ArrayBuffer);
+      };
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(data);
+    });
   }
 
   async deleteFile(attachment: AttachmentRecord): Promise<void> {
-    const { error } = await this.options.client.storage
-      .from(this.options.bucket)
-      .remove([attachment.filename]);
+    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;
     }
   }
 }
-

demos/react-native-supabase-todolist/library/widgets/TodoItemWidget.tsx

@@ -1,12 +1,11 @@
 import { CameraCapturedPicture } from 'expo-camera';
 import React from 'react';
-import { ActivityIndicator, Alert, View, Modal, StyleSheet } from 'react-native';
+import { ActivityIndicator, Alert, View, Modal, StyleSheet, Text } from 'react-native';
 import { ListItem, Button, Icon, Image } from '@rneui/themed';
 import { CameraWidget } from './CameraWidget';
 import { TodoRecord } from '../powersync/AppSchema';
 import { AttachmentRecord } from '@powersync/attachments';
 import { AppConfig } from '../supabase/AppConfig';
-import { useSystem } from '../powersync/system';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 export interface TodoItemWidgetProps {
@@ -21,7 +20,6 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
   const { record, photoAttachment, onDelete, onToggleCompletion, onSavePhoto } = props;
   const [loading, setLoading] = React.useState(false);
   const [isCameraVisible, setCameraVisible] = React.useState(false);
-  const system = useSystem();
 
   const handleCancel = React.useCallback(() => {
     setCameraVisible(false);
@@ -72,7 +70,7 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
             iconType="material-community"
             checkedIcon="checkbox-marked"
             uncheckedIcon="checkbox-blank-outline"
-            checked={record.completed}
+            checked={!!record.completed}
             onPress={async () => {
               setLoading(true);
               await onToggleCompletion(!record.completed);
@@ -97,9 +95,9 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
               }}>
               {/* <Icon name={'camera'} type="material" color={'black'} size={32} /> */}
             </Button>
-          ) : photoAttachment?.local_uri != null ? (
+          ) : photoAttachment?.localUri != null ? (
             <Image
-              source={{ uri: system.attachmentQueue?.getLocalUri(photoAttachment.local_uri) }}
+              source={{ uri: photoAttachment.localUri }}
               containerStyle={styles.item}
               PlaceholderContent={<ActivityIndicator />}
             />