Initial commit

src/screens/home/branches/ui/Branches.tsx

@@ -0,0 +1,96 @@
+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 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 (
+    <SafeAreaView style={{ flex: 1 }}>
+      <NavbarBack 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>
+    </SafeAreaView>
+  );
+};
+
+export default Branches;
+
+const styles = StyleSheet.create({
+  scrollWrapper: {
+    flex: 1,
+  },
+  scrollContainer: {
+    padding: 8,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000000B2',
+  },
+});