fitst commit
This commit is contained in:
Samandar Turgunboyev
315
components/ui/CompanyList.tsx
Normal file
315
components/ui/CompanyList.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import { BASE_URL } from '@/api/URLs';
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { products_api } from '@/screens/home/lib/api';
|
||||
import { CompanyResponse } from '@/screens/home/lib/types';
|
||||
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { Building2, ChevronRight, MapPin, Package } from 'lucide-react-native';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||||
|
||||
export default function CompanyList({ query }: { query: string }) {
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
|
||||
const [selectedCompany, setSelectedCompany] = useState<CompanyResponse | null>(null);
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['company-list', query],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const response = await products_api.getCompany({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
search: query,
|
||||
});
|
||||
return response.data.data;
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const allCompanies = data?.pages.flatMap((page) => page.results) ?? [];
|
||||
|
||||
const handlePresentModal = useCallback((company: CompanyResponse) => {
|
||||
setSelectedCompany(company);
|
||||
bottomSheetModalRef.current?.present();
|
||||
}, []);
|
||||
|
||||
const renderBackdrop = useCallback(
|
||||
(props: any) => (
|
||||
<BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.5} />
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#3b82f6" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<Text style={{ color: '#f87171' }}>{t('Xatolik yuz berdi')}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FlatList
|
||||
data={allCompanies}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => handlePresentModal(item)}
|
||||
>
|
||||
<View style={styles.cardHeader}>
|
||||
<Building2 size={22} color="#3b82f6" />
|
||||
<Text style={[styles.cardTitle, isDark ? styles.darkText : styles.lightText]}>
|
||||
{item.company_name}
|
||||
</Text>
|
||||
<ChevronRight size={20} color={isDark ? '#64748b' : '#94a3b8'} />
|
||||
</View>
|
||||
<View style={styles.cardLocation}>
|
||||
<MapPin size={16} color={isDark ? '#64748b' : '#94a3b8'} />
|
||||
<Text
|
||||
style={[styles.cardLocationText, isDark ? styles.darkSubText : styles.lightSubText]}
|
||||
>
|
||||
{item.country_name}, {item.region_name}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
|
||||
onEndReachedThreshold={0.4}
|
||||
ListFooterComponent={
|
||||
isFetchingNextPage ? <ActivityIndicator color="#3b82f6" style={{ margin: 20 }} /> : null
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={['60%', '90%']}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{ backgroundColor: '#94a3b8', width: 50 }}
|
||||
backgroundStyle={{
|
||||
backgroundColor: isDark ? '#0f172a' : '#ffffff',
|
||||
borderRadius: 24,
|
||||
}}
|
||||
enablePanDownToClose
|
||||
>
|
||||
<BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
|
||||
{selectedCompany && (
|
||||
<>
|
||||
<View style={styles.sheetHeader}>
|
||||
<Building2 size={28} color="#3b82f6" />
|
||||
<Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
|
||||
{selectedCompany.company_name}
|
||||
</Text>
|
||||
<View style={styles.sheetLocation}>
|
||||
<MapPin size={16} color={isDark ? '#64748b' : '#94a3b8'} />
|
||||
<Text
|
||||
style={[
|
||||
styles.sheetLocationText,
|
||||
isDark ? styles.darkSubText : styles.lightSubText,
|
||||
]}
|
||||
>
|
||||
{selectedCompany.country_name}, {selectedCompany.region_name},{' '}
|
||||
{selectedCompany.district_name}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.divider, isDark ? styles.darkDivider : styles.lightDivider]} />
|
||||
|
||||
{selectedCompany.product_service_company &&
|
||||
selectedCompany.product_service_company.length > 0 && (
|
||||
<>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionLabel,
|
||||
isDark ? styles.darkSubText : styles.lightSubText,
|
||||
]}
|
||||
>
|
||||
{t('Mahsulotlar')} ({selectedCompany.product_service_company.length})
|
||||
</Text>
|
||||
{selectedCompany.product_service_company.map((product) => (
|
||||
<View
|
||||
key={product.id}
|
||||
style={[
|
||||
styles.productCard,
|
||||
isDark ? styles.darkProductCard : styles.lightProductCard,
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.productImage,
|
||||
isDark ? styles.darkProductImage : styles.lightProductImage,
|
||||
]}
|
||||
>
|
||||
{product.files?.[0]?.file ? (
|
||||
<Image
|
||||
source={{ uri: BASE_URL + product.files[0].file }}
|
||||
style={styles.productImg}
|
||||
/>
|
||||
) : (
|
||||
<Package size={28} color={isDark ? '#64748b' : '#94a3b8'} />
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.productInfo}>
|
||||
<Text
|
||||
style={[
|
||||
styles.productTitle,
|
||||
isDark ? styles.darkText : styles.lightText,
|
||||
]}
|
||||
>
|
||||
{product.title}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.productDesc,
|
||||
isDark ? styles.darkSubText : styles.lightSubText,
|
||||
]}
|
||||
>
|
||||
{product.description || 'Tavsif mavjud emas.'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const CARD_WIDTH = SCREEN_WIDTH - 32;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
|
||||
// --- Company Card ---
|
||||
card: {
|
||||
width: CARD_WIDTH - 4,
|
||||
marginLeft: 2,
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 8,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
darkCard: {
|
||||
backgroundColor: '#1e293b',
|
||||
},
|
||||
lightCard: {
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
cardHeader: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 6 },
|
||||
cardTitle: { fontSize: 17, fontWeight: '700', flex: 1 },
|
||||
darkText: {
|
||||
color: '#f1f5f9',
|
||||
},
|
||||
lightText: {
|
||||
color: '#0f172a',
|
||||
},
|
||||
cardLocation: { flexDirection: 'row', alignItems: 'center', gap: 6 },
|
||||
cardLocationText: { fontSize: 13 },
|
||||
darkSubText: {
|
||||
color: '#64748b',
|
||||
},
|
||||
lightSubText: {
|
||||
color: '#94a3b8',
|
||||
},
|
||||
|
||||
// --- Bottom Sheet ---
|
||||
sheetContent: { padding: 20, paddingBottom: 40 },
|
||||
sheetHeader: { alignItems: 'center', marginBottom: 20 },
|
||||
sheetTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
marginTop: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
sheetLocation: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6 },
|
||||
sheetLocationText: { fontSize: 14 },
|
||||
divider: { height: 1, marginBottom: 16 },
|
||||
darkDivider: {
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
lightDivider: {
|
||||
backgroundColor: '#e2e8f0',
|
||||
},
|
||||
sectionLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 12,
|
||||
},
|
||||
|
||||
// --- Product Card ---
|
||||
productCard: {
|
||||
flexDirection: 'row',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
gap: 16,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
darkProductCard: {
|
||||
backgroundColor: '#1e293b',
|
||||
},
|
||||
lightProductCard: {
|
||||
backgroundColor: '#f8fafc',
|
||||
},
|
||||
productImage: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
},
|
||||
darkProductImage: {
|
||||
backgroundColor: '#0f172a',
|
||||
borderColor: '#334155',
|
||||
},
|
||||
lightProductImage: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#e2e8f0',
|
||||
},
|
||||
productImg: { width: '100%', height: '100%', borderRadius: 8 },
|
||||
productInfo: { flex: 1 },
|
||||
productTitle: { fontSize: 15, fontWeight: '700' },
|
||||
productDesc: { fontSize: 13, marginTop: 2 },
|
||||
});
|
||||
Reference in New Issue
Block a user