Merge pull request #4111 from openmsupply/#4092-realm-explorer-crashes

Fix realm explorer crash

src/pages/RealmExplorer.js

@@ -4,16 +4,19 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { View, VirtualizedList, Text, StyleSheet } from 'react-native';
+import { View, VirtualizedList, Text, StyleSheet, ToastAndroid } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { UIDatabase } from '../database/index';
 import { schema } from '../database/schema';
+import { useDebounce } from '../hooks/useDebounce';
 
 import { SearchBar } from '../widgets';
 
 import globalStyles from '../globalStyles';
 
+const DEBOUNCE_TIMEOUT = 750;
+
 const TYPES = {
   BOOLEAN: 'boolean',
   DATE: 'date',
@@ -58,8 +61,6 @@ const parseType = realmType => {
   return typeMapper.get(realmType) || TYPES.OBJECT;
 };
 
-const getRealmObjects = ({ schema: objectSchemas }) => objectSchemas.map(({ name }) => name);
-
 const getRealmObjectsFields = ({ schema: objectSchemas }) =>
   objectSchemas
     .map(({ schema: objectSchema }) => {
@@ -73,8 +74,8 @@ const getRealmObjectsFields = ({ schema: objectSchemas }) =>
     })
     .reduce((acc, object) => ({ ...acc, ...object }));
 
-const REALM_OBJECTS = getRealmObjects(schema);
 const REALM_OBJECTS_FIELDS = getRealmObjectsFields(schema);
+const REALM_OBJECTS = Object.keys(REALM_OBJECTS_FIELDS);
 
 const toCapitalCase = value => value.charAt(0).toUpperCase() + value.slice(1);
 
@@ -114,18 +115,25 @@ const getInitialState = () => {
 };
 
 const updateSearchData = (newSearchString, state) => {
-  const { searchString } = state;
-  const updateObjectString = newSearchString !== searchString;
-  if (!updateObjectString) return { ...state };
-  const updateObject = REALM_OBJECTS.indexOf(newSearchString) >= 0;
-  const newSearchData = updateObject ? UIDatabase.objects(newSearchString) : {};
-  const newFilteredData = updateObject ? newSearchData.slice() : [];
-  return {
-    ...state,
-    searchString: newSearchString,
-    searchData: newSearchData,
-    filteredData: newFilteredData,
-  };
+  try {
+    const { searchString } = state;
+    const updateObjectString = newSearchString !== searchString;
+    // Some single characters are returning true for 'REALM_OBJECTS.indexOf(newSearchString) >= 0;'
+    // there are no database objects with names shorter than 3 chars; so just skip those
+    if (!updateObjectString || newSearchString.length < 3) return { ...state };
+    const updateObject = REALM_OBJECTS.indexOf(newSearchString) >= 0;
+    const newSearchData = updateObject ? UIDatabase.objects(newSearchString) : {};
+    const newFilteredData = updateObject ? newSearchData.slice() : [];
+    return {
+      ...state,
+      searchString: newSearchString,
+      searchData: newSearchData,
+      filteredData: newFilteredData,
+    };
+  } catch (e) {
+    ToastAndroid.show(`Error! ${e.message}`, ToastAndroid.LONG);
+    return { ...state };
+  }
 };
 
 const getSearchBarRenderer = onSearchChange => {
@@ -222,11 +230,17 @@ export const RealmExplorer = () => {
   const [state, setState] = useState(getInitialState());
 
   const onSearchChange = useCallback(
-    newObjectString => setState(prevState => updateSearchData(newObjectString, prevState)),
+    useDebounce(
+      newObjectString => setState(prevState => updateSearchData(newObjectString, prevState)),
+      DEBOUNCE_TIMEOUT
+    ),
     []
   );
   const onFilterChange = useCallback(
-    newFilterString => setState(prevState => updateFilteredData(newFilterString, prevState)),
+    useDebounce(
+      newFilterString => setState(prevState => updateFilteredData(newFilterString, prevState)),
+      DEBOUNCE_TIMEOUT
+    ),
     []
   );