getting data from firebase

src/App.js

@@ -23,12 +23,18 @@ function App() {
     <Router>
       <nav>
         <Link to="/" > Home </Link>
-        <Link to="/createpost"> Create Post </Link>
-        { !isAuth ? <Link to="/login" > Login </Link> : <button onClick={signUserOut}> Log out </button> }
+        {!isAuth ? ( 
+          <Link to="/login" > Login </Link> 
+        ) : (
+          <>
+            <Link to="/createpost"> Create Post </Link>
+            <button onClick={signUserOut}> Log out </button>
+          </>
+        )}
       </nav>
       <Routes>
         <Route path='/' element={<Home />} />
-        <Route path='/createpost' element={<CreatePost />} />
+        <Route path='/createpost' element={<CreatePost isAuth={isAuth} />} />
         <Route path='/login' element={<Login setIsAuth={setIsAuth} />} />
       </Routes>
     </Router>

src/pages/CreatePost.js

@@ -1,14 +1,15 @@
 import { addDoc, collection } from 'firebase/firestore';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { db, auth } from '../firebase-config';
 import { useNavigate } from 'react-router-dom';
 
-function CreatePost() {
+function CreatePost({ isAuth }) {
   const [title, setTitle] = useState("");
   const [postText, setPostText] = useState("");
 
   const postsCollectionRef = collection(db, "posts")
   let navigate = useNavigate();
+
   const createPost = async () => {
     await addDoc(postsCollectionRef, { 
       title, 
@@ -18,6 +19,12 @@ function CreatePost() {
     navigate("/");
   };
 
+  useEffect(() => {
+    if (!isAuth) {
+      navigate("/login");
+    }
+  }, []);
+
   return (
     <div className='createPostPage'>
       <div className="cpContainer">
@@ -26,21 +33,21 @@ function CreatePost() {
           <label>Title:</label>
           <input 
             placeholder='Title...'
-            onChange={(even) => {
-              setTitle(even.target.value);
+            onChange={(event) => {
+              setTitle(event.target.value);
             }}   
           />
         </div>
         <div className="inputGp">
           <label>Post:</label>
           <textarea 
             placeholder='Post...'
-            onChange={(even) => {
-              setPostText(even.target.value);
+            onChange={(event) => {
+              setPostText(event.target.value);
             }}  
           />
         </div>
-        <button>Submit Post</button>
+        <button onClick={createPost}>Submit Post</button>
       </div>
     </div>
   )

src/pages/Home.js

@@ -1,11 +1,23 @@
-import React from 'react';
+import { collection, getDocs } from 'firebase/firestore';
+import React, { useEffect, useState } from 'react';
+import { db } from '../firebase-config';
 
 function Home() {
+  const [postLists, setPostList] = useState([]);
+  const postsCollectionRef = collection(db, "posts");
+
+  useEffect(() => {
+    const getPosts = async () => {
+      const data = await getDocs(postsCollectionRef);
+      setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
+    };
+
+    getPosts();
+  });
+
   return (
-    <div>
-      Home
-    </div>
+    <div className='homePage'> </div>
   )
 }
 
-export default Home;
+export default Home;