more examples

Author: krizzu

example/src/App.tsx

@@ -2,11 +2,23 @@ import React, {useState} from 'react';
 import {SafeAreaView, ScrollView, StatusBar, View} from 'react-native';
 import useDatabase from './hooks/useDatabase';
 import DatabaseSelector from './components/DatabaseSelector';
-import BasicCrud from './components/BasicCrud';
+import ExampleSelector, {Examples} from './components/ExampleSelector';
+import BasicCrudExample from './components/examples/BasicCrud';
+import UtilsExample from './components/examples/Utils';
+import type {AsyncStorageSqlite} from '@react-native-async-storage/sqlite-storage';
+
+const ExamplesToComponents: {
+  [key in Examples]: React.FC<{db: AsyncStorageSqlite}>;
+} = {
+  [Examples.BasicCrud]: BasicCrudExample,
+  [Examples.Utils]: UtilsExample,
+};
 
 function App(): JSX.Element {
   const [dbName, setDbName] = useState('example_db.db');
+  const [example, setExample] = useState(Examples.BasicCrud);
   const database = useDatabase(dbName);
+  const Example = ExamplesToComponents[example];
   return (
     <SafeAreaView>
       <StatusBar barStyle={'dark-content'} />
@@ -16,7 +28,8 @@ function App(): JSX.Element {
             initialName={dbName}
             onCreateDatabase={newName => setDbName(newName)}
           />
-          <BasicCrud key={dbName} db={database} />
+          <ExampleSelector selected={example} onSelect={setExample} />
+          <Example db={database} key={database.name} />
         </View>
       </ScrollView>
     </SafeAreaView>

example/src/components/ExampleSelector.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {Button, StyleSheet, View} from 'react-native';
+
+type Props = {
+  selected: Examples;
+  onSelect: (selected: Examples) => void;
+};
+
+export enum Examples {
+  BasicCrud = 'Basic Crud',
+  Utils = 'Utils',
+}
+
+const ActiveColor = '#7DCE82';
+const DisabledColor = '#B5E3B8';
+
+const ExampleSelector: React.FC<Props> = ({selected, onSelect}) => {
+  return (
+    <View style={styles.row}>
+      <View style={styles.button}>
+        <Button
+          color={selected === Examples.BasicCrud ? ActiveColor : DisabledColor}
+          title="Curd"
+          onPress={() => onSelect(Examples.BasicCrud)}
+        />
+      </View>
+      <View style={styles.button}>
+        <Button
+          color={selected === Examples.Utils ? ActiveColor : DisabledColor}
+          title="Utils"
+          onPress={() => onSelect(Examples.Utils)}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 8,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  button: {
+    paddingHorizontal: 8,
+  },
+});
+
+export default ExampleSelector;

example/src/components/BasicCrud.tsx renamed to example/src/components/examples/BasicCrud.tsx

@@ -1,5 +1,5 @@
 import type {AsyncStorageSqlite} from '@react-native-async-storage/sqlite-storage';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Button, StyleSheet, Text, View} from 'react-native';
 
 type Props = {db: AsyncStorageSqlite};
@@ -23,6 +23,10 @@ const BasicCrud: React.FC<Props> = ({db}) => {
     await readValue();
   }
 
+  useEffect(() => {
+    readValue();
+  }, []);
+
   return (
     <View style={styles.container}>
       <Text style={styles.header}>Basic crud example</Text>

example/src/components/examples/Utils.tsx

@@ -0,0 +1,63 @@
+import type {AsyncStorageSqlite} from '@react-native-async-storage/sqlite-storage';
+import React, {useEffect, useState} from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
+
+type Props = {db: AsyncStorageSqlite};
+
+const Utils: React.FC<Props> = ({db}) => {
+  const [dbPath, setDbPath] = useState('');
+  const [dbSize, setDbSize] = useState('-');
+
+  async function readPath() {
+    const path = await db.getDatabaseFilePath();
+    setDbPath(path);
+  }
+
+  async function readSize() {
+    const size = await db.getDatabaseFileSize();
+    setDbSize(`${size / 1000}MB`);
+  }
+
+  useEffect(() => {
+    console.log('refreshing!');
+    readPath();
+    readSize();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Database utils</Text>
+      <View style={styles.row}>
+        <View style={styles.button}>
+          <Button title="read size" onPress={readSize} />
+        </View>
+        <View style={styles.button}>
+          <Button title="read path" onPress={readPath} />
+        </View>
+      </View>
+
+      <Text>{`Database size: ${dbSize}`}</Text>
+      <Text>{`Database path: ${dbPath}`}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  button: {
+    paddingHorizontal: 8,
+  },
+  header: {
+    fontSize: 18,
+  },
+  row: {
+    paddingVertical: 18,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Utils;

src/AsyncStorageSqlite.ts

@@ -0,0 +1,50 @@
+import type { Key, Value, Entries } from "./types";
+import module from "./NativeModule";
+
+export class AsyncStorageSqlite {
+  constructor(private dbName: string) {}
+
+  get name() {
+    return this.dbName;
+  }
+
+  read = async (key: Key): Promise<Entries> => {
+    return this.readMany([key]);
+  };
+
+  readMany = async (keys: Key[]): Promise<Entries> => {
+    return module.readMany(this.dbName, keys);
+  };
+
+  save = async (key: Key, value: Value): Promise<void> => {
+    return this.saveMany({ [key]: value });
+  };
+
+  saveMany = async (entries: Entries): Promise<void> => {
+    return module.saveMany(this.dbName, entries);
+  };
+
+  delete = async (key: Key): Promise<void> => {
+    return this.deleteMany([key]);
+  };
+
+  deleteMany = async (keys: Key[]): Promise<void> => {
+    return module.deleteMany(this.dbName, keys);
+  };
+
+  merge = async (entry: Entries): Promise<Entries> => {
+    return module.merge(this.dbName, entry);
+  };
+
+  getKeys = async (): Promise<Key[]> => {
+    return module.getKeys(this.dbName);
+  };
+
+  getDatabaseFilePath = async () => {
+    return module.getDatabasePath(this.dbName);
+  };
+
+  getDatabaseFileSize = async () => {
+    return module.getDatabaseSize(this.dbName);
+  };
+}

src/index.ts

@@ -1,50 +1,2 @@
-import type { Key, Value, Entries } from "./types";
-import module from "./NativeModule";
-
-export class AsyncStorageSqlite {
-  constructor(private dbName: string) {}
-
-  get name() {
-    return this.dbName;
-  }
-
-  read = async (key: Key): Promise<Entries> => {
-    return this.readMany([key]);
-  };
-
-  readMany = async (keys: Key[]): Promise<Entries> => {
-    return module.readMany(this.dbName, keys);
-  };
-
-  save = async (key: Key, value: Value): Promise<void> => {
-    return this.saveMany({ [key]: value });
-  };
-
-  saveMany = async (entries: Entries): Promise<void> => {
-    return module.saveMany(this.dbName, entries);
-  };
-
-  delete = async (key: Key): Promise<void> => {
-    return this.deleteMany([key]);
-  };
-
-  deleteMany = async (keys: Key[]): Promise<void> => {
-    return module.deleteMany(this.dbName, keys);
-  };
-
-  merge = async (entry: Entries): Promise<Entries> => {
-    return module.merge(this.dbName, entry);
-  };
-
-  getKeys = async (): Promise<Key[]> => {
-    return module.getKeys(this.dbName);
-  };
-
-  getDatabaseFilePath = async () => {
-    return module.getDatabasePath(this.dbName);
-  };
-
-  getDatabaseFileSize = async () => {
-    return module.getDatabaseSize(this.dbName);
-  };
-}
+export { AsyncStorageSqlite } from "./AsyncStorageSqlite";
+export type { Key, Entries, Value } from "./types";