mySQL

src/App.jsx

@@ -5,11 +5,13 @@ import {
   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 Lobby from './components/Lobby';
+import VotingTable from './components/VotingTable';
+import UserSessionListener from './components/UserSessionListener';
+import axios from 'axios';
+import cyarenLogo from './assets/images/CyarenLogo.png';
+import cardLogo from './assets/images/logo.png';
+import styles from './App.module.css';
 
 const App = () => {
   const [userId, setUserId] = useState('');
@@ -21,37 +23,67 @@ const App = () => {
   };
 
   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);
-    });
+    // Check if there's a user session by making a request to the backend
+    axios
+      .get('/api/auth/session')
+      .then((response) => {
+        const { userId } = response.data;
+        if (userId) {
+          setUserId(userId); // User is logged in
+        } else {
+          // If no user session exists, create an anonymous user session
+          axios
+            .post('/api/auth/signin-anonymous')
+            .then((response) => {
+              setUserId(response.data.userId);
+            })
+            .catch((error) => {
+              console.error('Error signing in anonymously:', error);
+            });
+        }
+      })
+      .catch((error) => {
+        console.error('Error checking user session:', error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, []);
 
   return (
     <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>
+      <div className={styles.app}>
+        <section className={styles.header}>
+          <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>
+        </section>
+        <section className={styles.footer}>
+          <div className={styles.logoEnvelope}>
+            <img className={styles.cyaren} src={cyarenLogo} alt="cyaren-logo" />
+          </div>
+          <img
+            className={`${styles.cardLogo} ${styles.moveLeft}`}
+            src={cardLogo}
+            alt="card-logo"
+          />
+          <img
+            className={`${styles.cardLogo} ${styles.moveRight}`}
+            src={cardLogo}
+            alt="card-logo"
+          />
+        </section>
+      </div>
     </Router>
   );
 };