kinda working

boorad · May 8, 2024 · 62c61ed · 62c61ed
1 parent 92eaadd
commit 62c61ed
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 38 deletions.
diff --git a/examples/react-native/src/TodoList.tsx b/examples/react-native/src/TodoList.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   Button,
   FlatList,
@@ -9,32 +9,40 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import {Doc, useFireproof} from '@fireproof/react-native';
+import {useFireproof} from '@fireproof/react-native';
 
 export type Todo = { text: string; date: number; completed: boolean; };
 
 const TodoList = () => {
   // TODO: {public: true} is there until crypto.subtle.(encrypt|decrypt) are present in RNQC
-  const { useDocument, useLiveQuery } = useFireproof('TodoDB', {public: true});
-  // const [selectedTodo, setSelectedTodo] = useState<string>("")
-  const todos: Doc<Todo>[] = useLiveQuery<Todo>('date', {limit: 10, descending: true}).docs;
-  console.log({todos});
+  const { database, useDocument } = useFireproof('TodoDB', {public: true});
+
+  const [todos, setTodos] = useState<Todo[]>([])
+
+  useEffect(() => {
+    const getDocs = async () => {
+      const res = await database.allDocs<Todo>();
+      setTodos(res.rows);
+    }
+    getDocs()
+  }, []);
+
   const [todo, setTodo, saveTodo] = useDocument<Todo>(() => ({
-    // TODO: reset to '' after dev work
-    text: 'implement mmkv as backend',
+    text: '',
     date: Date.now(),
     completed: false,
   }));
 
-  const TodoItem = ({item, index}) => {
-    // console.log({item, index});
+  const TodoItem = ({item}) => {
+    // console.log({item});
+    if (!item?.value) return null;
     return (
-      <View key={index}>
+      <View style={styles.itemRow}>
         <Switch
           // onValueChange={(completed) => setTodo({completed})}
-          value={item.completed}
+          value={item.value.completed}
         />
-        <Text>{item.text}</Text>
+        <Text>{item.value.text}</Text>
       </View>
     );
 };
@@ -56,7 +64,7 @@ const TodoList = () => {
         <Text>Todo List:</Text>
         {
           todos.map((todo, i) => (
-            <TodoItem item={todo} index={i} />
+            <TodoItem key={i} item={todo} />
           ))
         }
         {/* <FlatList<Todo>
@@ -84,4 +92,8 @@ const styles = StyleSheet.create({
   container: {
     margin: 10,
   },
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });
diff --git a/packages/react-native/src/index.tsx b/packages/react-native/src/index.tsx
@@ -1,6 +1,12 @@
-import { ConfigOpts, Database, useFireproof as useFireproofReact } from 'use-fireproof';
+import {
+  type ConfigOpts,
+  type Database,
+  useFireproof as useFireproofReact,
+  useDocument,
+  useLiveQuery,
+  FireproofCtx
+} from 'use-fireproof';
 import { StoreOpts } from '@fireproof/encrypted-blockstore'
-import * as crypto from '@fireproof/encrypted-blockstore/crypto-web'
 
 import {
   makeDataStore,
@@ -14,19 +20,20 @@ const store = {
   makeRemoteWAL
 } as unknown as StoreOpts
 
-
-// Fireproof React exports
-export * from 'use-fireproof';
-
-// export (override with) a new 'useFireproof' for React Native
-export const useFireproof = (
+// override with a new 'useFireproof' for React Native
+const useFireproof = (
   name?: string | Database | undefined,
   config?: ConfigOpts | undefined
 ) => {
   return useFireproofReact(name, {
     ...config,
     store,
-    crypto,
   })
 };
 
+export {
+  useFireproof,
+  useDocument,
+  useLiveQuery,
+  FireproofCtx,
+};
diff --git a/packages/react-native/src/store-native.ts b/packages/react-native/src/store-native.ts
@@ -12,21 +12,20 @@ export const makeRemoteWAL = (loader: Loadable) => new RemoteWAL(loader)
 
 export class DataStore extends DataStoreBase {
   tag: string = 'car-native-mmkv'
-  rndb: MMKV | null = null
+  store: MMKV | null = null
 
   async _withDB(dbWorkFun: (arg0: any) => any) {
-    if (!this.rndb) {
+    if (!this.store) {
       const dbName = `fp.${this.STORAGE_VERSION}.${this.name}`
-      this.rndb = new MMKV({
+      this.store = new MMKV({
         id: dbName,
       })
     }
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return await dbWorkFun(this.rndb)
+    return await dbWorkFun(this.store)
   }
 
   async load(cid: AnyLink): Promise<AnyBlock> {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return await this._withDB(async (db: MMKV) => {
       const bytes = db.getBuffer(cid.toString())
       if (!bytes) throw new Error(`missing db block ${cid.toString()}`)
@@ -35,14 +34,12 @@ export class DataStore extends DataStoreBase {
   }
 
   async save(car: AnyBlock): Promise<void> {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return await this._withDB(async (db: MMKV) => {
       db.set(car.cid.toString(), car.bytes)
     })
   }
 
   async remove(cid: AnyLink): Promise<void> {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return await this._withDB(async (db: MMKV) => {
       db.delete(cid.toString())
     })
@@ -51,22 +48,22 @@ export class DataStore extends DataStoreBase {
 
 export class RemoteWAL extends RemoteWALBase {
   tag: string = 'wal-native-mmkv'
-  wal: MMKV | null = null
+  store: MMKV | null = null
 
   headerKey(branch: string) {
     // remove 'public' on next storage version bump
     return `fp.${this.STORAGE_VERSION}.wal.${this.loader.name}.${branch}`
   }
 
   async _withDB(dbWorkFun: (arg0: any) => any) {
-    if (!this.wal) {
+    if (!this.store) {
       const dbName = `fp.${this.STORAGE_VERSION}.wal`
-      this.wal = new MMKV({
+      this.store = new MMKV({
         id: dbName,
       })
     }
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return await dbWorkFun(this.wal)
+    return await dbWorkFun(this.store)
   }
 
   // eslint-disable-next-line @typescript-eslint/require-await
@@ -89,21 +86,21 @@ export class RemoteWAL extends RemoteWALBase {
 
 export class MetaStore extends MetaStoreBase {
   tag: string = 'header-native-mmkv'
-  meta: MMKV | null = null
+  store: MMKV | null = null
 
   headerKey(branch: string) {
     return `fp.${this.STORAGE_VERSION}.meta.${this.name}.${branch}`
   }
 
   async _withDB(dbWorkFun: (arg0: any) => any) {
-    if (!this.meta) {
+    if (!this.store) {
       const dbName = `fp.${this.STORAGE_VERSION}.meta`
-      this.meta = new MMKV({
+      this.store = new MMKV({
         id: dbName,
       })
     }
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return await dbWorkFun(this.meta)
+    return await dbWorkFun(this.store)
   }
 
   // eslint-disable-next-line @typescript-eslint/require-await