Skip to content

Commit 75659dd

Browse files
mugikhanmugikhan
committed
Cleanup
1 parent dda87d9 commit 75659dd

File tree

5 files changed

+95
-96
lines changed

5 files changed

+95
-96
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { Stack } from 'expo-router';
1+
import { router, Stack } from 'expo-router';
22
import React, { useMemo } from 'react';
33
import { useSystem } from '../library/powersync/system';
44
import { PowerSyncContext } from '@powersync/react-native';
5+
import { Pressable } from 'react-native';
6+
import { MaterialIcons } from '@expo/vector-icons';
57

68
/**
79
* This App uses a nested navigation stack.
@@ -33,6 +35,15 @@ const HomeLayout = () => {
3335
<Stack.Screen
3436
name="search_modal"
3537
options={{
38+
headerTitle: 'Search',
39+
headerRight: () => (
40+
<Pressable
41+
onPress={() => {
42+
router.back();
43+
}}>
44+
<MaterialIcons name="close" color="#fff" size={24} />
45+
</Pressable>
46+
),
3647
presentation: 'fullScreenModal'
3748
}}
3849
/>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { Stack } from 'expo-router';
21
import { StatusBar } from 'expo-status-bar';
3-
import { StyleSheet, Text, View } from 'react-native';
2+
import { StyleSheet, View } from 'react-native';
43
import { SearchBarWidget } from '../library/widgets/SearchBarWidget';
54

65
export default function Modal() {
76
return (
87
<View style={styles.container}>
98
<SearchBarWidget />
10-
119
<StatusBar style={'light'} />
1210
</View>
1311
);

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

Lines changed: 51 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,71 @@
1-
import { View, StyleSheet, TouchableOpacity } from 'react-native';
2-
import { Card, Input, ListItem, Text } from '@rneui/themed';
1+
import { View, StyleSheet } from 'react-native';
2+
import { Input, ListItem } from '@rneui/themed';
33
import React, { useState } from 'react';
4-
import { router } from 'expo-router';
4+
import { IconNode } from '@rneui/base';
55

66
export interface AutocompleteWidgetProps {
7-
origValue: string;
8-
label?: string;
97
data: any[];
108
onChange: (value: string) => void;
11-
// origOnChange: (value: string) => void;
12-
icon?: string;
13-
style?: object;
14-
menuStyle?: object;
15-
right?: object;
16-
left?: object;
9+
placeholder?: string;
10+
onPress: (id: string) => void;
11+
leftIcon?: IconNode;
1712
}
1813

19-
export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({
20-
origValue,
21-
label,
22-
data,
23-
onChange,
24-
// origOnChange,
25-
icon,
26-
style,
27-
menuStyle,
28-
right,
29-
left
30-
}) => {
31-
const [value, setValue] = useState(origValue);
14+
export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({ data, onChange, placeholder, onPress, leftIcon }) => {
15+
const [value, setValue] = useState('');
3216
const [menuVisible, setMenuVisible] = useState(false);
33-
const [filteredData, setFilteredData] = useState<any[]>([]);
3417

35-
const filterData = (text: string) => {
36-
return data.filter((val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1);
37-
};
3818
return (
39-
<View style={{ flexDirection: 'column', flex: 1, flexGrow: 1 }}>
40-
<View style={{ flexDirection: 'row', flex: 0 }}>
19+
<View style={styles.container}>
20+
<View style={styles.inputContainer}>
4121
<Input
4222
onFocus={() => {
43-
if (value.length === 0) {
23+
if (value?.length === 0) {
4424
setMenuVisible(true);
4525
}
4626
}}
27+
leftIcon={leftIcon}
28+
placeholder={placeholder}
4729
onBlur={() => setMenuVisible(false)}
48-
label={label}
49-
// right={right}
50-
// left={left}
51-
// style={styles.input}
30+
underlineColorAndroid={'transparent'}
31+
inputContainerStyle={{ borderBottomWidth: 0 }}
5232
onChangeText={(text) => {
53-
// origOnChange(text);
5433
onChange(text);
55-
// if (text && text.length > 0) {
56-
// setFilteredData(filterData(text));
57-
// } else if (text && text.length === 0) {
58-
// setFilteredData(data);
59-
// }
6034
setMenuVisible(true);
6135
setValue(text);
6236
}}
63-
// value={value}
37+
containerStyle={{
38+
borderColor: 'black',
39+
borderWidth: 1,
40+
borderRadius: 4,
41+
height: 48,
42+
backgroundColor: 'white'
43+
}}
6444
/>
6545
</View>
6646
{menuVisible && (
67-
<View
68-
style={{
69-
flex: 2,
70-
flexGrow: 1,
71-
flexDirection: 'column'
72-
}}>
47+
<View style={styles.menuContainer}>
7348
{data.map((val, index) => (
74-
<TouchableOpacity
49+
<ListItem
50+
bottomDivider
7551
key={index}
7652
onPress={() => {
77-
router.push({
78-
pathname: 'views/todos/edit/[id]',
79-
params: { id: val.id }
80-
});
81-
}}>
82-
<Card style={{ display: 'flex', width: '100%' }}>
83-
{val.listName && <Text style={{ fontSize: 18 }}>{val.listName}</Text>}
53+
setMenuVisible(false);
54+
onPress(val.id);
55+
}}
56+
style={{ paddingBottom: 8 }}>
57+
<ListItem.Content>
58+
{val.listName && (
59+
<ListItem.Title style={{ fontSize: 18, color: 'black' }}>{val.listName}</ListItem.Title>
60+
)}
8461
{val.todoName && (
85-
<Text style={{ fontSize: 14 }}>
62+
<ListItem.Subtitle style={{ fontSize: 14, color: 'grey' }}>
8663
{'\u2022'} {val.todoName}
87-
</Text>
64+
</ListItem.Subtitle>
8865
)}
89-
</Card>
90-
</TouchableOpacity>
91-
// <ListItem
92-
// // key={i}
93-
// style={[{ width: '100%' }]}
94-
// // icon={icon}
95-
// onPress={() => {
96-
// setValue(val);
97-
// setMenuVisible(false);
98-
// }}
99-
// // title={datum}
100-
// >
101-
// <ListItem.Content>
102-
// <ListItem.Title>{val}</ListItem.Title>
103-
// </ListItem.Content>
104-
// </ListItem>
66+
</ListItem.Content>
67+
<ListItem.Chevron />
68+
</ListItem>
10569
))}
10670
</View>
10771
)}
@@ -110,12 +74,20 @@ export const Autocomplete: React.FC<AutocompleteWidgetProps> = ({
11074
};
11175

11276
const styles = StyleSheet.create({
113-
input: {
114-
flexDirection: 'row',
77+
container: {
78+
flexDirection: 'column',
11579
flex: 1,
11680
flexGrow: 1,
117-
width: '100%',
118-
alignItems: 'center',
119-
justifyContent: 'flex-start'
81+
marginHorizontal: 8
82+
},
83+
inputContainer: {
84+
flexDirection: 'row',
85+
flex: 0,
86+
marginVertical: 8
87+
},
88+
menuContainer: {
89+
flex: 2,
90+
flexGrow: 1,
91+
flexDirection: 'column'
12092
}
12193
});

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Icon, Header } from '@rneui/themed';
55
import { useStatus } from '@powersync/react';
66
import { DrawerActions } from '@react-navigation/native';
77
import { useSystem } from '../powersync/system';
8+
import { usePathname } from 'expo-router';
89

910
export const HeaderWidget: React.FC<{
1011
title?: string;
@@ -15,6 +16,8 @@ export const HeaderWidget: React.FC<{
1516
const status = useStatus();
1617

1718
const { title } = props;
19+
20+
const pathName = usePathname();
1821
return (
1922
<Header
2023
leftComponent={
@@ -30,15 +33,17 @@ export const HeaderWidget: React.FC<{
3033
}
3134
rightComponent={
3235
<View style={styles.headerRight}>
33-
<Icon
34-
name="search"
35-
type="material"
36-
color="white"
37-
size={24}
38-
onPress={() => {
39-
router.push('search_modal');
40-
}}
41-
/>
36+
{pathName.includes('lists') && (
37+
<Icon
38+
name="search"
39+
type="material"
40+
color="white"
41+
size={24}
42+
onPress={() => {
43+
router.push('search_modal');
44+
}}
45+
/>
46+
)}
4247
<Icon
4348
name={status.connected ? 'wifi' : 'wifi-off'}
4449
type="material-community"

‎demos/react-native-supabase-todolist/library/widgets/SearchBarWidget.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,13 @@ import React from 'react';
33
import { usePowerSync } from '@powersync/react';
44
import { Autocomplete } from './AutoCompleteWidget';
55
import { SearchResult, searchTable } from '../fts/fts_helpers';
6-
import { LIST_TABLE, TODO_TABLE, ListRecord } from '../powersync/AppSchema';
6+
import { LIST_TABLE, ListRecord } from '../powersync/AppSchema';
7+
import { router } from 'expo-router';
78

89
// This is a simple search bar widget that allows users to search for lists and todo items
910
export const SearchBarWidget: React.FC<any> = () => {
1011
const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
11-
const [value, setValue] = React.useState<SearchResult | null>(null);
1212

13-
// const navigate = useNavigate();
1413
const powersync = usePowerSync();
1514

1615
const handleInputChange = async (value: string) => {
@@ -36,5 +35,19 @@ export const SearchBarWidget: React.FC<any> = () => {
3635
}
3736
};
3837

39-
return <Autocomplete origValue="" data={searchResults} onChange={handleInputChange} />;
38+
return (
39+
<Autocomplete
40+
data={searchResults}
41+
onChange={handleInputChange}
42+
placeholder="Search"
43+
leftIcon={{ type: 'material-community', name: 'magnify' }}
44+
onPress={(id) => {
45+
router.back();
46+
router.push({
47+
pathname: 'views/todos/edit/[id]',
48+
params: { id: id }
49+
});
50+
}}
51+
/>
52+
);
4053
};

0 commit comments

Comments
 (0)