Merge pull request #1277 from nishant0708/profile_dark

Want to Improve Ui of Comments /Discussion #1178

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}

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;
   }

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}
+/>
     </>
   );
 };

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,{

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;
+  }