0
335
ViewsHow to get a nested Firebase array as a collection?
I want to display only the currently logged-in user's todos. I made it so that when the user logs in, a new doc is made in the 'users' collection. The new user has the same id as the authenticated user's uid. I also implemented a way to push a new todo only into the current user's todos array. Now I just want to display those todos. This is how the data looks:
Before this, I already implemented a way to add and display the todos regardless of the current user. This is the code for displaying the todos:
const todosRef = collection(db, 'todos');
const [newTodos, setNewTodos] = useState([]);
//get the db data
useEffect(() => {
const getTodos = async () => {
const q = query(todosRef, orderBy("importance", "desc"));
const data = await getDocs(q);
setNewTodos(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
}
getTodos();
}, [])
I just need to modify the todosRef probably, but I don't know how.
1 answers
Answer question0
I got it to work. Kind of.
const [user, setUser] = useState({});
const [newTodos, setNewTodos] = useState([]);
useEffect(() => {
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
}, [])
useEffect(() => {
const getTodos = async () => {
const todoDoc = doc(db, "users", user.uid);
const docSnap = await getDoc(todoDoc);
const arrayTodos = docSnap.data().todos;
setNewTodos(arrayTodos);
}
getTodos();
}, [])
The code will display the todos from the current user, but when I refresh the page, the todos are not displayed. They are still in the db, but are not displayed. Why is that?
Added Note
When I edit the code and save it the todos show. But when I refresh the page, they are gone.
Solved kind of
I think I know why I get this behaviour. When I log in, I set a new user every time into my 'users' collection. I set the users name only as a property. And every time I try to log in, all the todos are deleted, because of that.
const navigate = useNavigate();
const addUser = async (username, userid) => {
await setDoc(doc(db, 'users', userid), {
name: username
})
}
const signInWithGoogle = async () => {
signInWithPopup(auth, provider).then(result => {
const username = result.user.displayName;
const userId = result.user.uid;
navigate('/todos');
addUser(username, userId);
}).catch(err => {
console.log(err);
})
}