Cleanup

powersync-ja · Dec 17, 2024 · 75659dd · 75659dd
1 parent dda87d9
commit 75659dd
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 96 deletions.
diff --git a/demos/react-native-supabase-todolist/app/_layout.tsx b/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.
@@ -33,6 +35,15 @@ const HomeLayout = () => {
         <Stack.Screen
           name="search_modal"
           options={{
+            headerTitle: 'Search',
+            headerRight: () => (
+              <Pressable
+                onPress={() => {
+                  router.back();
+                }}>
+                <MaterialIcons name="close" color="#fff" size={24} />
+              </Pressable>
+            ),
             presentation: 'fullScreenModal'
           }}
         />

diff --git a/demos/react-native-supabase-todolist/app/search_modal.tsx b/demos/react-native-supabase-todolist/app/search_modal.tsx
@@ -1,13 +1,11 @@
-import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+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>
   );

diff --git a/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx
@@ -1,107 +1,71 @@
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { Card, Input, ListItem, Text } from '@rneui/themed';
+import { View, StyleSheet } from 'react-native';
+import { Input, ListItem } from '@rneui/themed';
 import React, { useState } from 'react';
-import { router } from 'expo-router';
+import { IconNode } from '@rneui/base';
 
 export interface AutocompleteWidgetProps {
-  origValue: string;
-  label?: string;
   data: any[];
   onChange: (value: string) => void;
-  //   origOnChange: (value: string) => void;
-  icon?: string;
-  style?: object;
-  menuStyle?: object;
-  right?: object;
-  left?: object;
+  placeholder?: string;
+  onPress: (id: string) => void;
+  leftIcon?: IconNode;
 }
 
-export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({
-  origValue,
-  label,
-  data,
-  onChange,
-  //   origOnChange,
-  icon,
-  style,
-  menuStyle,
-  right,
-  left
-}) => {
-  const [value, setValue] = useState(origValue);
+export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({ data, onChange, placeholder, onPress, leftIcon }) => {
+  const [value, setValue] = useState('');
   const [menuVisible, setMenuVisible] = useState(false);
-  const [filteredData, setFilteredData] = useState<any[]>([]);
 
-  const filterData = (text: string) => {
-    return data.filter((val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1);
-  };
   return (
-    <View style={{ flexDirection: 'column', flex: 1, flexGrow: 1 }}>
-      <View style={{ flexDirection: 'row', flex: 0 }}>
+    <View style={styles.container}>
+      <View style={styles.inputContainer}>
         <Input
           onFocus={() => {
-            if (value.length === 0) {
+            if (value?.length === 0) {
               setMenuVisible(true);
             }
           }}
+          leftIcon={leftIcon}
+          placeholder={placeholder}
           onBlur={() => setMenuVisible(false)}
-          label={label}
-          // right={right}
-          // left={left}
-          //   style={styles.input}
+          underlineColorAndroid={'transparent'}
+          inputContainerStyle={{ borderBottomWidth: 0 }}
           onChangeText={(text) => {
-            //   origOnChange(text);
             onChange(text);
-            //   if (text && text.length > 0) {
-            //     setFilteredData(filterData(text));
-            //   } else if (text && text.length === 0) {
-            //     setFilteredData(data);
-            //   }
             setMenuVisible(true);
             setValue(text);
           }}
-          // value={value}
+          containerStyle={{
+            borderColor: 'black',
+            borderWidth: 1,
+            borderRadius: 4,
+            height: 48,
+            backgroundColor: 'white'
+          }}
         />
       </View>
       {menuVisible && (
-        <View
-          style={{
-            flex: 2,
-            flexGrow: 1,
-            flexDirection: 'column'
-          }}>
+        <View style={styles.menuContainer}>
           {data.map((val, index) => (
-            <TouchableOpacity
+            <ListItem
+              bottomDivider
               key={index}
               onPress={() => {
-                router.push({
-                  pathname: 'views/todos/edit/[id]',
-                  params: { id: val.id }
-                });
-              }}>
-              <Card style={{ display: 'flex', width: '100%' }}>
-                {val.listName && <Text style={{ fontSize: 18 }}>{val.listName}</Text>}
+                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 && (
-                  <Text style={{ fontSize: 14 }}>
+                  <ListItem.Subtitle style={{ fontSize: 14, color: 'grey' }}>
                     {'\u2022'} {val.todoName}
-                  </Text>
+                  </ListItem.Subtitle>
                 )}
-              </Card>
-            </TouchableOpacity>
-            // <ListItem
-            //   //   key={i}
-            //   style={[{ width: '100%' }]}
-            //   //   icon={icon}
-            //   onPress={() => {
-            //     setValue(val);
-            //     setMenuVisible(false);
-            //   }}
-            //   // title={datum}
-            // >
-            //   <ListItem.Content>
-            //     <ListItem.Title>{val}</ListItem.Title>
-            //   </ListItem.Content>
-            // </ListItem>
+              </ListItem.Content>
+              <ListItem.Chevron />
+            </ListItem>
           ))}
         </View>
       )}
@@ -110,12 +74,20 @@ export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({
 };
 
 const styles = StyleSheet.create({
-  input: {
-    flexDirection: 'row',
+  container: {
+    flexDirection: 'column',
     flex: 1,
     flexGrow: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
+    marginHorizontal: 8
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    flex: 0,
+    marginVertical: 8
+  },
+  menuContainer: {
+    flex: 2,
+    flexGrow: 1,
+    flexDirection: 'column'
   }
 });
diff --git a/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx
@@ -5,6 +5,7 @@ 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={
@@ -30,15 +33,17 @@ export const HeaderWidget: React.FC<{
       }
       rightComponent={
         <View style={styles.headerRight}>
-          <Icon
-            name="search"
-            type="material"
-            color="white"
-            size={24}
-            onPress={() => {
-              router.push('search_modal');
-            }}
-          />
+          {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"

diff --git a/demos/react-native-supabase-todolist/library/widgets/SearchBarWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/SearchBarWidget.tsx
@@ -3,14 +3,13 @@ import React from 'react';
 import { usePowerSync } from '@powersync/react';
 import { Autocomplete } from './AutoCompleteWidget';
 import { SearchResult, searchTable } from '../fts/fts_helpers';
-import { LIST_TABLE, TODO_TABLE, ListRecord } from '../powersync/AppSchema';
+import { LIST_TABLE, ListRecord } from '../powersync/AppSchema';
+import { router } from 'expo-router';
 
 // This is a simple search bar widget that allows users to search for lists and todo items
 export const SearchBarWidget: React.FC<any> = () => {
   const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
-  const [value, setValue] = React.useState<SearchResult | null>(null);
 
-  // const navigate = useNavigate();
   const powersync = usePowerSync();
 
   const handleInputChange = async (value: string) => {
@@ -36,5 +35,19 @@ export const SearchBarWidget: React.FC<any> = () => {
     }
   };
 
-  return <Autocomplete origValue="" data={searchResults} onChange={handleInputChange} />;
+  return (
+    <Autocomplete
+      data={searchResults}
+      onChange={handleInputChange}
+      placeholder="Search"
+      leftIcon={{ type: 'material-community', name: 'magnify' }}
+      onPress={(id) => {
+        router.back();
+        router.push({
+          pathname: 'views/todos/edit/[id]',
+          params: { id: id }
+        });
+      }}
+    />
+  );
 };