From 62c61ed47e0b42acb89a8a55ddf1317998c82926 Mon Sep 17 00:00:00 2001 From: Brad Anderson Date: Tue, 7 May 2024 21:26:47 -0400 Subject: [PATCH] kinda working --- examples/react-native/src/TodoList.tsx | 40 +++++++++++++++-------- packages/react-native/src/index.tsx | 25 +++++++++----- packages/react-native/src/store-native.ts | 27 +++++++-------- 3 files changed, 54 insertions(+), 38 deletions(-) diff --git a/examples/react-native/src/TodoList.tsx b/examples/react-native/src/TodoList.tsx index c4b3a395c..e03be6a4d 100644 --- 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("") - const todos: Doc[] = useLiveQuery('date', {limit: 10, descending: true}).docs; - console.log({todos}); + const { database, useDocument } = useFireproof('TodoDB', {public: true}); + + const [todos, setTodos] = useState([]) + + useEffect(() => { + const getDocs = async () => { + const res = await database.allDocs(); + setTodos(res.rows); + } + getDocs() + }, []); + const [todo, setTodo, saveTodo] = useDocument(() => ({ - // 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 ( - + setTodo({completed})} - value={item.completed} + value={item.value.completed} /> - {item.text} + {item.value.text} ); }; @@ -56,7 +64,7 @@ const TodoList = () => { Todo List: { todos.map((todo, i) => ( - + )) } {/* @@ -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 index 2ba95806c..049b8ea07 100644 --- 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 index d917db395..7df95ee6e 100644 --- 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 { - // 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 { - // 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 { - // eslint-disable-next-line @typescript-eslint/no-unsafe-return return await this._withDB(async (db: MMKV) => { db.delete(cid.toString()) }) @@ -51,7 +48,7 @@ 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 @@ -59,14 +56,14 @@ export class RemoteWAL extends RemoteWALBase { } 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