MVP

src/App.jsx

@@ -1,49 +1,59 @@
-import React, { useState } from 'react';
-import './App.css';
-import VoteCard from './components/VoteCard/VoteCard';
-import VotingBoard from './components/VotingBoard/VotingBoard';
+import React, { useEffect, useState } from 'react';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from 'react-router-dom';
+import Lobby from './components/Lobby/Lobby';
+import VotingTable from './components/VotingTable/VotingTable';
+import UserSessionListener from './components/UserSessionListener/UserSessionListener';
+import { signInAnonymously, onAuthStateChanged } from 'firebase/auth';
+import { auth } from './services/firebase';
 
-// Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
+const App = () => {
+  const [userId, setUserId] = useState('');
+  const [loading, setLoading] = useState(true);
 
-// Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
-const firebaseConfig = {
-  apiKey: REACT_APP_FIREBASE_API_KEY,
-  authDomain: REACT_APP_FIREBASE_AUTH_DOMAIN,
-  projectId: REACT_APP_FIREBASE_PROJECT_ID,
-  storageBucket: REACT_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
-  appId: REACT_APP_FIREBASE_APP_ID,
-  measurementId: REACT_APP_FIREBASE_DATABASE_URL,
-};
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
-
-function App() {
-  const [selectedVote, setSelectedVote] = useState(null);
-
-  const handleVoteClick = (number) => {
-    setSelectedVote(number);
+  const handleJoinSession = (userId) => {
+    setUserId(userId);
+    return true;
   };
 
+  useEffect(() => {
+    // Sign in the user anonymously
+    signInAnonymously(auth).catch((error) => {
+      console.error('Anonymous sign-in error:', error);
+    });
+
+    // Handle user state changes
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        console.log('User is signed in:', user);
+      } else {
+        console.log('User is signed out');
+      }
+      setLoading(false);
+    });
+  }, []);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Fibonacci Voting App</h1>
-      </header>
-      
-      <div className="App-main">
-        <h2>Pick Your Vote</h2>
-        <main className="vote-cards-container">
-          <VotingBoard />
-        </main>
-      </div>
-    </div>
+    <Router>
+      <UserSessionListener />
+      <Routes>
+        <Route
+          path="/lobby/:sessionId?"
+          element={<Lobby onJoinSession={handleJoinSession} />}
+          loading={loading}
+        />
+        <Route
+          path="/session/:sessionId"
+          element={<VotingTable userId={userId} />}
+        />
+        <Route path="*" element={<Navigate to={`/lobby`} />} />
+      </Routes>
+    </Router>
   );
-}
+};
 
 export default App;