second commit

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^11.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-firebase-hooks": "^5.1.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,25 +1,87 @@
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
 
+/*
+import firebase from 'firebase/';
+import 'firebase/firestore';
+import 'firebase/auth';
+*/
+import firebase from 'firebase/compat/app'; 
+
+import 'firebase/compat/firestore';
+
+import 'firebase/compat/auth'; 
+
+import {useAuthState, useSignInWithGoogle} from 'react-firebase-hooks/auth';
+import {useCollectionData} from 'react-firebase-hooks/firestore';
+
+firebase.initializeApp({
+  apiKey: "AIzaSyDhXnMyDGw3ei7-4M-x1LXcEZvATPx0tbc",
+  authDomain: "yapper-204ab.firebaseapp.com",
+  projectId: "yapper-204ab",
+  storageBucket: "yapper-204ab.firebasestorage.app",
+  messagingSenderId: "31767433105",
+  appId: "1:31767433105:web:b75ea782115bc2fe8a1430",
+  measurementId: "G-ERFF6SL9W6"
+});
+
+const auth = firebase.auth();
+const firestore  =firebase.firestore();
+
+const [user] = useAuthState(auth);
+
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        
       </header>
+
+      <section>
+        {user ? <ChatRoom/> : <SignIn/>}
+      </section>
     </div>
   );
 }
 
+function SignIn(){
+  const signInWithGoogle = () =>{
+    const provider = new firebase.auth.GoogleAuthProvider();
+    auth.signInWithPopup(provider);
+  }
+
+  return(
+    <button onClick={signInWithGoogle}>Sign in with google</button>
+  )
+}
+
+function SignOut(){
+  return auth.currentUser && (
+    <button onClick={() => auth.signOut()}>Sign Out</button>
+  )
+}
+
+
+function ChatRoom(){
+  const messagesRef = firestore.collection('messages');
+  const query = messagesRef.orderBy('createdAt').limit(25);
+
+  const [messages] = useCollectionData(query, {idField: 'id'});
+
+  return (
+    <>
+    <div>
+      {messages && messages.map(msg => <ChatMessage key={msg.id} message={msg}></ChatMessage>)}
+    </div>
+    </>
+  )
+}
+
+function ChatMessage(props){
+  const {text, uid} = props.message;
+
+  return <p>{text}</p>
+}
+
+
 export default App;