Initial commit
This commit is contained in:
Samandar Turgunboyev
268
src/screens/wallet/payment/ui/Wallet.tsx
Normal file
268
src/screens/wallet/payment/ui/Wallet.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import packetsApi from 'api/packets';
|
||||
import LoadingScreen from 'components/LoadingScreen';
|
||||
import Navbar from 'components/Navbar';
|
||||
import Navigation from 'components/Navigation';
|
||||
import NoResult from 'components/NoResult';
|
||||
import Pagination from 'components/Pagination';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import Payment from './Payment';
|
||||
|
||||
const Wallet = () => {
|
||||
const { t } = useTranslation();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageAvia, setPageAvia] = useState(0);
|
||||
const [selectedType, setSelectedType] = useState<'AVIA' | 'AUTO'>('AVIA');
|
||||
const {
|
||||
data: packets,
|
||||
isFetching,
|
||||
isLoading,
|
||||
isError,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['packets', page],
|
||||
queryFn: () =>
|
||||
packetsApi.getPackets({
|
||||
page,
|
||||
size: 10,
|
||||
cargoType: 'AUTO',
|
||||
direction: 'ASC',
|
||||
sort: 'id',
|
||||
}),
|
||||
});
|
||||
|
||||
const {
|
||||
data: packetsAvia,
|
||||
isFetching: isFetchingAvia,
|
||||
isLoading: isLoadingAvia,
|
||||
isError: isErrorAvia,
|
||||
refetch: refetchAvia,
|
||||
} = useQuery({
|
||||
queryKey: ['packetsAvia', pageAvia],
|
||||
queryFn: () =>
|
||||
packetsApi.getPackets({
|
||||
page: pageAvia,
|
||||
size: 10,
|
||||
cargoType: 'AVIA',
|
||||
direction: 'ASC',
|
||||
sort: 'id',
|
||||
}),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
refetch();
|
||||
refetchAvia();
|
||||
} catch (error) {
|
||||
console.error('Wallet loading error:', error);
|
||||
refetch();
|
||||
refetchAvia();
|
||||
}
|
||||
};
|
||||
|
||||
loadInitialData();
|
||||
}, []);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
try {
|
||||
setRefreshing(true);
|
||||
await refetch();
|
||||
} catch (error) {
|
||||
console.error('Refresh error:', error);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [refetch]);
|
||||
|
||||
const refreshControl = useMemo(
|
||||
() => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
|
||||
[refreshing, onRefresh],
|
||||
);
|
||||
|
||||
if (isLoading || isFetching || isLoadingAvia || isFetchingAvia) {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<Navbar />
|
||||
<LoadingScreen />
|
||||
<Navigation />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || isErrorAvia) {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<Navbar />
|
||||
<NoResult message="Xatolik yuz berdi" />
|
||||
<Navigation />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
(packets && !(packets?.data.length > 0)) ||
|
||||
(packetsAvia && !(packetsAvia?.data.length > 0))
|
||||
) {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<Navbar />
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{t("To'lov")}</Text>
|
||||
</View>
|
||||
<NoResult />
|
||||
</View>
|
||||
<Navigation />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<Navbar />
|
||||
<ScrollView
|
||||
refreshControl={refreshControl}
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
removeClippedSubviews={true}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<View style={{ flex: 1, justifyContent: 'space-between' }}>
|
||||
<View>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{t("To'lov")}</Text>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
padding: 5,
|
||||
backgroundColor:
|
||||
selectedType === 'AVIA' ? '#28A7E8' : '#F3FAFF',
|
||||
borderTopLeftRadius: 8,
|
||||
borderBottomLeftRadius: 8,
|
||||
}}
|
||||
onPress={() => setSelectedType('AVIA')}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: selectedType === 'AVIA' ? '#fff' : '#28A7E8',
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
AVIA
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={{ width: 1 }} />
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
padding: 5,
|
||||
backgroundColor:
|
||||
selectedType === 'AUTO' ? '#28A7E8' : '#F3FAFF',
|
||||
borderTopRightRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
}}
|
||||
onPress={() => setSelectedType('AUTO')}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: selectedType === 'AUTO' ? '#fff' : '#28A7E8',
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
}}
|
||||
>
|
||||
AUTO
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<Payment
|
||||
packets={selectedType === 'AUTO' ? packets! : packetsAvia!}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
width: '95%',
|
||||
alignSelf: 'center',
|
||||
paddingRight: 20,
|
||||
paddingVertical: 10,
|
||||
}}
|
||||
>
|
||||
<Pagination
|
||||
page={selectedType === 'AUTO' ? page : pageAvia}
|
||||
totalPages={
|
||||
selectedType === 'AUTO'
|
||||
? packets?.totalPages ?? 1
|
||||
: packetsAvia?.totalPages ?? 1
|
||||
}
|
||||
setPage={selectedType === 'AUTO' ? setPage : setPageAvia}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<Navigation />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 5,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
cards: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
card: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 100,
|
||||
height: 100,
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
},
|
||||
cardText: {
|
||||
marginTop: 5,
|
||||
fontSize: 12,
|
||||
color: '#555',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default Wallet;
|
||||
Reference in New Issue
Block a user