I'm making a simple todo app with ReactJS and Firebase and I want to sort my todos by the time they were made. I get that I need to use server timestamps, but can't figure out a way to implement sorting to my way of displaying Firebase data. This is how I fetch the data:
useEffect(() => {
const getTodos = async() => {
const data = await getDocs(todosRef);
setNewTodos(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
}
getTodos();
}, [])
And this how I add new todos to the database:
await addDoc(todosRef, {
text: input,
dueDate: date,
comments: [],
//timestamp: firebase.firestore.FieldValue.serverTimestamp()
});
setInput('');
window.location.reload();
}
Plus, when I try to add the new todo with the timestamp nothing happends. It won't push it to the database, so that's why it's commented out.
For serverTimestamp you can just directly import it in modular v9.
import { addDoc, serverTimestamp } from "firebase/firestore";
await addDoc(todosRef, {
timestamp: serverTimestamp()
})
As for timestamp sorting you can simply generate a query and order by timestamp descending.
const q = query(todosRef, orderBy("timestamp", "desc");
const data = await getDocs(q);