Deactivate search for now
This commit is contained in:
Arthur Belleville
parent
b20e08c316
commit
a847b59c12
1 changed files with 283 additions and 21 deletions
|
|
@ -1,17 +1,17 @@
|
|||
import { router } from "expo-router";
|
||||
import { ChannelList } from "stream-chat-expo";
|
||||
import { ChannelSort } from "stream-chat";
|
||||
import { ChannelSort, Channel } from "stream-chat";
|
||||
import { useUser } from "@/providers/UserProvider";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
StatusBar,
|
||||
} from "react-native";
|
||||
import { View, Text, StyleSheet, StatusBar } from "react-native";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { Search } from "lucide-react-native";
|
||||
import React from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import {
|
||||
useSharedValue,
|
||||
useAnimatedStyle,
|
||||
interpolate,
|
||||
Extrapolate,
|
||||
} from "react-native-reanimated";
|
||||
import { useTablosList } from "@/hooks/tablos";
|
||||
import { ColorMap } from "@/constants/colors";
|
||||
import { UserTablo } from "@/types/tablos.types";
|
||||
|
|
@ -21,7 +21,7 @@ const CustomChannelAvatar = ({
|
|||
channel,
|
||||
tablos,
|
||||
}: {
|
||||
channel: any;
|
||||
channel: Channel;
|
||||
tablos: UserTablo[];
|
||||
}) => {
|
||||
const tabloId = channel?.id || "";
|
||||
|
|
@ -108,25 +108,170 @@ const CustomChannelAvatar = ({
|
|||
);
|
||||
};
|
||||
|
||||
// Custom Title Component for bigger channel names
|
||||
const CustomChannelTitle = ({ channel }: { channel: Channel }) => {
|
||||
const channelName = channel?.data?.name || channel?.id || "Channel";
|
||||
|
||||
return (
|
||||
<Text style={styles.customChannelTitle} numberOfLines={1}>
|
||||
{channelName}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HomeScreen() {
|
||||
const user = useUser();
|
||||
const { data: tablos } = useTablosList();
|
||||
|
||||
const filters = {
|
||||
members: { $in: [user.id] },
|
||||
type: "messaging",
|
||||
};
|
||||
// Search animation state
|
||||
// const [isSearchVisible, setIsSearchVisible] = useState(false);
|
||||
// const [searchQuery, setSearchQuery] = useState("");
|
||||
// const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
|
||||
const searchAnimation = useSharedValue(0);
|
||||
// const searchInputRef = useRef<TextInput>(null);
|
||||
|
||||
// // Debounce search query for better performance
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// setDebouncedSearchQuery(searchQuery);
|
||||
// }, 300);
|
||||
|
||||
// return () => clearTimeout(timer);
|
||||
// }, [searchQuery]);
|
||||
|
||||
// Create filters based on search query
|
||||
const filters = useMemo(() => {
|
||||
const baseFilters = {
|
||||
members: { $in: [user.id] },
|
||||
type: "messaging",
|
||||
};
|
||||
|
||||
// Add name filter when searching
|
||||
// if (debouncedSearchQuery.trim()) {
|
||||
// return {
|
||||
// ...baseFilters,
|
||||
// name: { $autocomplete: debouncedSearchQuery.trim() },
|
||||
// };
|
||||
// }
|
||||
|
||||
return baseFilters;
|
||||
}, [user.id]);
|
||||
|
||||
const sort: ChannelSort = { last_updated: -1 };
|
||||
const options = {
|
||||
state: true,
|
||||
watch: true,
|
||||
limit: 20,
|
||||
};
|
||||
|
||||
// Create a wrapper component for the avatar that has access to tablos data
|
||||
const AvatarWithTablos = ({ channel }: { channel: any }) => (
|
||||
const AvatarWithTablos = ({ channel }: { channel: Channel }) => (
|
||||
<CustomChannelAvatar channel={channel} tablos={tablos || []} />
|
||||
);
|
||||
|
||||
// Toggle search animation
|
||||
// const toggleSearch = () => {
|
||||
// const toValue = isSearchVisible ? 0 : 1;
|
||||
|
||||
// searchAnimation.value = withTiming(toValue, {
|
||||
// duration: 300,
|
||||
// });
|
||||
|
||||
// if (toValue === 1) {
|
||||
// // Focus input when animation starts
|
||||
// setTimeout(() => searchInputRef.current?.focus(), 150);
|
||||
// } else {
|
||||
// // Clear search when hiding
|
||||
// setSearchQuery("");
|
||||
// setDebouncedSearchQuery("");
|
||||
// }
|
||||
|
||||
// setIsSearchVisible(!isSearchVisible);
|
||||
// };
|
||||
|
||||
// Close search when keyboard is dismissed
|
||||
// useEffect(() => {
|
||||
// const keyboardDidHideListener = Keyboard.addListener(
|
||||
// "keyboardDidHide",
|
||||
// () => {
|
||||
// if (isSearchVisible && searchQuery === "") {
|
||||
// toggleSearch();
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// return () => {
|
||||
// keyboardDidHideListener?.remove();
|
||||
// };
|
||||
// }, [isSearchVisible, searchQuery]);
|
||||
|
||||
// Animated styles using react-native-reanimated
|
||||
const animatedSearchStyle = useAnimatedStyle(() => {
|
||||
const height = interpolate(
|
||||
searchAnimation.value,
|
||||
[0, 1],
|
||||
[0, 80],
|
||||
Extrapolate.CLAMP
|
||||
);
|
||||
|
||||
const opacity = interpolate(
|
||||
searchAnimation.value,
|
||||
[0, 0.5, 1],
|
||||
[0, 0, 1],
|
||||
Extrapolate.CLAMP
|
||||
);
|
||||
|
||||
return {
|
||||
height,
|
||||
opacity,
|
||||
};
|
||||
});
|
||||
|
||||
// Simple search header component - no memoization
|
||||
// const SearchHeader = () => (
|
||||
// <Animated.View style={[styles.searchHeaderContainer, animatedSearchStyle]}>
|
||||
// <View style={styles.searchInputContainer}>
|
||||
// <Search size={18} color="#6b7280" style={styles.searchIcon} />
|
||||
// <TextInput
|
||||
// ref={searchInputRef}
|
||||
// style={styles.searchInput}
|
||||
// placeholder="Rechercher une conversation..."
|
||||
// placeholderTextColor="#9ca3af"
|
||||
// value={searchQuery}
|
||||
// onChangeText={setSearchQuery}
|
||||
// returnKeyType="search"
|
||||
// autoCapitalize="none"
|
||||
// autoCorrect={false}
|
||||
// onSubmitEditing={() => {
|
||||
// console.log("Searching for:", searchQuery);
|
||||
// Keyboard.dismiss();
|
||||
// }}
|
||||
// />
|
||||
// {searchQuery.length > 0 && (
|
||||
// <TouchableOpacity
|
||||
// onPress={() => {
|
||||
// setSearchQuery("");
|
||||
// setDebouncedSearchQuery("");
|
||||
// searchInputRef.current?.focus();
|
||||
// }}
|
||||
// style={styles.clearButton}
|
||||
// >
|
||||
// <X size={16} color="#6b7280" />
|
||||
// </TouchableOpacity>
|
||||
// )}
|
||||
// </View>
|
||||
|
||||
// {/* Search Results Info */}
|
||||
// {debouncedSearchQuery.trim() && (
|
||||
// <View style={styles.searchInfoContainer}>
|
||||
// <Text style={styles.searchInfoText}>
|
||||
// Recherche: "{debouncedSearchQuery}"
|
||||
// </Text>
|
||||
// </View>
|
||||
// )}
|
||||
// </Animated.View>
|
||||
// );
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
|
|
@ -143,31 +288,77 @@ export default function HomeScreen() {
|
|||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.headerTitle}>Discussions</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
{/* {debouncedSearchQuery.trim()
|
||||
? `Recherche: "${debouncedSearchQuery}"`
|
||||
: "Gérez les conversations de vos tablos"} */}
|
||||
Gérez les conversations de vos tablos
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity style={styles.searchButton}>
|
||||
<Search size={20} color="#3b82f6" />
|
||||
</TouchableOpacity>
|
||||
{/* <TouchableOpacity
|
||||
style={styles.searchButton}
|
||||
onPress={toggleSearch}
|
||||
>
|
||||
{isSearchVisible ? (
|
||||
<X size={20} color="#3b82f6" />
|
||||
) : (
|
||||
<Search size={20} color="#3b82f6" />
|
||||
)}
|
||||
</TouchableOpacity> */}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Decorative Elements
|
||||
{/* Decorative Elements */}
|
||||
<View style={styles.decorativeCircle1} />
|
||||
<View style={styles.decorativeCircle2} /> */}
|
||||
<View style={styles.decorativeCircle2} />
|
||||
</LinearGradient>
|
||||
|
||||
{/* Channel List */}
|
||||
{/* Channel List with animated search */}
|
||||
<View style={styles.channelListContainer}>
|
||||
{/* <SearchHeader /> */}
|
||||
<ChannelList
|
||||
filters={filters}
|
||||
onSelect={(channel) => {
|
||||
// Close search when selecting a channel
|
||||
// if (isSearchVisible) {
|
||||
// toggleSearch();
|
||||
// }
|
||||
router.push(`/channel/${channel.cid}`);
|
||||
}}
|
||||
sort={sort}
|
||||
options={options}
|
||||
PreviewAvatar={AvatarWithTablos}
|
||||
PreviewTitle={CustomChannelTitle}
|
||||
// ListHeaderComponent={SearchHeader}
|
||||
// Show loading state during search
|
||||
LoadingIndicator={() => (
|
||||
<View style={styles.searchLoadingContainer}>
|
||||
<Text style={styles.searchLoadingText}>
|
||||
{/* {debouncedSearchQuery
|
||||
? "Recherche en cours..."
|
||||
: "Chargement..."} */}
|
||||
Chargement...
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
// Show empty state when no results
|
||||
EmptyStateIndicator={() => (
|
||||
<View style={styles.emptySearchContainer}>
|
||||
<Search size={48} color="#d1d5db" />
|
||||
<Text style={styles.emptySearchTitle}>
|
||||
{/* {debouncedSearchQuery
|
||||
? "Aucun résultat"
|
||||
: "Aucune conversation"} */}
|
||||
Aucune conversation
|
||||
</Text>
|
||||
<Text style={styles.emptySearchMessage}>
|
||||
{/* {debouncedSearchQuery
|
||||
? `Aucune conversation trouvée pour "${debouncedSearchQuery}"`
|
||||
: "Vous n'avez pas encore de conversations"} */}
|
||||
Vous n'avez pas encore de conversations
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
|
@ -393,4 +584,75 @@ const styles = StyleSheet.create({
|
|||
fontSize: 11,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
// Custom Channel Title Styles
|
||||
customChannelTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "#1f2937",
|
||||
},
|
||||
|
||||
// Search Header Styles
|
||||
searchHeaderContainer: {
|
||||
backgroundColor: "#f8fafc",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#e5e7eb",
|
||||
overflow: "hidden",
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
searchInputContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
marginTop: 15,
|
||||
},
|
||||
searchIcon: {
|
||||
marginRight: 10,
|
||||
},
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
color: "#374151",
|
||||
paddingVertical: 0,
|
||||
fontWeight: "500",
|
||||
},
|
||||
clearButton: {
|
||||
padding: 5,
|
||||
},
|
||||
searchInfoContainer: {
|
||||
paddingTop: 10,
|
||||
paddingBottom: 15,
|
||||
},
|
||||
searchInfoText: {
|
||||
fontSize: 14,
|
||||
color: "#6b7280",
|
||||
},
|
||||
searchLoadingContainer: {
|
||||
paddingVertical: 20,
|
||||
alignItems: "center",
|
||||
},
|
||||
searchLoadingText: {
|
||||
fontSize: 16,
|
||||
color: "#6b7280",
|
||||
},
|
||||
emptySearchContainer: {
|
||||
paddingVertical: 40,
|
||||
alignItems: "center",
|
||||
},
|
||||
emptySearchTitle: {
|
||||
fontSize: 20,
|
||||
color: "#4b5563",
|
||||
marginTop: 10,
|
||||
},
|
||||
emptySearchMessage: {
|
||||
fontSize: 16,
|
||||
color: "#6b7280",
|
||||
marginTop: 5,
|
||||
textAlign: "center",
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue