fitst commit

screens/home/ui/HomeScreen.tsx

@@ -0,0 +1,272 @@
+// pages/home/ui/HomeScreen.tsx
+import { useTheme } from '@/components/ThemeContext';
+import CompanyList from '@/components/ui/CompanyList';
+import CountriesList from '@/components/ui/CountriesList';
+import FilteredItems from '@/components/ui/FilteredItems';
+import FilterUI from '@/components/ui/FilterUI';
+import ProductList from '@/components/ui/ProductList';
+import SearchTabs from '@/components/ui/SearchTabs';
+import { useTabSearch } from '@/hooks/useSearch';
+import { TabKey } from '@/types';
+import { useQueryClient } from '@tanstack/react-query';
+import { Stack } from 'expo-router';
+import { Filter, Search } from 'lucide-react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { RefreshControl } from 'react-native-gesture-handler';
+
+function Loading() {
+  return (
+    <View style={styles.loadingContainer}>
+      <ActivityIndicator size="large" color="#3b82f6" />
+    </View>
+  );
+}
+
+export default function HomeScreen() {
+  const { isDark } = useTheme();
+  const [activeTab, setActiveTab] = useState<TabKey>('products');
+  const [step, setStep] = useState<'filter' | 'items'>('filter');
+  const [query, setQuery] = useState('');
+  const [showFilter, setShowFilter] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [filtered, setFiltered] = useState<{ id: number; company_name: string }[]>([]);
+  const { t } = useTranslation();
+
+  const queryClient = useQueryClient();
+
+  const { isLoading, error } = useTabSearch(activeTab, query);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      if (activeTab === 'products') {
+        await queryClient.invalidateQueries({ queryKey: ['products-list'] });
+      }
+      await queryClient.refetchQueries();
+    } catch (err) {
+      console.error('Refresh error:', err);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [queryClient, activeTab]);
+
+  const placeholderText = useMemo(() => {
+    switch (activeTab) {
+      case 'products':
+        return 'Mahsulot qidirish...';
+      case 'companies':
+        return 'Korxona qidirish...';
+      case 'countries':
+        return 'Davlat qidirish...';
+      default:
+        return 'Qidiruv...';
+    }
+  }, [activeTab]);
+
+  const RenderedView = useMemo(() => {
+    switch (activeTab) {
+      case 'products':
+        return <ProductList query={query} />;
+      case 'companies':
+        return <CompanyList query={query} />;
+      case 'countries':
+        return <CountriesList search={query} />;
+    }
+  }, [activeTab, query]);
+
+  if (showFilter && step === 'filter') {
+    return (
+      <FilterUI back={() => setShowFilter(false)} setStep={setStep} setFiltered={setFiltered} />
+    );
+  }
+
+  if (showFilter && step === 'items') {
+    return (
+      <FilteredItems
+        data={filtered}
+        back={() => {
+          setShowFilter(false);
+          setStep('filter');
+        }}
+      />
+    );
+  }
+
+  return (
+    <ScrollView
+      style={[isDark ? styles.darkBg : styles.lightBg]}
+      contentContainerStyle={{ flexGrow: 1, paddingBottom: 60 }}
+      keyboardShouldPersistTaps="handled"
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          colors={['#3b82f6']}
+          tintColor="#3b82f6"
+        />
+      }
+    >
+      <Stack.Screen options={{ headerShown: false }} />
+
+      <View style={styles.content}>
+        {/* Qidiruv va filter */}
+        <View style={styles.searchSection}>
+          <View
+            style={[
+              styles.searchInputContainer,
+              isDark ? styles.darkSearchInput : styles.lightSearchInput,
+            ]}
+          >
+            <Search size={20} color={isDark ? '#64748b' : '#94a3b8'} style={styles.searchIcon} />
+            <TextInput
+              style={[styles.searchInput, isDark ? styles.darkInputText : styles.lightInputText]}
+              placeholder={t(placeholderText)}
+              value={query}
+              onChangeText={setQuery}
+              placeholderTextColor={isDark ? '#64748b' : '#94a3b8'}
+            />
+          </View>
+          <TouchableOpacity
+            style={styles.filterButton}
+            onPress={() => setShowFilter(true)}
+            activeOpacity={0.7}
+          >
+            <Filter size={20} color="#fff" />
+          </TouchableOpacity>
+        </View>
+
+        <SearchTabs value={activeTab} onChange={setActiveTab} />
+
+        {error && (
+          <View style={[styles.errorContainer, isDark ? styles.darkError : styles.lightError]}>
+            <Text style={styles.errorText}>{t("Ma'lumot yuklashda xatolik")}</Text>
+            <TouchableOpacity onPress={onRefresh} style={styles.retryButton}>
+              <Text style={styles.retryButtonText}>{t('Qayta urinish')}</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {isLoading && !refreshing && <Loading />}
+
+        {!isLoading && RenderedView}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  darkBg: {
+    flex: 1,
+    backgroundColor: '#0f172a',
+  },
+  lightBg: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+  },
+  content: {
+    padding: 16,
+    maxWidth: 768,
+    width: '100%',
+    alignSelf: 'center',
+    gap: 20,
+  },
+  searchSection: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+  },
+  searchInputContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 16,
+    borderWidth: 1.5,
+    paddingHorizontal: 16,
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  darkSearchInput: {
+    backgroundColor: '#1e293b',
+    borderColor: '#334155',
+  },
+  lightSearchInput: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e2e8f0',
+  },
+  searchIcon: {
+    marginRight: 10,
+  },
+  searchInput: {
+    flex: 1,
+    paddingVertical: 14,
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  darkInputText: {
+    color: '#f1f5f9',
+  },
+  lightInputText: {
+    color: '#0f172a',
+  },
+  filterButton: {
+    backgroundColor: '#3b82f6',
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  loadingContainer: {
+    padding: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  errorContainer: {
+    padding: 32,
+    alignItems: 'center',
+    borderRadius: 16,
+  },
+  darkError: {
+    backgroundColor: '#1e293b',
+  },
+  lightError: {
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#fee2e2',
+  },
+  errorText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#f87171',
+    marginBottom: 12,
+  },
+  retryButton: {
+    backgroundColor: '#3b82f6',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  retryButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+});