From 86f58a64b929ed6588de468eebdd55795269f375 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Sat, 27 Jul 2024 19:22:20 +0530
Subject: [PATCH] fixed

---
 src/components/About/Navbar.jsx               |   3 +-
 .../ProfileComponent/ProfileCard.jsx          |   2 +-
 src/components/blogs/BlogReadPage.css         |   6 +
 src/components/blogs/BlogReadPage.jsx         |  72 ++++----
 src/components/blogs/Blogswrite.jsx           |   7 +-
 src/components/blogs/Discussion.css           | 163 ++++++++++++++++++
 src/components/blogs/Discussions.jsx          |  70 ++++++++
 7 files changed, 282 insertions(+), 41 deletions(-)
 create mode 100644 src/components/blogs/Discussion.css
 create mode 100644 src/components/blogs/Discussions.jsx

diff --git a/src/components/About/Navbar.jsx b/src/components/About/Navbar.jsx
index 04b0c1b6..73eee70c 100644
--- a/src/components/About/Navbar.jsx
+++ b/src/components/About/Navbar.jsx
@@ -6,7 +6,7 @@ import { auth } from "../../firebase/auth";
 import { useNavigate } from "react-router-dom";
 import { Switch } from 'antd';
 import { ThemeContext } from '../../App';
-import { toast } from 'react-toastify';
+import { ToastContainer, toast } from "react-toastify";
 
 // Signout function
 const signOutUser = (navigate, setError) => {
@@ -74,6 +74,7 @@ const Navbar = () => {
 
   return (
     <nav className="navbar">
+         <ToastContainer />
       <LogoSection />
       <MenuSection
         user={user}
diff --git a/src/components/ProfileComponent/ProfileCard.jsx b/src/components/ProfileComponent/ProfileCard.jsx
index 8ff3fc34..a39afaae 100644
--- a/src/components/ProfileComponent/ProfileCard.jsx
+++ b/src/components/ProfileComponent/ProfileCard.jsx
@@ -437,7 +437,7 @@ const ProfileCard = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <i className={`bx bxl-${userInfo.firstname.toLowerCase()}`}></i>
+              <i className={`bx bxl-${userData.firstname}`}></i>
             </a>
           </div>
           <div className="skills-section">
diff --git a/src/components/blogs/BlogReadPage.css b/src/components/blogs/BlogReadPage.css
index 8e6f3fef..2b854d94 100644
--- a/src/components/blogs/BlogReadPage.css
+++ b/src/components/blogs/BlogReadPage.css
@@ -37,6 +37,12 @@
     display: flex;
     align-items: center;
   }
+  .comment-button{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap:2px;
+  }
   .blog-read-page_container .blog-tags{
     text-align: left;
   }
diff --git a/src/components/blogs/BlogReadPage.jsx b/src/components/blogs/BlogReadPage.jsx
index 1e23ea4d..bf05cb79 100644
--- a/src/components/blogs/BlogReadPage.jsx
+++ b/src/components/blogs/BlogReadPage.jsx
@@ -6,7 +6,7 @@ import DOMPurify from "dompurify";
 import { marked } from "marked";
 import upvote from  "./upvote-svgrepo-com.svg"
 import downvote from  "./downvote-svgrepo-com.svg"
-
+import { FaRegComment } from "react-icons/fa";
 import Footer from "../Footer/Footer";
 import Logo from "../../assets/logo.webp";
 import randomAvatar from "../../assets/avatar1.png"; // Assuming you have an avatar image
@@ -20,6 +20,7 @@ import { MdModeEdit, MdFavorite, MdFavoriteBorder } from "react-icons/md";
 import { FaEnvelope, FaRegClipboard,  FaTimes,  FaWhatsapp } from "react-icons/fa";
 import { FaTrash, FaShareAlt , FaFacebook, FaTwitter, FaLinkedin } from "react-icons/fa";
 import Navbar from "../Navbar/Navbar";
+import Discussions from "./Discussions";
 
 
 const BlogReadPage = () => {
@@ -177,29 +178,40 @@ const BlogReadPage = () => {
   const createMarkup = (content) => {
     return { __html: DOMPurify.sanitize(marked(content)) };
   };
-  const handleNewCommentSubmit = async (event) => {
-    event.preventDefault();
+
+  const handleNewCommentSubmit = async (newComment, user) => {
     if (!isLoggedIn) {
       setIsNotLoggedInModalVisible(true);
       return;
     }
+  
+    if (newComment.trim() === '') {
+      alert("Comment cannot be empty!");
+      return;
+    }
+  
     try {
       const db = getDatabase();
       const commentsRef = ref(db, `articles/${id}/comments`);
       const newCommentRef = push(commentsRef);
       const commentData = {
-        author: user.firstname, // Replace with actual user data if available
-        content: value.current.value,
+        author: `${user.firstname} ${user.surname}`,
+        content: newComment,
+        avatar: user.profilePic || user.avatar || randomAvatar,
+        timestamp: new Date().toISOString(),
       };
       await update(newCommentRef, commentData);
-      console.log(commentData)
       setComments([...comments, commentData]);
-      setNewComment('');
-      value.current.value=""
     } catch (error) {
       console.error('Error submitting comment:', error);
     }
   };
+  
+  const handleCloseModal = () => {
+    setIsModal(false);
+  };
+  
+  
   const handleDelete = async (id) => {
     console.log(user)
       let isUser=true
@@ -278,7 +290,7 @@ const BlogReadPage = () => {
     const handleOkayClick = () => {
       navigate('/');
     };
-
+ console.log()
   return (
     <>
      <Navbar/>
@@ -287,7 +299,7 @@ const BlogReadPage = () => {
           <div className="blog-header">
             <h1 className="blog-title">{blog.title}</h1>
             <div className="blog-meta">
-              <img src={blog.pic ? blog.pic :(blog.avatar ? blog.avatar : randomAvatar)} alt="Author Avatar" className="author-avatar" />
+              <img src={blog.profilePic ? blog.profilePic :(blog.avatar ? blog.avatar : randomAvatar)} alt="Author Avatar" className="author-avatar" />
               <div className="meta-info">
                 <p className="author-name">{blog.author}</p>
                 <p className="blog-date">{moment(blog.createdAt).fromNow()}</p>
@@ -309,10 +321,15 @@ const BlogReadPage = () => {
                 </div>  
               </div>
               <div className="right_blog_icon" style={{display:"flex"}}>
+              <div className="comment-button"  onClick={()=>setIsModal(true)}>
+              <FaRegComment size={16} /><p>{Object.keys(comments).length}</p>
+            </div>
+              
               <div className="share-button" onClick={handleShareClick}>
               <FaShareAlt size={16} />
             </div>
-              <button style={{padding:"10px",border:"solid 1px black"}} onClick={()=>setIsModal(true)}>Comment</button>
+       
+              {/* <button style={{padding:"10px",border:"solid 1px black"}} onClick={()=>setIsModal(true)}>Comment</button> */}
               { isLoggedIn &&  blog.createdBy === userId && (
               <>  
               <div className="Edit_icon">
@@ -413,32 +430,13 @@ const BlogReadPage = () => {
           <p>You need to be logged in to perform this action.</p>
         </Modal>
 
-{
-isModal&&<>
-<div className="modal-jobs1">  <FaTimes onClick={handleCLoseModal} style={{position:"absolute",right:"20px",top:"20px",cursor:"pointer",}} size={'2rem'}/>
-
-<div className="jobs-container1">
-  <h1>Discussions</h1>
-  <div style={{display:"flex",flexDirection:"column",fontSize:"20px",marginBottom:"60px"}}>
-  <p style={{display:"flex",alignItems:"center",fontSize:"15px"}}>
-  <img height={"60px"} width={"60px"} src="https://static.vecteezy.com/system/resources/thumbnails/005/129/844/small_2x/profile-user-icon-isolated-on-white-background-eps10-free-vector.jpg"></img>{user.firstname}
-  </p>
-  <textarea ref={value} placeholder="Enter Your Comment" style={{borderRadius:"20px",padding:"10px",height:"100px",minHeight:"100px",minWidth:"100%",maxWidth:"100%"}}/><button style={{marginLeft:"20px",width:"100px",padding:"10px",marginTop:"20px",background:"blue",color:"white"}} onClick={handleNewCommentSubmit}>Comment</button>
-  </div>
-  {
-      comments.map((data)=>{
-        return <div className="abc" style={{backgroundColor:"white",margin:"auto",paddingBottom:"20px",height:"160px"}}><p style={{display:"flex",alignItems:"center",fontSize:"15px"}}>
-        <img height={"60px"} width={"60px"} src="https://static.vecteezy.com/system/resources/thumbnails/005/129/844/small_2x/profile-user-icon-isolated-on-white-background-eps10-free-vector.jpg"></img>{data.author}
-        </p><p style={{color:"black",marginTop:"10px",textAlign:"left",paddingLeft:"60px",fontSize:"14px"}}>{data.content}</p><div style={{width:"100%",paddingLeft:"60px",display:"flex",paddingTop:"20px",gap:"20px",fontSize:"10px"}}><img src={upvote}></img><img src={downvote}></img>&nbsp;Reply</div></div>
-      })
-    }
-
-
-
-</div>
-</div>
-<div className="blackb"></div></>
-   }
+        <Discussions
+  user={user}
+  comments={comments}
+  handleNewCommentSubmit={handleNewCommentSubmit}
+  handleCloseModal={handleCloseModal}
+  isModal={isModal}
+/>
     </>
   );
 };
diff --git a/src/components/blogs/Blogswrite.jsx b/src/components/blogs/Blogswrite.jsx
index e31885c5..981c99a8 100644
--- a/src/components/blogs/Blogswrite.jsx
+++ b/src/components/blogs/Blogswrite.jsx
@@ -8,8 +8,9 @@ import { Switch } from 'antd';
 // import ReactMarkdown from 'react-markdown';
 // import remarkGfm from 'remark-gfm';
 // import rehypeRaw from 'rehype-raw';
+
 import './BlogWrite.css'; // Import the new CSS file
-import { toast, ToastContainer } from 'react-toastify';
+import { ToastContainer, toast } from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 
 import { ThemeContext } from '../../App';
@@ -131,7 +132,9 @@ const BlogWrite = () => {
       await update(ref(db, 'users/' + userId), {
         articleCreated: (user.articleCreated ? user.articleCreated + ',' : '') + articleId,
       });
-   
+      toast.success("Blog Created Successfully 🚀",{
+        className: "toast-message",
+      });
       navigate('/blogs');
     } catch (error) {
      toast.error(error,{
diff --git a/src/components/blogs/Discussion.css b/src/components/blogs/Discussion.css
new file mode 100644
index 00000000..c1903fc9
--- /dev/null
+++ b/src/components/blogs/Discussion.css
@@ -0,0 +1,163 @@
+.discussion-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #dark .discussion-modal .discussion-modal-content{
+    background-color: #1a1a1a;
+    color: white;
+  }
+  .discussion-modal .discussion-modal-content {
+    background-color: white;
+    color: #1a1a1a;
+    width: 800px !important;
+    height: 400px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    min-height: 300px;
+    border-radius: 8px;
+    padding: 20px;
+    position: relative;
+  }
+  
+  .discussion-modal .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #3333336c;
+    padding-bottom: 10px;
+  }
+  #dark  .discussion-modal .modal-header{
+    border-bottom: 1px solid #333;
+  }
+  
+  .discussion-modal .close-icon {
+    cursor: pointer;
+    font-size: 1.5rem;
+  }
+  
+  .discussion-modal .comment-box {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .discussion-modal .user-info {
+    display: flex;
+    align-items: center;
+  }
+  
+  .discussion-modal .user-avatar {
+    border-radius: 50%;
+    width: 40px;
+    object-fit: cover;
+    height: 40px;
+    margin-right: 10px;
+  }
+ .user-avatar-comment{
+    border-radius: 50%;
+    width: 30px;
+    object-fit: cover;
+    height: 30px;
+    margin-right: 5px;
+ }
+  
+  .discussion-modal .user-name {
+    font-weight: bold;
+  }
+  #dark   .discussion-modal  .comment-input{
+    border: 1px solid #333;
+    background-color: #2a2a2a;
+    color: white;
+  }
+  .discussion-modal  .comment-input {
+    margin-top: 10px;
+    border-radius: 4px;
+    padding: 10px;
+    border: 1px solid #333;
+    background-color: #f6f4f4;
+    color: rgb(19, 19, 19);
+    resize: none;
+    width: 100%;
+    height: 100px;
+  }
+  
+  .discussion-modal .submit-btn {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .discussion-modal .comment-list {
+    margin-top: 20px;
+  }
+  
+  #dark .discussion-modal .comment {
+    border-bottom: 1px solid #333;
+    padding: 10px 0;
+  }
+  .discussion-modal .comment {
+    border-bottom: 1px solid #33333338;
+    padding: 10px 0;
+  }
+  
+  .discussion-modal .comment-header {
+    display: flex;
+    align-items: center;
+  }
+  
+  .discussion-modal  .comment-author {
+    margin-left: 10px;
+  }
+  
+  .discussion-modal  .author-name {
+    font-weight: bold;
+  }
+  
+  .discussion-modal .comment-time {
+    font-size: 0.8rem;
+    color: #999;
+    margin-left: 10px;
+  }
+  
+  .discussion-modal .comment-content {
+    text-align: left;
+ 
+    margin: 0px 50px;
+    margin-top: 10px;
+    color: #333;
+  }
+  #dark   .discussion-modal .comment-content{
+    color: #ccc;
+  }
+  .discussion-modal  .comment-actions {
+
+    display: flex;
+    margin: 15px 50px 0px 50px;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .discussion-modal .vote-icon {
+    cursor: pointer;
+  }
+  
+  .discussion-modal  .reply {
+    cursor: pointer;
+    color: #1d1d1d;
+    font-weight: 400;
+  }
+  #dark .discussion-modal  .reply {
+    cursor: pointer;
+    color: #007bff;
+  }
\ No newline at end of file
diff --git a/src/components/blogs/Discussions.jsx b/src/components/blogs/Discussions.jsx
new file mode 100644
index 00000000..6a1599e4
--- /dev/null
+++ b/src/components/blogs/Discussions.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { FaTimes, FaChevronUp, FaChevronDown } from 'react-icons/fa';
+import moment from 'moment';
+import './Discussion.css'; // Make sure to create and include this file
+import randomAvatar from "../../assets/avatar1.png";
+
+const Discussions = ({ user, comments, handleNewCommentSubmit, handleCloseModal, isModal }) => {
+  const [newComment, setNewComment] = useState('');
+
+  const handleSubmit = () => {
+    handleNewCommentSubmit(newComment, user);
+    setNewComment(''); // Clear the textarea after submission
+  };
+
+  return (
+    isModal && (
+      <div className="discussion-modal">
+        <div className="discussion-modal-content">
+          <div className="modal-header">
+            <h2>Discussions ({comments.length} Threads)</h2>
+            <FaTimes className="close-icon" onClick={handleCloseModal} />
+          </div>
+          <div className="comment-box">
+            <div className="user-info">
+              <img src={user.profilePic || user.avatar || randomAvatar} alt="User Avatar" className="user-avatar" />
+              <span className="user-name">{user.firstname} {user.surname}</span>
+            </div>
+            <textarea
+              placeholder="Write Your Comments Here"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+              className="comment-input"
+            />
+            <button className="submit-btn" onClick={handleSubmit}>
+              Submit
+            </button>
+          </div>
+          <div className="comment-list">
+            {comments.map((data, index) => (
+              <Comment key={index} data={data} />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+const Comment = ({ data }) => {
+    console.log(data)
+  return (
+    <div className="comment">
+      <div className="comment-header">
+        <img src={data.avatar || "https://via.placeholder.com/50"} alt="User Avatar" className="user-avatar-comment" />
+        <div className="comment-author">
+          <span className="author-name">{data.author}</span>
+          <span className="comment-time">{moment(data.timestamp).fromNow()}</span>
+        </div>
+      </div>
+      <p className="comment-content">{data.content}</p>
+      <div className="comment-actions">
+        <FaChevronUp className="vote-icon" />
+        <FaChevronDown className="vote-icon" />
+        <span className="reply">Reply</span>
+      </div>
+    </div>
+  );
+};
+
+export default Discussions;