fitst commit

screens/profile/ui/AddService.tsx

@@ -0,0 +1,197 @@
+import { useTheme } from '@/components/ThemeContext';
+import StepTwo from '@/screens/create-ads/ui/StepTwo';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { ArrowLeft } from 'lucide-react-native';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { user_api } from '../lib/api';
+import StepOneServices from './StepOneService';
+
+type MediaFile = {
+  uri: string;
+  type: string;
+  name: string;
+};
+
+interface formDataType {
+  title: string;
+  description: string;
+  media: MediaFile[];
+  category: any[];
+}
+
+const getMimeType = (uri: string) => {
+  const ext = uri.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    case 'png':
+      return 'image/png';
+    case 'webp':
+      return 'image/webp';
+    case 'heic':
+      return 'image/heic';
+    default:
+      return 'application/octet-stream';
+  }
+};
+
+export default function AddService() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const [step, setStep] = useState(1);
+  const stepOneRef = useRef<any>(null);
+  const stepTwoRef = useRef<any>(null);
+
+  const [formData, setFormData] = useState<formDataType>({
+    title: '',
+    description: '',
+    media: [],
+    category: [],
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: FormData) => user_api.add_service(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ['my_services'] });
+      router.back();
+    },
+    onError: (err: any) => {
+      if (err?.response?.data?.data?.description[0]) {
+        Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.description[0]);
+      } else if (err?.response?.data?.data?.files[0]) {
+        Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.title[0]);
+      } else if (err?.response?.data?.data?.title[0]) {
+        Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.title[0]);
+      } else {
+        Alert.alert(t('Xatolik yuz berdi'), err?.message);
+      }
+    },
+  });
+
+  const updateForm = (key: string, value: any) =>
+    setFormData((prev: any) => ({ ...prev, [key]: value }));
+
+  const handleNext = () => {
+    if (step === 1) {
+      const valid = stepOneRef.current?.validate();
+      if (!valid) return;
+      setStep(2);
+    }
+  };
+
+  const handleBack = () => {
+    if (step === 2) setStep(1);
+    else router.back();
+  };
+
+  const handleSave = () => {
+    const valid = stepTwoRef.current?.validate();
+    if (!valid) return;
+    const form = new FormData();
+    form.append('title', formData.title);
+    form.append('description', formData.description);
+    formData.media.forEach((file) => {
+      form.append(`files`, {
+        uri: file.uri,
+        type: getMimeType(file.uri),
+        name: file.uri.split('/').pop(),
+      } as any);
+    });
+    formData.category.forEach((e) => {
+      form.append(`category`, e.id);
+    });
+
+    mutate(form);
+  };
+
+  const removeMedia = (i: number) =>
+    updateForm(
+      'media',
+      formData.media.filter((_: any, idx: number) => idx !== i)
+    );
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+      <View style={[styles.header, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
+        <View
+          style={{ flexDirection: 'row', gap: 10, alignContent: 'center', alignItems: 'center' }}
+        >
+          <Pressable onPress={handleBack}>
+            <ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
+          </Pressable>
+          <Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
+            {step === 1 ? t('Yangi xizmat (1/2)') : t('Yangi xizmat (2/2)')}
+          </Text>
+        </View>
+        {step === 2 ? (
+          <Pressable
+            onPress={handleSave}
+            style={({ pressed }) => [
+              {
+                opacity: pressed || isPending ? 0.6 : 1,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+              },
+            ]}
+            disabled={isPending}
+          >
+            {isPending ? (
+              <ActivityIndicator size={'small'} />
+            ) : (
+              <Text style={styles.saveButton}>{t('Saqlash')}</Text>
+            )}
+          </Pressable>
+        ) : (
+          <Pressable onPress={handleNext}>
+            <Text style={styles.saveButton}>{t('Keyingi')}</Text>
+          </Pressable>
+        )}
+      </View>
+
+      <ScrollView contentContainerStyle={styles.container}>
+        {step === 1 && (
+          <StepOneServices
+            ref={stepOneRef}
+            formData={formData}
+            updateForm={updateForm}
+            removeMedia={removeMedia}
+          />
+        )}
+        {step === 2 && <StepTwo ref={stepTwoRef} formData={formData} updateForm={updateForm} />}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+    alignItems: 'center',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  headerTitle: { fontSize: 18, fontWeight: '700' },
+  saveButton: { color: '#3b82f6', fontSize: 16, fontWeight: '600' },
+  container: { padding: 16, paddingBottom: 10 },
+});