105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
import { useNavigation } from '@react-navigation/native';
|
||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { branchApi } from 'api/branch';
|
||
import LayoutTwo from 'components/LayoutTwo';
|
||
import NavbarBack from 'components/NavbarBack';
|
||
import NoResult from 'components/NoResult';
|
||
import * as React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import ArrowRightUnderline from 'svg/ArrowRightUnderline';
|
||
|
||
interface BranchesProps {}
|
||
|
||
const Branches = (props: BranchesProps) => {
|
||
const navigation = useNavigation<NativeStackNavigationProp<any>>();
|
||
const { t } = useTranslation();
|
||
const { data, isError } = useQuery({
|
||
queryKey: ['branchList'],
|
||
queryFn: branchApi.branchList,
|
||
});
|
||
|
||
if (isError || data?.length === 0) {
|
||
return (
|
||
<SafeAreaView style={{ flex: 1 }}>
|
||
<View style={{ flex: 1 }}>
|
||
<NavbarBack title={t('Filiallar ro’yxati')} />
|
||
<NoResult message="Xatolik yuz berdi" />
|
||
</View>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<LayoutTwo title={t('Filiallar ro’yxati')}>
|
||
<View style={styles.scrollWrapper}>
|
||
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
||
{data &&
|
||
data.map(e => (
|
||
<TouchableOpacity
|
||
key={e.id}
|
||
style={styles.card}
|
||
onPress={() =>
|
||
navigation.navigate('ListBranches', { branchId: e.id })
|
||
}
|
||
>
|
||
<View>
|
||
<Text style={styles.title}>{e.name}</Text>
|
||
<Text style={styles.subtitle}>{e.address}</Text>
|
||
</View>
|
||
<ArrowRightUnderline color="#28A7E8" />
|
||
</TouchableOpacity>
|
||
))}
|
||
</ScrollView>
|
||
</View>
|
||
</LayoutTwo>
|
||
);
|
||
};
|
||
|
||
export default Branches;
|
||
|
||
const styles = StyleSheet.create({
|
||
scrollWrapper: {
|
||
flex: 1,
|
||
},
|
||
scrollContainer: {
|
||
padding: 8,
|
||
},
|
||
card: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 8,
|
||
padding: 4,
|
||
marginBottom: 12,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 2,
|
||
|
||
elevation: 1,
|
||
},
|
||
title: {
|
||
fontSize: 18,
|
||
paddingHorizontal: 5,
|
||
fontWeight: '600',
|
||
color: '#000',
|
||
marginBottom: 6,
|
||
},
|
||
subtitle: {
|
||
fontSize: 16,
|
||
paddingHorizontal: 5,
|
||
fontWeight: '500',
|
||
color: '#000000B2',
|
||
},
|
||
});
|