fix: updated to fix issue with close/open database when deleting

Author: biozal

expo-example/android/build.gradle

@@ -39,4 +39,4 @@ allprojects {
         maven { url 'https://www.jitpack.io' }
     }
 }
-apply from: "../../android/build.gradle"
+apply from: "../../android/build.gradle"apply from: "../../android/build.gradle"

expo-example/app/database/close.tsx

@@ -2,42 +2,26 @@ import React, { useContext, useLayoutEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useStyleScheme } from '@/components/Themed';
-import DatabaseNameForm from '@/components/DatabaseNameForm';
-import MaterialCommunityIcons from '@expo/vector-icons/build/MaterialCommunityIcons';
+import DatabaseNameActionForm from '@/components/DatabaseNameActionForm';
 import ResultListView from '@/components/ResultsListView';
 import close from '@/service/database/close';
 import DatabaseContext from '@/providers/DatabaseContext';
+import useNavigationBarTitleResetOption from '@/hooks/useNavigationBarTitleResetOption';
 
 export default function DatabaseCloseScreen() {
   const { databases } = useContext(DatabaseContext)!;
   const [databaseName, setDatabaseName] = useState<string>('');
   const [resultMessage, setResultsMessage] = useState<string[]>([]);
   const navigation = useNavigation();
   const styles = useStyleScheme();
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      title: 'Database Open',
-      headerBackTitle: 'Back',
-      headerRight: () => (
-        <MaterialCommunityIcons
-          name="refresh"
-          size={24}
-          color="#428cff"
-          onPress={reset}
-        />
-      ),
-    });
-  }, [navigation]);
+  useNavigationBarTitleResetOption('Close Database', navigation, reset);
 
   function reset() {
     setDatabaseName('');
     setResultsMessage([]);
   }
 
   const update = async () => {
-    // validate that the database name isn't blank
-    // and see if the database is in context, if so throw error
-    // otherwise get a pointer to the database, open it, and add to the context
     if (databaseName === '') {
       setResultsMessage((prev) => [
         ...prev,
@@ -55,9 +39,10 @@ export default function DatabaseCloseScreen() {
 
   return (
     <View style={styles.container}>
-      <DatabaseNameForm
+      <DatabaseNameActionForm
         setDatabaseName={setDatabaseName}
         databaseName={databaseName}
+        handleUpdatePressed={update}
       />
       <ResultListView messages={resultMessage} />
     </View>

expo-example/app/database/delete.tsx

@@ -2,32 +2,20 @@ import React, { useContext, useLayoutEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useStyleScheme } from '@/components/Themed';
-import DatabaseNameForm from '@/components/DatabaseNameForm';
-import MaterialCommunityIcons from '@expo/vector-icons/build/MaterialCommunityIcons';
+import DatabaseNameActionForm from '@/components/DatabaseNameActionForm';
 import ResultListView from '@/components/ResultsListView';
 import deleteDatabase from '@/service/database/deleteDatabase';
 import DatabaseContext from '@/providers/DatabaseContext';
 
+import useNavigationBarTitleResetOption from '@/hooks/useNavigationBarTitleResetOption';
+
 export default function DatabaseDeleteScreen() {
   const { databases, setDatabases } = useContext(DatabaseContext)!;
   const [databaseName, setDatabaseName] = useState<string>('');
   const [resultMessage, setResultsMessage] = useState<string[]>([]);
   const navigation = useNavigation();
   const styles = useStyleScheme();
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      title: 'Database Open',
-      headerBackTitle: 'Back',
-      headerRight: () => (
-        <MaterialCommunityIcons
-          name="refresh"
-          size={24}
-          color="#428cff"
-          onPress={reset}
-        />
-      ),
-    });
-  }, [navigation]);
+  useNavigationBarTitleResetOption('Delete Database', navigation, reset);
 
   function reset() {
     setDatabaseName('');
@@ -45,7 +33,11 @@ export default function DatabaseDeleteScreen() {
       ]);
     } else {
       try {
-        const results = await deleteDatabase(databases, databaseName);
+        const results = await deleteDatabase(
+          databases,
+          setDatabases,
+          databaseName
+        );
         setResultsMessage((prev) => [...prev, results]);
       } catch (error) {
         setResultsMessage((prev) => [...prev, '' + error]);
@@ -55,9 +47,10 @@ export default function DatabaseDeleteScreen() {
 
   return (
     <View style={styles.container}>
-      <DatabaseNameForm
+      <DatabaseNameActionForm
         setDatabaseName={setDatabaseName}
         databaseName={databaseName}
+        handleUpdatePressed={update}
       />
       <ResultListView messages={resultMessage} />
     </View>

expo-example/components/DatabaseNameActionForm.tsx

@@ -0,0 +1,36 @@
+import DatabaseToolbarHeaderView from '@/components/DatabaseToolbarHeaderView';
+import { TextInput, useColorScheme } from 'react-native';
+import React from 'react';
+import { useStyleScheme, useThemeColor } from '@/components/Themed';
+import { usePlaceholderTextColor } from '@/hooks/usePlaceholderTextColor';
+import { DatabaseNameActionFormProps } from '@/types/databaseNameActionFormProps.type';
+
+export default function DatabaseNameActionForm({
+  databaseName,
+  setDatabaseName,
+  handleUpdatePressed,
+}: DatabaseNameActionFormProps) {
+  const scheme = useColorScheme();
+  const styles = useStyleScheme();
+  const textColor = useThemeColor({ light: 'black', dark: 'white' }, 'text');
+  const placeholderTextColor = usePlaceholderTextColor(scheme);
+  const icons = [
+    {
+      iconName: 'play',
+      onPress: handleUpdatePressed,
+    },
+  ];
+  return (
+    <>
+      <DatabaseToolbarHeaderView icons={icons} />
+      <TextInput
+        autoCapitalize="none"
+        style={[styles.textInput, { color: textColor }]}
+        placeholder="Database Name"
+        placeholderTextColor={placeholderTextColor}
+        onChangeText={(newText) => setDatabaseName(newText)}
+        defaultValue={databaseName}
+      />
+    </>
+  );
+}

expo-example/components/DatabaseToolbarHeaderView.tsx

@@ -0,0 +1,6 @@
+import HeaderToolbarView from '@/components/HeaderToolbarView';
+import { ToolbarViewProps } from '@/types/toolbarViewProps.type';
+
+export default function DatabaseHeaderView({ icons }: ToolbarViewProps) {
+  return HeaderToolbarView({ name: 'Database', iconName: 'database', icons });
+}

expo-example/hooks/useNavigationBarTitleResetOption.tsx

@@ -0,0 +1,27 @@
+// Custom hook to set reset icon in navigation header
+import React from 'react';
+import { useLayoutEffect } from 'react';
+import MaterialCommunityIcons from '@expo/vector-icons/build/MaterialCommunityIcons';
+
+const useNavigationBarTitleResetOption = (
+  title: string,
+  navigation: any,
+  reset: () => void
+) => {
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      title: title,
+      headerBackTitle: 'Back',
+      headerRight: () => (
+        <MaterialCommunityIcons
+          name="refresh"
+          size={24}
+          color="#428cff"
+          onPress={reset}
+        />
+      ),
+    });
+  }, [navigation, reset, title]);
+};
+
+export default useNavigationBarTitleResetOption;