Fix table fields. Add loader

Author: Henus321

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sqlite-explorer",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Explorer for react-native-sqlite-storage library database inside react native app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

src/assets/reload.png

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+
+const AnimateState = {
+  start: 0,
+  end: 360,
+};
+
+const Loader = () => {
+  const value = useRef(new Animated.Value(AnimateState.start)).current;
+  const inputRange = [AnimateState.start, AnimateState.end];
+  const rotate = value.interpolate({
+    inputRange,
+    outputRange: [0 + 'deg', 360 + 'deg'],
+  });
+
+  useEffect(() => {
+    startAnimate();
+
+    return () => {
+      stopAnimate();
+    };
+  }, []);
+
+  const startAnimate = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(value, {
+          toValue: AnimateState.end,
+          useNativeDriver: false,
+          duration: 1000,
+          easing: Easing.linear,
+        }),
+      ])
+    ).start();
+  };
+
+  const stopAnimate = () => value.stopAnimation();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Animated.Image
+        source={require('../../assets/reload.png')}
+        style={{
+          transform: [{ rotate }],
+          justifyContent: 'center',
+          marginTop: 'auto',
+          marginBottom: 'auto',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+        }}
+      />
+    </View>
+  );
+};
+
+export default Loader;

src/components/Loader/index.tsx

@@ -6,12 +6,14 @@ import { GlobalStyles } from './styles';
 import Table from './components/Table';
 import Select from './components/Select';
 import DB from './models/DB';
+import Loader from './components/Loader';
 
 type SQLiteExplorerProps = {
   params: DBParamsType;
 };
 
 const SQLiteExplorer = ({ params }: SQLiteExplorerProps) => {
+  const [status, setStatus] = useState<'loading' | ''>('');
   const [signatures, setSignatures] = useState<TableSignature[]>([]);
   const [tableData, setTableData] = useState<TableSignature | null>(null);
   const [select, setSelect] = useState('');
@@ -33,6 +35,8 @@ const SQLiteExplorer = ({ params }: SQLiteExplorerProps) => {
   const loadBase = async () => {
     if (!DB) return;
 
+    setStatus('loading');
+
     try {
       await DB.open(params);
       setSignatures(
@@ -46,13 +50,19 @@ const SQLiteExplorer = ({ params }: SQLiteExplorerProps) => {
         'Не удалось открыть базу данных: ' + error.message
       );
     }
+
+    setStatus('');
   };
 
   const queryTableData = async (signature: TableSignature) => {
     if (!signature) return;
 
+    setStatus('loading');
+
     const signatureWithValues = await DB.insertValuesIntoSignature(signature);
     setTableData(signatureWithValues);
+
+    setStatus('');
   };
 
   const onActionSuccess = async (tableData: TableSignature) => {
@@ -75,9 +85,11 @@ const SQLiteExplorer = ({ params }: SQLiteExplorerProps) => {
         />
       </View>
 
-      {!!tableData ? (
+      {status === 'loading' && <Loader />}
+      {status !== 'loading' && !!tableData && (
         <Table tableData={tableData} onActionSuccess={onActionSuccess} />
-      ) : (
+      )}
+      {status !== 'loading' && !tableData && (
         <Text style={styles.StatusText}>Empty</Text>
       )}
     </View>

src/index.tsx

@@ -117,22 +117,36 @@ class Database {
   getTablesSignature = async (): Promise<TableSignature[] | null> => {
     try {
       let tableFields = await this.executeSql(`
-			SELECT * FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' AND name NOT LIKE 'android_%'`);
+		SELECT * FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' AND name NOT LIKE 'android_%'`);
 
       return formatObject<any>(tableFields).map((i) => {
         const createTableFields: string[] = i.sql
           .slice(i.sql.indexOf('(') + 1, i.sql.lastIndexOf(')'))
           .replace(/\t|\n/g, '')
+          .replace(/ *\([^)]*\) */g, '')
           .split(',');
 
         return {
           name: i.name,
           fields: createTableFields
-            .filter((field) => !field.toLowerCase().startsWith('foreign'))
-            .map((item) => ({
-              name: item.trim().split(' ')?.[0],
-              type: item.trim().split(' ').slice(1).join(' '),
-            })),
+            .filter((field) => {
+              const lField = field.toLowerCase().trim();
+
+              if (
+                lField.startsWith('foreign key') ||
+                lField.startsWith('primary key') ||
+                lField.startsWith('constraint')
+              )
+                return false;
+
+              return true;
+            })
+            .map((item) => {
+              return {
+                name: item.trim().split(' ')?.[0],
+                type: item.trim().split(' ').slice(1).join(' '),
+              };
+            }),
           foreignKeys: createTableFields.filter((field) =>
             field.toLowerCase().startsWith('foreign')
           ),