114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
import React, { useState, useRef, useEffect } from "react";
|
|
import { View, Dimensions } from "react-native";
|
|
import { useRouter, useLocalSearchParams } from "expo-router";
|
|
import {
|
|
tw,
|
|
useManualRefresh,
|
|
useMarkDataFetchers,
|
|
MyFlatList,
|
|
MyText,
|
|
SearchBar,
|
|
} from "common-ui";
|
|
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
|
import { trpc } from "@/src/trpc-client";
|
|
import ProductCard from "@/components/ProductCard";
|
|
import FloatingCartBar from "@/components/floating-cart-bar";
|
|
|
|
const { width: screenWidth } = Dimensions.get("window");
|
|
const itemWidth = (screenWidth - 48) / 2;
|
|
|
|
export default function SearchResults() {
|
|
const router = useRouter();
|
|
const { q } = useLocalSearchParams();
|
|
const query = (q as string) || "";
|
|
const [inputQuery, setInputQuery] = useState(query);
|
|
const [searchQuery, setSearchQuery] = useState(query);
|
|
const searchInputRef = useRef<any>(null);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
searchInputRef.current?.focus();
|
|
}, 100);
|
|
}, []);
|
|
|
|
const { data: productsData, isLoading, error, refetch } =
|
|
trpc.common.product.getAllProductsSummary.useQuery({
|
|
searchQuery: searchQuery || undefined,
|
|
});
|
|
|
|
const products = productsData?.products || [];
|
|
|
|
useManualRefresh(() => {
|
|
refetch();
|
|
});
|
|
|
|
useMarkDataFetchers(() => {
|
|
refetch();
|
|
});
|
|
|
|
const handleSearch = () => {
|
|
setSearchQuery(inputQuery);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={tw`flex-1 justify-center items-center bg-gray-50`}>
|
|
<MyText style={tw`text-gray-500 font-medium`}>Loading products...</MyText>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<View style={tw`flex-1 justify-center items-center bg-gray-50`}>
|
|
<MaterialIcons name="error-outline" size={48} color="#EF4444" />
|
|
<MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
|
|
<MyText style={tw`text-gray-500 mt-2`}>Failed to load products</MyText>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={tw`flex-1 bg-gray-50`}>
|
|
<MyFlatList
|
|
data={products}
|
|
numColumns={2}
|
|
renderItem={({ item }) => (
|
|
<ProductCard
|
|
item={item}
|
|
itemWidth={itemWidth}
|
|
onPress={() =>
|
|
router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)
|
|
}
|
|
showDeliveryInfo={false}
|
|
useAddToCartDialog={true}
|
|
/>
|
|
)}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
columnWrapperStyle={{ gap: 16, justifyContent: "center" }}
|
|
contentContainerStyle={[tw`pb-24`, { gap: 16 }]}
|
|
ListHeaderComponent={
|
|
<View style={tw`pt-4 pb-2 px-4`}>
|
|
<SearchBar
|
|
ref={searchInputRef}
|
|
value={inputQuery}
|
|
onChangeText={setInputQuery}
|
|
onSubmitEditing={handleSearch}
|
|
returnKeyType="search"
|
|
/>
|
|
<View style={tw`flex-row justify-between items-center mb-2`}>
|
|
<MyText style={tw`text-lg font-bold text-gray-900`}>
|
|
{searchQuery
|
|
? `Search Results for "${searchQuery}"`
|
|
: "All Products"}
|
|
</MyText>
|
|
</View>
|
|
</View>
|
|
}
|
|
/>
|
|
<View style={tw`absolute bottom-2 left-4 right-4`}>
|
|
<FloatingCartBar />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|