147 lines
5.3 KiB
TypeScript
147 lines
5.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, TextInput, TouchableOpacity, ScrollView } from 'react-native';
|
|
import { Picker } from '@react-native-picker/picker';
|
|
import { ImagePickerComponent } from './ImagePicker';
|
|
import { createCar } from '@/lib/database';
|
|
import { useGlobalContext } from '@/lib/globalProvider';
|
|
import { router } from 'expo-router';
|
|
|
|
const FUEL_TYPES = ['Petrol', 'Diesel', 'Electric', 'Hybrid'] as const;
|
|
const TRANSMISSIONS = ['Manual', 'Automatic'] as const;
|
|
|
|
export const CarForm = () => {
|
|
const { user } = useGlobalContext();
|
|
const [images, setImages] = useState<string[]>([]);
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
description: '',
|
|
price: '',
|
|
make: '',
|
|
model: '',
|
|
year: '',
|
|
fuelType: 'Petrol' as const,
|
|
transmission: 'Automatic' as const,
|
|
location: ''
|
|
});
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
if (!user) throw new Error('User not authenticated');
|
|
|
|
await createCar({
|
|
...formData,
|
|
price: Number(formData.price),
|
|
year: Number(formData.year),
|
|
images: images,
|
|
postedBy: user.$id,
|
|
featured: false
|
|
});
|
|
|
|
router.back();
|
|
} catch (error) {
|
|
console.error('Error creating car listing:', error);
|
|
alert('Failed to create car listing');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScrollView className="p-4">
|
|
<Text className="text-lg font-bold mb-4">Add New Car</Text>
|
|
|
|
<View className="mb-4">
|
|
<ImagePickerComponent
|
|
onImageSelected={setImages}
|
|
images={images}
|
|
/>
|
|
</View>
|
|
|
|
{/* Basic Info */}
|
|
<TextInput
|
|
className="border border-gray-300 rounded-lg p-2 mb-4"
|
|
placeholder="Title"
|
|
value={formData.title}
|
|
onChangeText={(text) => setFormData({...formData, title: text})}
|
|
/>
|
|
|
|
<TextInput
|
|
className="border border-gray-300 rounded-lg p-2 mb-4"
|
|
placeholder="Description"
|
|
multiline
|
|
numberOfLines={4}
|
|
value={formData.description}
|
|
onChangeText={(text) => setFormData({...formData, description: text})}
|
|
/>
|
|
|
|
<TextInput
|
|
className="border border-gray-300 rounded-lg p-2 mb-4"
|
|
placeholder="Price"
|
|
keyboardType="numeric"
|
|
value={formData.price}
|
|
onChangeText={(text) => setFormData({...formData, price: text})}
|
|
/>
|
|
|
|
{/* Car Details */}
|
|
<View className="flex-row gap-2 mb-4">
|
|
<TextInput
|
|
className="flex-1 border border-gray-300 rounded-lg p-2"
|
|
placeholder="Make"
|
|
value={formData.make}
|
|
onChangeText={(text) => setFormData({...formData, make: text})}
|
|
/>
|
|
<TextInput
|
|
className="flex-1 border border-gray-300 rounded-lg p-2"
|
|
placeholder="Model"
|
|
value={formData.model}
|
|
onChangeText={(text) => setFormData({...formData, model: text})}
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex-row gap-2 mb-4">
|
|
<TextInput
|
|
className="flex-1 border border-gray-300 rounded-lg p-2"
|
|
placeholder="Year"
|
|
keyboardType="numeric"
|
|
value={formData.year}
|
|
onChangeText={(text) => setFormData({...formData, year: text})}
|
|
/>
|
|
<TextInput
|
|
className="flex-1 border border-gray-300 rounded-lg p-2"
|
|
placeholder="Location"
|
|
value={formData.location}
|
|
onChangeText={(text) => setFormData({...formData, location: text})}
|
|
/>
|
|
</View>
|
|
|
|
{/* Pickers */}
|
|
<View className="border border-gray-300 rounded-lg mb-4 px-2">
|
|
<Picker
|
|
selectedValue={formData.fuelType}
|
|
onValueChange={(value) => setFormData({...formData, fuelType: value})}
|
|
>
|
|
{FUEL_TYPES.map((type) => (
|
|
<Picker.Item key={type} label={type} value={type} />
|
|
))}
|
|
</Picker>
|
|
</View>
|
|
|
|
<View className="border border-gray-300 rounded-lg mb-4 px-2">
|
|
<Picker
|
|
selectedValue={formData.transmission}
|
|
onValueChange={(value) => setFormData({...formData, transmission: value})}
|
|
>
|
|
{TRANSMISSIONS.map((type) => (
|
|
<Picker.Item key={type} label={type} value={type} />
|
|
))}
|
|
</Picker>
|
|
</View>
|
|
|
|
{/* Submit Button */}
|
|
<TouchableOpacity
|
|
onPress={handleSubmit}
|
|
className="bg-blue-500 p-4 rounded-full"
|
|
>
|
|
<Text className="text-white text-center font-semibold">Add Car</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
);
|
|
};
|