sync profile api

src/screens/Main/ProfileScreen.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
@@ -7,14 +7,47 @@ import {
   ScrollView,
   TouchableOpacity,
   Alert,
+  ActivityIndicator,
+  RefreshControl,
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Ionicons } from '@expo/vector-icons';
 import { useAuth } from '../../contexts/AuthContext';
+import apiService from '../../services/apiService';
 import { COLORS } from '../../constants/colors';
 
 const ProfileScreen = () => {
-  const { user, logout } = useAuth();
+  const { user, logout, fetchUserProfile } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [profileData, setProfileData] = useState(null);
+
+  useEffect(() => {
+    loadProfileData();
+  }, []);
+
+  const loadProfileData = async () => {
+    if (isLoading) return;
+    
+    setIsLoading(true);
+    try {
+      // Fetch fresh profile data from API
+      const result = await fetchUserProfile();
+      if (result.success) {
+        setProfileData(result.user);
+      }
+    } catch (error) {
+      console.error('Error loading profile:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await loadProfileData();
+    setIsRefreshing(false);
+  };
 
   const profileSections = [
     {
@@ -53,8 +86,100 @@ const ProfileScreen = () => {
   ];
 
   const handleProfileItemPress = (item) => {
-    console.log('Profile item pressed:', item.title);
-    // Handle navigation or action here
+    switch (item.id) {
+      case 1: // Personal Information
+        handleEditPersonalInfo();
+        break;
+      case 2: // Contact Information
+        handleEditContactInfo();
+        break;
+      case 3: // Change Password
+        handleChangePassword();
+        break;  
+      case 4: // Notifications
+        handleNotificationSettings();
+        break;
+      case 5: // Security
+        handleSecuritySettings();
+        break;
+      default:
+        Alert.alert('Üns beriň', 'Bu funksiýa entek işlenok');
+    }
+  };
+
+  const handleEditPersonalInfo = () => {
+    // Navigate to edit personal info screen
+    Alert.alert('Şahsy maglumatlar', 'Şahsy maglumatlar sahypasy açylýar...');
+  };
+
+  const handleEditContactInfo = () => {
+    // Navigate to edit contact info screen
+    Alert.alert('Aragatnaşyk', 'Aragatnaşyk maglumatlar sahypasy açylýar...');
+  };
+
+  const handleChangePassword = () => {
+    Alert.prompt(
+      'Paroly üýtget',
+      'Häzirki parolyňyzy giriziň',
+      [
+        { text: 'Ýatyr', style: 'cancel' },
+        { 
+          text: 'Dowam et', 
+          onPress: (currentPassword) => {
+            if (currentPassword) {
+              promptForNewPassword(currentPassword);
+            }
+          }
+        }
+      ],
+      'secure-text'
+    );
+  };
+
+  const promptForNewPassword = (currentPassword) => {
+    Alert.prompt(
+      'Täze parol',
+      'Täze parolyňyzy giriziň',
+      [
+        { text: 'Ýatyr', style: 'cancel' },
+        { 
+          text: 'Üýtget', 
+          onPress: (newPassword) => {
+            if (newPassword && newPassword.length >= 6) {
+              changePassword(currentPassword, newPassword);
+            } else {
+              Alert.alert('Ýalňyşlyk', 'Parol azyndan 6 harp bolmaly');
+            }
+          }
+        }
+      ],
+      'secure-text'
+    );
+  };
+
+  const changePassword = async (currentPassword, newPassword) => {
+    try {
+      setIsLoading(true);
+      const result = await apiService.changePassword(currentPassword, newPassword);
+      
+      if (result.success) {
+        Alert.alert('Üstünlik', 'Parol üstünlikli üýtgedildi');
+      } else {
+        Alert.alert('Ýalňyşlyk', result.error || 'Paroly üýtgetmek amala aşmady');
+      }
+    } catch (error) {
+      Alert.alert('Ýalňyşlyk', error.message || 'Paroly üýtgetmek amala aşmady');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleNotificationSettings = () => {
+    Alert.alert('Bildirişler', 'Bildiriş sazlamalary sahypasy açylýar...');
+  };
+
+  const handleSecuritySettings = () => {
+    Alert.alert('Howpsuzlyk', 'Howpsuzlyk sazlamalary sahypasy açylýar...');
   };
 
   const handleLogout = () => {
@@ -78,9 +203,12 @@ const ProfileScreen = () => {
   const formatPhoneNumber = (phone) => {
     if (!phone) return '';
     const phoneStr = phone.toString();
-    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
+    return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 4)}-${phoneStr.slice(4, 6)}-${phoneStr.slice(6)}`;
   };
 
+  // Use profile data from API or fallback to cached user data
+  const currentUser = profileData || user;
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar style="dark" />
@@ -89,19 +217,36 @@ const ProfileScreen = () => {
         <Text style={styles.headerTitle}>Profil</Text>
       </View>
 
-      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+      <ScrollView 
+        style={styles.scrollView} 
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefreshing}
+            onRefresh={handleRefresh}
+            colors={[COLORS.primary]}
+            tintColor={COLORS.primary}
+          />
+        }
+      >
         {/* User Info Card */}
         <View style={styles.userCard}>
           <View style={styles.userAvatar}>
             <Text style={styles.userInitials}>
-              {user?.name ? user.name.split(' ').map(n => n[0]).join('').toUpperCase() : 'U'}
+              {currentUser?.name ? currentUser.name.split(' ').map(n => n[0]).join('').toUpperCase() : 'U'}
             </Text>
           </View>
           <View style={styles.userInfo}>
-            <Text style={styles.userName}>{user?.name || 'Ulanyjy'}</Text>
-            <Text style={styles.userPhone}>{formatPhoneNumber(user?.phone)}</Text>
+            <Text style={styles.userName}>
+              {currentUser?.name || 'Ulanyjy'}
+              {isLoading && <ActivityIndicator size="small" color={COLORS.primary} style={{ marginLeft: 8 }} />}
+            </Text>
+            <Text style={styles.userPhone}>{formatPhoneNumber(currentUser?.phone)}</Text>
+            {currentUser?.email && (
+              <Text style={styles.userEmail}>{currentUser.email}</Text>
+            )}
           </View>
-          <TouchableOpacity style={styles.editButton}>
+          <TouchableOpacity style={styles.editButton} onPress={handleEditPersonalInfo}>
             <Ionicons name="pencil" size={20} color={COLORS.primary} />
           </TouchableOpacity>
         </View>
@@ -219,6 +364,11 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: COLORS.textSecondary,
   },
+  userEmail: {
+    fontSize: 14,
+    color: COLORS.textSecondary,
+    marginTop: 2,
+  },
   editButton: {
     padding: 8,
   },