Add a home page and lobby room. Just got the basic setup done and css is yet...

Add a home page and lobby room. Just got the basic setup done and css is yet not in the place. And now can navigate through the app by clicking on the sidebar!! Enjoy your delivery, porter

client/src/App.js

@@ -6,6 +6,7 @@ import { selectUsers } from './store/usersSlice';
 import PlayGamePage from './Views/PlayGamePage'; 
 import Home from './Views/Home'; 
 import Profile from './Views/Profile'; 
+import Lobby from './Views/Lobby';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
@@ -19,8 +20,11 @@ function App() {
     <BrowserRouter>
       <Routes>
         
-        <Route index element={<Profile/>} />
-       
+        <Route index element={<Home/>} />
+        <Route path="/" element={<Home />} />
+        <Route path="/lobby" element={<Lobby />} />
+        <Route path="/play" element={<PlayGamePage />} />
+        <Route path="/profile" element={<Profile />} />
       </Routes>
     </BrowserRouter>:
      <LoginSignup/>

client/src/Views/Lobby.css

+.grid-container {
+    display: grid;
+    grid-template-columns: 500px 1fr;
+    height: 100vh; 
+    max-height: 100vh; 
+}
+
+
+.sidebar {
+    background-color: white;
+}
+
+
+
+.welcoming-text{
+    color:violet;
+    font-size: 30px;
+    font-weight: 700;
+    font-style: oblique;
+}

client/src/Views/Lobby.jsx

+import React, { useEffect, useState } from 'react';
+import SideBar from '../components/SideBar.jsx';
+import { BrowserRouter, Routes, Route,useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { selectUsers } from '../store/usersSlice';
+import './Lobby.css';
+import { addDoc, collection, getDocs,onSnapshot,orderBy,query, serverTimestamp } from 'firebase/firestore';
+import {db,auth} from '../firebase/config.js';
+
+import { onAuthStateChanged } from 'firebase/auth';
+
+const Lobby=()=>{
+    const user=useSelector(selectUsers).currentUser
+    const navigate=useNavigate()
+    //const [user,setUser]=useState(useSelector(selectUsers))
+    const [messages,setMessages]=useState([])
+    const [newMessage,setNewMessage]=useState("")
+
+    console.log(user)
+
+    useEffect(()=>{
+        const q =query(collection(db,'messages'),orderBy("timestamp"))
+        const unsubscribe= onSnapshot(q,snapshot=>{
+            setMessages(snapshot.docs.map(doc=>({
+                id: doc.id,
+                data: doc.data()
+            })))
+        })
+        return unsubscribe
+
+    },[])
+
+    
+
+    const sendMessage = async()=>{
+        await addDoc(collection(db,"messages"),{
+            uid:user.email,
+           // photoURL:user.photoURL,
+            //displayName:user.displayName,
+            text:newMessage,
+            timestamp:serverTimestamp()
+
+        } )
+        setNewMessage("")
+    }
+
+    return(
+        <div className='grid-container'>
+            <section className='sidebar'>
+                <SideBar/>
+         
+            </section>
+
+            <section>
+                <p>i am sam but logged in as {user.email}</p>
+                <input value={newMessage} onChange={e=> setNewMessage(e.target.value)}/>
+                <button onClick={sendMessage}>
+                    Send Message
+                </button>
+
+            
+                {messages.map(msg => (
+                    <div key={msg.id}>
+                    {msg.data.uid} send {msg.data.text}
+                    </div>
+                ))}
+              
+            </section>
+        </div>  
+    )
+}
+
+
+export default Lobby
+

client/src/Views/Profile.jsx

@@ -29,12 +29,12 @@ const Profile = () => {
                             </div>
                             <div className="profile-info">
                                 <h2>Personal stats</h2>
-                                <p className='stats-title'>Email:</p>
-                                <p>asddddddddddddddddddddddddddddddddddddddd</p>
-                                <p className='stats-title'>Phone Number: </p>
-                                <p>sadddddddddddddddddddddddasdasdasd</p>
-                                <p className='stats-title'>Address: </p>
-                                <p>sadddddddddddddddddddddddasdasdasd</p>
+                                <p className='stats-title'>Name:</p>
+                                <p>Sam Porter Bridges</p>
+                                <p className='stats-title'>Objective:</p>
+                                <p>Rebuild an America worthy of presidency</p>
+                                <p className='stats-title'>Favored Strategy</p>
+                                <p>Sorry, what?</p>
 
                                 <div className="stats-actions">
                                 <button className="edit-stats-button">Edit stats</button>

client/src/components/SideBar.css

@@ -25,6 +25,7 @@
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease; 
+    color: black;
     
 }
 

client/src/components/SideBar.jsx

@@ -26,29 +26,26 @@ function SideBar({pageTitle}) {
         <div className="sidebar-bar">
           <div className="navigator">
             <div>
-                    <div className="icon home-icon" title="Home">
-                        <  GiSuspensionBridge   size={60}/>
-                    </div>
+                <NavLink to="/" className="icon home-icon" title="Home">
+                    <GiSuspensionBridge size={60} />
+                </NavLink>
 
+                <NavLink to="/lobby" className="icon" title="Lobby">
+                     <IoIosChatboxes size={40} />
+                </NavLink>
 
-                    <div className="icon" title="Lobby">
-                        <IoIosChatboxes size={40}/>
-                    </div>
-
-                    <div className="icon" title="Play">
-                       <GiTicTacToe  size={40}/>
-                    </div>
-                    
+                <NavLink to="/play" className="icon" title="Play">
+                      <GiTicTacToe size={40} />
+                </NavLink>
             </div>
             
             <div>
+                  <NavLink to="/profile" className="icon" title="Profile">
+                      <GiVikingHelmet size={40} />
+                  </NavLink>
 
-                <button className="icon-button" title="Profile">
-                    <GiVikingHelmet  size={40}/>
-                </button>
-
-                <button className="icon-button" title="Logout" onClick={handleSignOut}>
-                    <IoLogOut  size={40}/>
+                 <button className="icon-button" title="Logout" onClick={handleSignOut}>
+                    <IoLogOut size={40} />
                 </button>
                 
             </div>

client/src/firebase/config.js

 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
+import { getFirestore } from 'firebase/firestore';
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -16,4 +17,5 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-export const auth= getAuth(app);
\ No newline at end of file
+export const auth= getAuth(app);
+export const db = getFirestore(app);
\ No newline at end of file