App.js

import { useState, useEffect } from 'react';

import './App.css';

import { auth, googleProvider, db } from './firebaseSetting';

function App() {
  const [user, setUser] = useState(null);
  const [todos, setTodos] = useState([]); //new

  const signInWithGoogle = () => {
    auth
      .signInWithPopup(googleProvider)
      .then((res) => {
        setUser(res.user);
      })
      .catch((err) => {
        console.error(err);
      });
  };

//   Fetch Todos from firestore
  useEffect(() => {
    const fetchTodos = () => {
      db.collection('todos')
        .orderBy('createdAt', 'desc')
        .onSnapshot((snapshot) => {
          const data = snapshot.docs.map((doc) => ({
            id: doc.id,
            ...doc.data(),
          }));
          setTodos(data);
        });
    };

    fetchTodos();
  }, []);

  return (
    <div className="App">
      {user ? (
        <div>
          <h2>Welcome {user.displayName}</h2>
          // Map through todos
          {todos.map((todo) => (
            <p key={todo.id}>{todo.title}</p>
          ))}
        </div>
      ) : (
        <button onClick={signInWithGoogle}>Sign In with Google</button>
      )}
    </div>
  );
}

export default App;