react-firebase-hooks added

alexandyrzph · Aug 4, 2022 · 70b3126 · 70b3126
1 parent 019de04
commit 70b3126
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 24 deletions.
diff --git a/pixelplace/package-lock.json b/pixelplace/package-lock.json
diff --git a/pixelplace/package.json b/pixelplace/package.json
@@ -12,12 +12,14 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.0.3",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.3",
     "react-toastify": "^9.0.7",
     "uuid": "^8.3.2",
+    "vue": "^2.7.8",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },

diff --git a/pixelplace/public/index.html b/pixelplace/public/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>PixelPlace</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/pixelplace/src/App.js b/pixelplace/src/App.js
@@ -16,8 +16,8 @@ import { BeatLoader } from "react-spinners";
 import "react-toastify/dist/ReactToastify.css";
 
 function App() {
-    const { isLoading, user } = useUserAuth();
-    
+    const { isLoading } = useUserAuth();
+
     if (!isLoading) {
         return (
             <div className="App">

diff --git a/pixelplace/src/components/Posts/Posts.js b/pixelplace/src/components/Posts/Posts.js
@@ -1,31 +1,34 @@
 import { useUserAuth } from "../../context/UserAuthContext";
-import { useEffect, useState } from "react";
 import { PostItem } from "..";
-import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
+import { useCollection } from "react-firebase-hooks/firestore";
+import { collection, orderBy, query } from "firebase/firestore";
+import { BeatLoader } from "react-spinners";
 import { db } from "../../firebase";
 import { Link } from "react-router-dom";
 
 const Posts = () => {
     const { user } = useUserAuth();
-    const [posts, setPosts] = useState([]);
-    useEffect(() => {
-        const q = query(collection(db, "Posts"), orderBy("timeStamp", "desc"));
-        onSnapshot(
-            q,
-            (snapshot) => {
-                const posts = snapshot.docs.map((post) => ({ postId: post.id, ...post.data() }));
-                setPosts(posts);
-            },
-            (err) => console.log(err)
-        );
-    }, []);
+
+    const [values, loading] = useCollection(
+        query(collection(db, "Posts"), orderBy("timeStamp", "desc")),
+        {
+            snapshotListenOptions: { includeMetadataChanges: true },
+        }
+    );
 
     return (
         <div className="relative max-w-md px-1 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full h-screen py-16">
+            {loading && (
+                <div className="flex justify-center items-center h-screen bg-neu-white">
+                    <BeatLoader size={"5rem"} color={"#1e1e1e"} />
+                </div>
+            )}
             <div className="masonry sm:masonry-sm md:masonry-md xl:masonry-lg">
-                {posts.length > 0 ? (
-                    posts.map((post) => <PostItem key={post.postId} {...post} user={user} />)
-                ) : (
+                {values &&
+                    values.docs.map((post) => (
+                        <PostItem key={post.id} {...post.data()} postId={post.id} user={user} />
+                    ))}
+                {values?.empty && (
                     <div>
                         <h2 className="text-[40px] text-center font-neu absolute top-[20%] left-0 right-0">
                             No posts found

diff --git a/pixelplace/src/firebase.js b/pixelplace/src/firebase.js
@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { browserLocalPersistence, getAuth, setPersistence } from "firebase/auth";
+import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
 
@@ -16,8 +16,5 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
 export const auth = getAuth(app);
-setPersistence(auth, browserLocalPersistence)
-    .then()
-    .catch((err) => console.log(err));
 export const storage = getStorage(app);
 export default app;