I want to post data in firebase firestore database but I don't understand why that does'nt work I Can post prewrite title in database but not with custom title from an input
traceback :
[Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]
My addEvent function to add eventDate and a title to an firebase events collection
firebase.js
export async function addEvent(date, title) {
const eventsRef = collection(db, EVENTS_COLLECTION);
const newEventRef = await addDoc(eventsRef, {
date,
title,
})
.then(() => {
// Data saved successfully!
console.log("data submitted");
})
.catch((error) => {
// The write failed...
console.log(error);
});
const newEvent = await getDoc(newEventRef);
return newEvent;
}
My calendar to add data on firebase.
I have a button that open picker date time modal and next modal with an input to add data with submit and cancel button.
CalendarScreen.js
import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const [isTitleModalVisible, setIsTitleModalVisible] = useState(false);
const [eventTitle, setEventTitle] = useState("");
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const showTitleModal = () => {
setIsTitleModalVisible(true);
};
const hideTitleModal = () => {
setIsTitleModalVisible(false);
};
const handleAddEvent = (eventDate, eventTitle) => {
hideDatePicker(eventDate, eventTitle);
showTitleModal();
};
const handleSubmitTitle = (eventDate, eventTitle) => {
addEvent(eventDate, eventTitle);
hideTitleModal();
setEventTitle("");
};
return (
<View>
<CalendarPicker
style={styles.calendar}
selectedDate={selectedDate}
onDateChange={onDateChange}
/>
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
<Modal style={styles.modal} visible={isTitleModalVisible}>
<View>
<TextInput
placeholder="Event Title"
value={eventTitle}
onChangeText={setEventTitle}
style={styles.input}
/>
<Button title="Submit" onPress={handleSubmitTitle} />
<Button title="Cancel" onPress={hideTitleModal} />
</View>
</Modal>
</View>
);
}
EDIT When string is typed
export async function getEvents() {
const eventsRef = collection(db, EVENTS_COLLECTION);
const docSnap = await getDocs(eventsRef);
const events = [];
docSnap.forEach((doc) => {
events.push({ id: doc.id, ...doc.data() });
});
return events;
}
CalendarScreen.js
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const handleAddEvent = (eventDate) => {
addEvent(eventDate);
hideDatePicker();
};
return (
<View>
<CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
</View>
);
temporary SOLUTION : See you database even with the error
CalendarScreen.js
import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment-timezone";
moment.tz.setDefault("Europe/Paris");
export default function CalendarScreen({ selectedDate, onDateChange }) {
const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const [eventTitle, setEventTitle] = useState("");
const showDatePicker = () => {
setIsDatePickerVisible(true);
};
const hideDatePicker = () => {
setIsDatePickerVisible(false);
};
const showModal = () => {
setIsModalVisible(true);
};
const hideModal = () => {
setIsModalVisible(false);
};
const handleAddEvent = (eventDate) => {
addEvent(eventDate, eventTitle);
showModal();
};
const handleSubmit = (eventDate) => {
addEvent(eventDate, eventTitle);
hideModal();
hideDatePicker();
};
return (
<View>
<CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
<Button title="Add Event" onPress={showDatePicker} />
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleAddEvent}
onCancel={hideDatePicker}
/>
<Modal animationType="slide" transparent={false} visible={isModalVisible}>
<View>
<TextInput
placeholder="Event Title"
value={eventTitle}
onChangeText={setEventTitle}
/>
<Button
title="Submit"
onPress={(eventDate) => handleSubmit(eventDate)}
/>
<Button title="Cancel" onPress={hideModal} />
</View>
</Modal>
</View>
);
export async function addEvent(date, title) {
const eventsRef = collection(db, EVENTS_COLLECTION);
const newEventRef = await addDoc(eventsRef, {
date: date,
title: title,
})
.then(() => {
// Data saved successfully!
console.log("data submitted");
})
.catch((error) => {
// The write failed...
console.log(error);
});
const newEvent = await getDoc(newEventRef);
return newEvent;
}
SOLUTION updated from scra:
export async function addEvent(event) {
try {
const eventsRef = collection(db, EVENTS_COLLECTION);
const docRef = await addDoc(eventsRef, event);
console.log("Event is added, id :", docRef.id);
} catch (error) {
console.error(error);
}
}
const handleDatePicked = (date) => {
const formattedDate = date.toLocaleDateString();
const formattedTime = date.toLocaleTimeString();
setDate(`${formattedDate} ${formattedTime}`);
setDateTimePickerVisible(false);
};
const handleSubmit = async () => {
try {
await addEvent({ ...event, date });
} catch (error) {
console.error(error);
}
};
return (
<View>
<TextInput
onChangeText={(text) => setEvent({ ...event, name: text })}
placeholder="Event name"
/>
<Text>{date}</Text>
<Button
Color="red"
title="Pick date and time"
onPress={showDateTimePicker}
/>
<DateTimePicker
mode="datetime"
isVisible={isDateTimePickerVisible}
onConfirm={handleDatePicked}
onCancel={() => setDateTimePickerVisible(false)}
/>
<Button title="Submit" onPress={handleSubmit} />
</View>
);
