feat: add verified icon to mentors

SarthakMittal777 · Apr 15, 2024 · af7a159 · af7a159
1 parent b69091f
commit af7a159
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/src/components/Posts.jsx b/src/components/Posts.jsx
@@ -17,7 +17,7 @@ import { useAuthState } from "react-firebase-hooks/auth";
 import { CgProfile } from "react-icons/cg";
 import Modal from "./Modal";
 import { BiSolidUpvote, BiSolidDownvote } from "react-icons/bi";
-import { MdDelete } from "react-icons/md";
+import { MdOutlineDeleteOutline } from "react-icons/md";
 import { FaReply } from "react-icons/fa";
 import { categoryData } from "../data";
 
@@ -40,10 +40,10 @@ const Posts = (props) => {
     // const u = query(usersRef, orderBy("timestamp", "desc"));
     const usersShot = await getDocs(usersRef);
     const usersData = usersShot.docs.map((doc) => {
-      // return doc.data().email;
+      return doc.data().mentor;
     });
     setUserData(usersData);
-    // console.log("userData", ...userData);
+    console.log("userData", ...usersData);
   };
 
   const fetchData = async () => {
@@ -304,7 +304,7 @@ const Posts = (props) => {
   };
 
   useEffect(() => {
-    console.count(1);
+    // console.count(1);
     fetchData();
     // getUser();
   }, [props.category]);
@@ -378,7 +378,7 @@ const Posts = (props) => {
                   fetchData();
                 }}
               >
-                <MdDelete size={18} />
+                <MdOutlineDeleteOutline size={18} />
               </button>
             </div>
 

diff --git a/src/config/firebase.jsx b/src/config/firebase.jsx
@@ -46,6 +46,7 @@ const signInWithGoogle = async () => {
         name: user.displayName,
         authProvider: "google",
         email: user.email,
+        mentor: false,
       });
     }
   } catch (err) {

diff --git a/src/pages/Post.jsx b/src/pages/Post.jsx
@@ -5,12 +5,20 @@ import Footer from "../components/Footer";
 import NavBar from "../components/NavBar";
 import { BiSolidUpvote, BiSolidDownvote } from "react-icons/bi";
 import { db, auth } from "../config/firebase";
-import { doc, getDoc, updateDoc } from "firebase/firestore";
+import {
+  collection,
+  doc,
+  getDoc,
+  updateDoc,
+  getDocs,
+} from "firebase/firestore";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { RiVerifiedBadgeFill } from "react-icons/ri";
 
 const Post = () => {
   const [showReply, setShowReply] = useState(false);
   const [newComment, setNewComment] = useState([]);
+  const [userData, setUserData] = useState([]);
 
   const { id } = useParams();
   const navigate = useNavigate();
@@ -25,6 +33,18 @@ const Post = () => {
   // console.log(user);
   const docRef = doc(db, "posts", id);
 
+  const getUser = async () => {
+    const usersRef = collection(db, "users");
+    // const u = query(usersRef, orderBy("timestamp", "desc"));
+    // console.log(usersRef);
+    const usersShot = await getDocs(usersRef);
+    const usersData = usersShot.docs.map((doc) => {
+      return doc.data();
+    });
+    setUserData(usersData);
+    console.log("userData", ...usersData);
+  };
+
   const upVote = async () => {
     var AlreadyUpvote = postDetail.upvotes.find((val) => {
       return val === user.uid;
@@ -164,11 +184,13 @@ const Post = () => {
     const docSnap = await getDoc(docRef);
     // console.log(docSnap.data());
 
+    const cmtWid = {
+      comment: newComment,
+      uid: user.uid,
+    };
     const listComment = docSnap.data().comments;
-    const updatedComment = listComment
-      ? [...listComment, newComment]
-      : [newComment];
-    // console.log(updatedComment);
+    const updatedComment = listComment ? [...listComment, cmtWid] : [cmtWid];
+    console.log(updatedComment);
 
     await updateDoc(docRef, {
       comments: updatedComment,
@@ -203,8 +225,13 @@ const Post = () => {
 
   useEffect(() => {
     fetchPost();
+    // console.count(1);
   }, [postDetail.comments]);
 
+  useEffect(() => {
+    getUser();
+  }, []);
+
   return (
     <React.Fragment>
       <NavBar />
@@ -293,16 +320,30 @@ const Post = () => {
           <div className="flex flex-col gap-6">
             {postDetail.comments
               ? postDetail.comments.map((post, key) => {
+                  const verified = userData.find((val) => {
+                    return val.uid === post.uid && val.mentor;
+                  });
                   return (
                     <div
                       key={key}
                       className="border-blue-300 shadow-md border p-4 rounded-md flex flex-col gap-4"
                     >
                       <div className="border-black flex flex-row gap-4 items-center">
                         <CgProfile size={36} />
-                        <div>Person {key + 1}</div>
+                        <div>{verified ? verified.name : "Person"} </div>
+
+                        {verified ? (
+                          <div className="font-bold border-double border border-[#24a865] p-2 rounded flex flex-row gap-1 items-center">
+                            <RiVerifiedBadgeFill color="#24a865" size={24} />{" "}
+                            Mentor verified
+                          </div>
+                        ) : (
+                          ""
+                        )}
                       </div>
-                      <p className="text-ellipsis line-clamp-[10]">{post}</p>
+                      <p className="text-ellipsis line-clamp-[10]">
+                        {post.comment}
+                      </p>
 
                       {/* {showReply ? (
                         <div className="pl-20 flex flex-col gap-4">