delete button and getting item from localStorage

developer-rak · Jul 8, 2024 · 6e3bc0b · 6e3bc0b
1 parent 47ce4a5
commit 6e3bc0b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,7 +9,7 @@ import { signOut } from 'firebase/auth';
 
 
 function App() {
-  const [isAuth, setIsAuth] = useState(false);
+  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
 
   const signUserOut = () => {
     signOut(auth).then(() => {
@@ -33,7 +33,7 @@ function App() {
         )}
       </nav>
       <Routes>
-        <Route path='/' element={<Home />} />
+        <Route path='/' element={<Home isAuth={isAuth} />} />
         <Route path='/createpost' element={<CreatePost isAuth={isAuth} />} />
         <Route path='/login' element={<Login setIsAuth={setIsAuth} />} />
       </Routes>

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -1,8 +1,8 @@
-import { collection, getDocs } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
-import { db } from '../firebase-config';
+import { collection, deleteDoc, doc, getDocs } from 'firebase/firestore';
+import { auth, db } from '../firebase-config';
 
-function Home() {
+function Home({ isAuth }) {
   const [postLists, setPostList] = useState([]);
   const postsCollectionRef = collection(db, "posts");
 
@@ -15,8 +15,37 @@ function Home() {
     getPosts();
   });
 
+  const deletePost = async (id) => {
+    const postDoc = doc(db, "posts", id)
+    await deleteDoc(postDoc);
+  };
+
   return (
-    <div className='homePage'> </div>
+    <div className='homePage'>
+      {postLists.map((post) => {
+        return (
+          <div className='post'>
+            <div className="postHeader">
+              <div className="title">
+                <h1> {post.title} </h1>
+              </div>
+              <div className="deletePost">
+                {isAuth && post.author.id === auth.currentUser.uid && (
+                  <button
+                  onClick={() => {
+                    deletePost(post.id);
+                  }}  
+                  > &#128465; </button>
+                )}
+              </div>
+            </div>
+            <div className="postTextContainer"> {post.postText} </div>
+            <h3>@{ post.author.name }</h3>
+          </div>
+        )
+
+      })}
+    </div>
   )
 }