Feat: FTS for react native supabase demo

demos/react-native-supabase-todolist/app/_layout.tsx

@@ -1,7 +1,9 @@
-import { Stack } from 'expo-router';
+import { router, Stack } from 'expo-router';
 import React, { useMemo } from 'react';
 import { useSystem } from '../library/powersync/system';
 import { PowerSyncContext } from '@powersync/react-native';
+import { Pressable } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 
 /**
  * This App uses a nested navigation stack.
@@ -30,6 +32,21 @@ const HomeLayout = () => {
 
         <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="views" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="search_modal"
+          options={{
+            headerTitle: 'Search',
+            headerRight: () => (
+              <Pressable
+                onPress={() => {
+                  router.back();
+                }}>
+                <MaterialIcons name="close" color="#fff" size={24} />
+              </Pressable>
+            ),
+            presentation: 'fullScreenModal'
+          }}
+        />
       </Stack>
     </PowerSyncContext.Provider>
   );

demos/react-native-supabase-todolist/app/search_modal.tsx

@@ -0,0 +1,21 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, View } from 'react-native';
+import { SearchBarWidget } from '../library/widgets/SearchBarWidget';
+
+export default function Modal() {
+  return (
+    <View style={styles.container}>
+      <SearchBarWidget />
+      <StatusBar style={'light'} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

demos/react-native-supabase-todolist/library/fts/fts_helpers.ts

@@ -0,0 +1,39 @@
+import { system } from '../powersync/system';
+
+/**
+ * adding * to the end of the search term will match any word that starts with the search term
+ * e.g. searching bl will match blue, black, etc.
+ * consult FTS5 Full-text Query Syntax documentation for more options
+ * @param searchTerm
+ * @returns a modified search term with options.
+ */
+function createSearchTermWithOptions(searchTerm: string): string {
+  const searchTermWithOptions: string = `${searchTerm}*`;
+  return searchTermWithOptions;
+}
+
+/**
+ * Search the FTS table for the given searchTerm
+ * @param searchTerm
+ * @param tableName
+ * @returns results from the FTS table
+ */
+export async function searchTable(searchTerm: string, tableName: string): Promise<any[]> {
+  const searchTermWithOptions = createSearchTermWithOptions(searchTerm);
+  return await system.powersync.getAll(`SELECT * FROM fts_${tableName} WHERE fts_${tableName} MATCH ? ORDER BY rank`, [
+    searchTermWithOptions
+  ]);
+}
+
+//Used to display the search results in the autocomplete text field
+export class SearchResult {
+  id: string;
+  todoName: string | null;
+  listName: string;
+
+  constructor(id: string, listName: string, todoName: string | null = null) {
+    this.id = id;
+    this.listName = listName;
+    this.todoName = todoName;
+  }
+}

demos/react-native-supabase-todolist/library/fts/fts_setup.ts

@@ -0,0 +1,64 @@
+import { AppSchema } from '../powersync/AppSchema';
+import { ExtractType, generateJsonExtracts } from './helpers';
+import { system } from '../powersync/system';
+
+/**
+ * Create a Full Text Search table for the given table and columns
+ * with an option to use a different tokenizer otherwise it defaults
+ * to unicode61. It also creates the triggers that keep the FTS table
+ * and the PowerSync table in sync.
+ * @param tableName
+ * @param columns
+ * @param tokenizationMethod
+ */
+async function createFtsTable(tableName: string, columns: string[], tokenizationMethod = 'unicode61'): Promise<void> {
+  const internalName = AppSchema.tables.find((table) => table.name === tableName)?.internalName;
+  const stringColumns = columns.join(', ');
+
+  return await system.powersync.writeTransaction(async (tx) => {
+    // Add FTS table
+    await tx.execute(`
+      CREATE VIRTUAL TABLE IF NOT EXISTS fts_${tableName}
+      USING fts5(id UNINDEXED, ${stringColumns}, tokenize='${tokenizationMethod}');
+    `);
+    // Copy over records already in table
+    await tx.execute(`
+      INSERT OR REPLACE INTO fts_${tableName}(rowid, id, ${stringColumns})
+      SELECT rowid, id, ${generateJsonExtracts(ExtractType.columnOnly, 'data', columns)} FROM ${internalName};
+    `);
+    // Add INSERT, UPDATE and DELETE and triggers to keep fts table in sync with table
+    await tx.execute(`
+      CREATE TRIGGER IF NOT EXISTS fts_insert_trigger_${tableName} AFTER INSERT ON ${internalName}
+      BEGIN
+        INSERT INTO fts_${tableName}(rowid, id, ${stringColumns})
+        VALUES (
+          NEW.rowid,
+          NEW.id,
+          ${generateJsonExtracts(ExtractType.columnOnly, 'NEW.data', columns)}
+        );
+      END;
+    `);
+    await tx.execute(`
+      CREATE TRIGGER IF NOT EXISTS fts_update_trigger_${tableName} AFTER UPDATE ON ${internalName} BEGIN
+        UPDATE fts_${tableName}
+        SET ${generateJsonExtracts(ExtractType.columnInOperation, 'NEW.data', columns)}
+        WHERE rowid = NEW.rowid;
+      END;
+    `);
+    await tx.execute(`
+      CREATE TRIGGER IF NOT EXISTS fts_delete_trigger_${tableName} AFTER DELETE ON ${internalName} BEGIN
+        DELETE FROM fts_${tableName} WHERE rowid = OLD.rowid;
+      END;
+    `);
+  });
+}
+
+/**
+ * This is where you can add more methods to generate FTS tables in this demo
+ * that correspond to the tables in your schema and populate them
+ * with the data you would like to search on
+ */
+export async function configureFts(): Promise<void> {
+  await createFtsTable('lists', ['name'], 'porter unicode61');
+  await createFtsTable('todos', ['description', 'list_id']);
+}

demos/react-native-supabase-todolist/library/fts/helpers.ts

@@ -0,0 +1,36 @@
+type ExtractGenerator = (jsonColumnName: string, columnName: string) => string;
+
+export enum ExtractType {
+  columnOnly,
+  columnInOperation
+}
+
+type ExtractGeneratorMap = Map<ExtractType, ExtractGenerator>;
+
+function _createExtract(jsonColumnName: string, columnName: string): string {
+  return `json_extract(${jsonColumnName}, '$.${columnName}')`;
+}
+
+const extractGeneratorsMap: ExtractGeneratorMap = new Map<ExtractType, ExtractGenerator>([
+  [ExtractType.columnOnly, (jsonColumnName: string, columnName: string) => _createExtract(jsonColumnName, columnName)],
+  [
+    ExtractType.columnInOperation,
+    (jsonColumnName: string, columnName: string) => {
+      const extract = _createExtract(jsonColumnName, columnName);
+      return `${columnName} = ${extract}`;
+    }
+  ]
+]);
+
+export const generateJsonExtracts = (type: ExtractType, jsonColumnName: string, columns: string[]): string => {
+  const generator = extractGeneratorsMap.get(type);
+  if (generator == null) {
+    throw new Error('Unexpected null generator for key: $type');
+  }
+
+  if (columns.length == 1) {
+    return generator(jsonColumnName, columns[0]);
+  }
+
+  return columns.map((column) => generator(jsonColumnName, column)).join(', ');
+};

demos/react-native-supabase-todolist/library/powersync/system.ts

@@ -11,6 +11,7 @@ import { AppConfig } from '../supabase/AppConfig';
 import { SupabaseConnector } from '../supabase/SupabaseConnector';
 import { AppSchema } from './AppSchema';
 import { PhotoAttachmentQueue } from './PhotoAttachmentQueue';
+import { configureFts } from '../fts/fts_setup';
 
 Logger.useDefaults();
 
@@ -68,6 +69,10 @@ export class System {
     if (this.attachmentQueue) {
       await this.attachmentQueue.init();
     }
+
+    // Demo using SQLite Full-Text Search with PowerSync.
+    // See https://docs.powersync.com/usage-examples/full-text-search for more details
+    configureFts();
   }
 }
 

demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx

@@ -0,0 +1,93 @@
+import { View, StyleSheet } from 'react-native';
+import { Input, ListItem } from '@rneui/themed';
+import React, { useState } from 'react';
+import { IconNode } from '@rneui/base';
+
+export interface AutocompleteWidgetProps {
+  data: any[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  onPress: (id: string) => void;
+  leftIcon?: IconNode;
+}
+
+export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({ data, onChange, placeholder, onPress, leftIcon }) => {
+  const [value, setValue] = useState('');
+  const [menuVisible, setMenuVisible] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputContainer}>
+        <Input
+          onFocus={() => {
+            if (value?.length === 0) {
+              setMenuVisible(true);
+            }
+          }}
+          leftIcon={leftIcon}
+          placeholder={placeholder}
+          onBlur={() => setMenuVisible(false)}
+          underlineColorAndroid={'transparent'}
+          inputContainerStyle={{ borderBottomWidth: 0 }}
+          onChangeText={(text) => {
+            onChange(text);
+            setMenuVisible(true);
+            setValue(text);
+          }}
+          containerStyle={{
+            borderColor: 'black',
+            borderWidth: 1,
+            borderRadius: 4,
+            height: 48,
+            backgroundColor: 'white'
+          }}
+        />
+      </View>
+      {menuVisible && (
+        <View style={styles.menuContainer}>
+          {data.map((val, index) => (
+            <ListItem
+              bottomDivider
+              key={index}
+              onPress={() => {
+                setMenuVisible(false);
+                onPress(val.id);
+              }}
+              style={{ paddingBottom: 8 }}>
+              <ListItem.Content>
+                {val.listName && (
+                  <ListItem.Title style={{ fontSize: 18, color: 'black' }}>{val.listName}</ListItem.Title>
+                )}
+                {val.todoName && (
+                  <ListItem.Subtitle style={{ fontSize: 14, color: 'grey' }}>
+                    {'\u2022'} {val.todoName}
+                  </ListItem.Subtitle>
+                )}
+              </ListItem.Content>
+              <ListItem.Chevron />
+            </ListItem>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    flex: 1,
+    flexGrow: 1,
+    marginHorizontal: 8
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    flex: 0,
+    marginVertical: 8
+  },
+  menuContainer: {
+    flex: 2,
+    flexGrow: 1,
+    flexDirection: 'column'
+  }
+});

demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Alert, Text } from 'react-native';
-import { useNavigation } from 'expo-router';
+import { Alert, View, StyleSheet } from 'react-native';
+import { router, useNavigation } from 'expo-router';
 import { Icon, Header } from '@rneui/themed';
 import { useStatus } from '@powersync/react';
 import { DrawerActions } from '@react-navigation/native';
 import { useSystem } from '../powersync/system';
+import { usePathname } from 'expo-router';
 
 export const HeaderWidget: React.FC<{
   title?: string;
@@ -15,6 +16,8 @@ export const HeaderWidget: React.FC<{
   const status = useStatus();
 
   const { title } = props;
+
+  const pathName = usePathname();
   return (
     <Header
       leftComponent={
@@ -29,27 +32,48 @@ export const HeaderWidget: React.FC<{
         />
       }
       rightComponent={
-        <Icon
-          name={status.connected ? 'wifi' : 'wifi-off'}
-          type="material-community"
-          color="white"
-          size={20}
-          style={{ padding: 5 }}
-          onPress={() => {
-            if (system.attachmentQueue) {
-              system.attachmentQueue.trigger();
-            }
-            Alert.alert(
-              'Status',
-              `${status.connected ? 'Connected' : 'Disconnected'}. \nLast Synced at ${
-                status?.lastSyncedAt?.toISOString() ?? '-'
-              }\nVersion: ${powersync.sdkVersion}`
-            );
-          }}
-        />
+        <View style={styles.headerRight}>
+          {pathName.includes('lists') && (
+            <Icon
+              name="search"
+              type="material"
+              color="white"
+              size={24}
+              onPress={() => {
+                router.push('search_modal');
+              }}
+            />
+          )}
+          <Icon
+            name={status.connected ? 'wifi' : 'wifi-off'}
+            type="material-community"
+            color="white"
+            size={24}
+            style={{ padding: 5 }}
+            onPress={() => {
+              if (system.attachmentQueue) {
+                system.attachmentQueue.trigger();
+              }
+              Alert.alert(
+                'Status',
+                `${status.connected ? 'Connected' : 'Disconnected'}. \nLast Synced at ${
+                  status?.lastSyncedAt?.toISOString() ?? '-'
+                }\nVersion: ${powersync.sdkVersion}`
+              );
+            }}
+          />
+        </View>
       }
       centerContainerStyle={{ justifyContent: 'center', alignItems: 'center' }}
       centerComponent={{ text: title, style: { color: '#fff' } }}
     />
   );
 };
+
+const styles = StyleSheet.create({
+  headerRight: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});