bug fixes

alexandyrzph · Aug 3, 2022 · 7bd3226 · 7bd3226
1 parent b945d0a
commit 7bd3226
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 18 deletions.
diff --git a/pixelplace/src/components/Comment/Comment.js b/pixelplace/src/components/Comment/Comment.js
@@ -23,7 +23,7 @@ const Comment = ({ photoURL, displayName, comment, commentId, uid, currentUserId
                 <p className="w-full font-bold">@{displayName}</p>
                 <p className="w-full">{comment}</p>
             </div>
-            {currentUserId == uid ? (
+            {currentUserId === uid ? (
                 <HiX
                     cursor={"pointer"}
                     onClick={deleteCommentHandler}

diff --git a/pixelplace/src/components/Navbar/Navbar.js b/pixelplace/src/components/Navbar/Navbar.js
@@ -35,7 +35,7 @@ const Navbar = () => {
 
     return (
         <div className="bg-neu-white w-full shadow-md">
-            <ul className="flex justify-between items-center max-w-md px-2 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 py-2">
+            <ul className="flex justify-between items-center max-w-md px-2 md:px-0 md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full py-2">
                 <li>
                     <Link
                         className="text-2xl font-logo tracking-wider text-[#2e2e2e] hover:text-black duration-200"

diff --git a/pixelplace/src/components/PostDetails/PostDetails.js b/pixelplace/src/components/PostDetails/PostDetails.js
@@ -7,7 +7,17 @@ import { ToastContainer } from "react-toastify";
 import { getPostById } from "../../api/PostsAPI";
 import { toastError } from "../../utils/Toast";
 import { db } from "../../firebase";
-import { addDoc, collection, deleteDoc, doc, onSnapshot } from "firebase/firestore";
+import {
+    addDoc,
+    collection,
+    deleteDoc,
+    doc,
+    onSnapshot,
+    orderBy,
+    query,
+    serverTimestamp,
+    where,
+} from "firebase/firestore";
 import { uuidv4 } from "@firebase/util";
 import Comment from "../Comment/Comment";
 import { Transition } from "@tailwindui/react";
@@ -34,13 +44,17 @@ const PostDetails = () => {
     }, [postId]);
 
     useEffect(() => {
-        onSnapshot(collection(db, "Posts", postId, "comments"), (snapshot) => {
-            const commentSnap = snapshot.docs.map((comment) => ({
-                ...comment.data(),
-                commentId: comment.id,
-            }));
-            setComments(commentSnap);
-        });
+        onSnapshot(
+            query(collection(db, "Posts", postId, "comments")),
+            orderBy("timeStamp", "desc"),
+            (snapshot) => {
+                const commentSnap = snapshot.docs.map((comment) => ({
+                    ...comment.data(),
+                    commentId: comment.id,
+                }));
+                setComments(commentSnap);
+            }
+        );
     }, [postId]);
 
     const deletePostHandler = () => {
@@ -56,9 +70,7 @@ const PostDetails = () => {
             return;
         }
         const { photoURL, displayName, uid } = user;
-        const commentData = { uid, photoURL, displayName, comment };
-        console.log(commentData);
-
+        const commentData = { uid, photoURL, displayName, comment, timeStamp: serverTimestamp() };
         addDoc(collection(db, "Posts", postId, `comments`), commentData)
             .then()
             .catch((err) => toastError(err));
@@ -73,7 +85,7 @@ const PostDetails = () => {
         );
     } else {
         return (
-            <div>
+            <div className="">
                 <ToastContainer />
                 <div className="relative flex flex-col max-w-md sm:max-w-md md:max-w-xl mx-auto h-screen mt-16">
                     <div className="mx-auto max-h-[450px] w-full">
@@ -126,7 +138,7 @@ const PostDetails = () => {
                         <div className="flex justify-between mt-4">
                             <div className="flex justify-center items-center gap-6">
                                 <img
-                                    className="border-2 border-neu-black cursor-pointer inline-block h-9 w-9 rounded-full ring-2 ring-white"
+                                    className="border-2 border-neu-black  cursor-pointer inline-block h-9 w-9 rounded-full ring-2 ring-white"
                                     src={post?.ownerAvatarURL}
                                     alt="avatarImage"
                                 />

diff --git a/pixelplace/src/components/PostItem/PostItem.js b/pixelplace/src/components/PostItem/PostItem.js
@@ -91,11 +91,11 @@ const PostItem = ({
                         </div>
                     ) : null}
                 </div>
-                <Link to={postId}>
+                <Link to={`/posts/${postId}`}>
                     <img src={image} alt="" />
                 </Link>
                 <div className="p-5">
-                    <Link to="#">
+                    <Link to={`/posts/${postId}`}>
                         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 ">
                             {title}
                         </h5>
@@ -109,7 +109,7 @@ const PostItem = ({
                     )}
 
                     <div className="inline-flex items-center">
-                        <Link to={postId}>
+                        <Link to={`/posts/${postId}`}>
                             <button className="relative flex-grow-1 w-full lg:w-full hover:shadow-neu-shadow hover:-translate-y-1 duration-200 border-2 outline-none border-neu-black px-6 py-3 rounded-lg bg-neu-yellow font-bold">
                                 Read More
                             </button>