feat(*): add frontend comments

HoseaCodes · Aug 5, 2023 · cc58a8e · cc58a8e
1 parent e52b967
commit cc58a8e
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 62 deletions.
diff --git a/controllers/comment.js b/controllers/comment.js
@@ -40,7 +40,7 @@ async function getComment(req, res) {
 async function createComment(req, res) {
   try {
 
-    const { comment_id, name, email, comment, markdown, user_id } = req.body;
+    const { comment_id, name, email, comment, markdown, user_id, avatar } = req.body;
     console.log(req.body)
     const com = await Comments.findOne({ comment_id });
 
@@ -52,7 +52,7 @@ async function createComment(req, res) {
     const newComment = new Comments({
       comment_id, name, email, 
       comment, markdown, user_id, 
-      blog: req.params.id  
+      blog: req.params.id, avatar
     })
 
     await newComment.save()

diff --git a/models/article.js b/models/article.js
@@ -13,10 +13,10 @@ const articleSchema = new mongoose.Schema({
         trim: true,
         unique: true
     },
-    // postedBy: {
-    //     type: mongoose.Schema.Types.ObjectId,
-    //     ref: 'Users'
-    // },
+    postedBy: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'Users'
+    },
     title: {
         type: String,
         required: true,

diff --git a/models/comment.js b/models/comment.js
@@ -9,6 +9,10 @@ const commentSchema = new mongoose.Schema({
         type:String,
         required: "this field is required"
     },
+    avatar: {
+        type: Object,
+        default: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"
+    },
     comment:{
         type:String,
         required:"this filed is required"

diff --git a/src/Components/Article/MainContainer.jsx b/src/Components/Article/MainContainer.jsx
@@ -65,7 +65,7 @@ const MainContainer = (props) => {
                   <br />
                   <BlogContent Markdown  dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
                   <br />
-                  <StickyFooter id={_id} likes={likes}/>
+                  <StickyFooter viewComment={props.viewComment} setViewComment={props.setViewComment} id={_id} likes={likes}/>
                   <Newsletter/>
                 </BlogPost>
                 {/* <input type="checkbox" checked={checked}

diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx
@@ -6,6 +6,7 @@ import {UserInfo, PostText, Subtitle} from '../../Layout/Text/styledText';
 import {ArticleBtn} from '../../Layout/Button/styledButton';
 import {ArticleLink, ArticleLinkColor} from '../../Layout/ATag/styledATag';
 import {MdBookmarkBorder, MdClose} from 'react-icons/md';
+import {FaRegThumbsUp} from 'react-icons/fa';
 import {BiCheckShield, BiDotsHorizontalRounded} from 'react-icons/bi';
 import { MarginTop } from '../../Layout/Margin/styledMargin';
 import { ArticleInput } from '../../Layout/Input/styledInput';
@@ -15,19 +16,19 @@ import { GlobalState } from '../../GlobalState';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
 
-const RightColumn = ({user, articles}) => {
+const RightColumn = (props) => {
 
   const history = useHistory();
   // const uri = window.location.pathname;
   const state = useContext(GlobalState);
+  const [currentUser, setCurrentUser] = useState(props.user);
   const [isLoggedIn] = state.userAPI.isLoggedIn;
   const [search, setSearch] = useState('')
-  const [viewComment, setViewComment] = useState(true)
   const [comments, setComments] = useState({comments: []})
   const param = useParams()
 
   const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
-  const recentPosts = shuffleArray(articles)
+  const recentPosts = shuffleArray(props.articles)
         .filter((article) => {
           // article._id !== uri.split('/')[2]
           return article.title.toLowerCase().indexOf(
@@ -61,9 +62,9 @@ const RightColumn = ({user, articles}) => {
   return (
     <>
       {
-        viewComment ?
+        props.viewComment ?
           <StyledRightContainer>
-            <AlignContent Center>
+            <AlignContent>
               <div style={{display: 'flex', justifyContent: 'space-between', 
               width: '100%', alignItems: 'center'}}>
                 <div>
@@ -72,19 +73,42 @@ const RightColumn = ({user, articles}) => {
                 <div>
                   <span><BiCheckShield style={{fontSize: '2.5rem'}} /></span>
                   <span><BiDotsHorizontalRounded style={{fontSize: '2.5rem'}}/></span>
-                  <span><MdClose style={{fontSize: '2.5rem'}}/></span>
+                  <span><MdClose onClick={() => props.setViewComment(false)} style={{fontSize: '2.5rem'}}/></span>
                 </div>
               </div>
             </AlignContent>
-            <div>
-              <img src="" alt="" srcset="" />
-              <h3>Name</h3>
-              <textarea placeholder='What are your thoughts?' name="" id="" cols="30" rows="10"></textarea>
-              <button>Cancel</button>
-              <button>Respond</button>
-            </div>
-            <select name="" id="" disabled="disabled">
-              <option value="Relevant">Most Relevant</option>
+            {
+              currentUser === '' ?
+                <div>
+                  <img src="" alt="" srcset="" />
+                  <h3>{currentUser.name}</h3>
+                  <textarea placeholder='What are your thoughts?' name="" id="" cols="30" rows="10"></textarea>
+                  <button>Cancel</button>
+                  <button>Respond</button>
+                </div>
+                :
+                <div style={{marginTop: '2rem',  WebkitBoxShadow:  '0px 0px 10px 1px rgba(220,220,220,0.9)',boxShadow: '0px 0px 10px 1px rgba(220,220,220,0.9)', padding: '5px 15px',
+                width: '100%', height: 'auto', borderRadius: '12px' }}>
+                  <div style={{display: 'flex', alignItems: 'center'}}>
+                    <img src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                    alt="Anonymous User"
+                    style={{width: '4rem', height: '4rem', marginRight: '5px'}} />
+                    <h3 style={{ marginLeft: '5px',fontSize: '1.5rem'}}>Anonymous</h3>
+                  </div>
+                  <textarea 
+                  style={{border: 'none', paddingTop: '10px'}}
+                  placeholder='What are your thoughts?' 
+                  name="" id="" cols="30" rows="10"></textarea>
+                  <div style={{display: 'flex', width: '100%', justifyContent: 'space-around', alignItems: 'flex-end'}}>
+                    <button>Cancel</button>
+                    <button>Respond</button>
+                  </div>
+                </div>
+
+            }
+            <select style={{ border: 'none', fontSize: '1.5rem', 
+            fontWeight: '700', paddingRight: '2px', marginTop: '2rem'}} name="" id="">
+              <option style={{ background: 'blue'}} value="Relevant">Most Relevant</option>
               <option value="Recent">Most Recent</option>
             </select>
             <hr />
@@ -93,21 +117,37 @@ const RightColumn = ({user, articles}) => {
               comments.comments.length !== 0 ?
               <>
                 {comments.comments.map(comment => {
+                   const date1 = new Date();
+                   const date2 = new Date(comment.createdAt);
+                   const Difference_In_Time = date2.getTime() - date1.getTime();
+                   let Difference_In_Days = `${Math.round(Difference_In_Time / (1000 * 3600 * 24) * -1)} days`;
+                   if (Difference_In_Days ===  "0 days") Difference_In_Days = `${Math.round(Difference_In_Time / (1000 * 3600 * 24) * -100)} hours`
+                   if (Difference_In_Days ===  "1 days") Difference_In_Days = `${Math.round(Difference_In_Time / (1000 * 3600 * 24) * -1)} day`
                   return (
                     <div key={comment._id}>
-                      <div>
-                        <img src="" alt="" srcset="" />
-                        <h3>{comment.name}</h3> <span>Reference towards the blog writer</span>
-                        <p>minutes ago</p>
-                      </div>
-                      <div>
-                        <span>Settings Icon</span>
+                      <div style={{display: 'flex', alignItems: 'center'}}>
+                        <img style={{width: '4rem', height: '4rem', marginRight: '5px'}}
+                        src={comment.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"} 
+                        alt={`${comment.name}-avatar`} />
+                        <div style={{display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center'}}>
+                          <div>
+                            <h3 style={{fontSize: '1.6rem'}}>
+                              {comment.name} &nbsp;
+                              <span style={{ backgroundColor: 'green', 
+                              padding: '2px 5px', fontSize: '1rem', color: 'white'}}>AUTHOR</span>
+                            </h3>
+                            <p>{Difference_In_Days} ago</p>
+                          </div>
+                          <div>
+                            <BiDotsHorizontalRounded style={{fontSize: '2rem'}}/>
+                          </div>
+                        </div>
                       </div>
                       <div>
                         {comment.comment}
                       </div>
-                      <div>
-                        <button>like</button>
+                      <div style={{paddingTop: '2rem', display: 'flex', width: '100%', justifyContent: 'space-between'}}>
+                        <FaRegThumbsUp />
                         <button>Reply</button>
                       </div>
                     </div>
@@ -126,7 +166,7 @@ const RightColumn = ({user, articles}) => {
                 <ArticleLinkColor Green href='/login'>Sign In</ArticleLinkColor>
               </>
               :
-                <h2>Welcome, {user.name.split(' ')[0]}</h2>
+                <h2>Welcome, {currentUser.name.split(' ')[0]}</h2>
               }
             </AlignContent>
                 <MarginTop RightCloumnSearch>
@@ -137,9 +177,9 @@ const RightColumn = ({user, articles}) => {
                   onChange={updateSearch}/>
                 </MarginTop >
                 <SideUserContainer Primary>
-                  <CircleImage Secondary src={user.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
+                  <CircleImage Secondary src={currentUser.avatar || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
                             alt="author" />
-                  <UserInfo Padding4>{user.name || "Will Smith"}</UserInfo>
+                  <UserInfo Padding4>{currentUser.name || "Will Smith"}</UserInfo>
                   <UserInfo GrayWPadding>119 Followers</UserInfo>
                   <UserInfo GrayWPadding>
                     Software Engineer | Python Programmer | Java Programmer | Tech Enthusiast | JavaScript Programmer | React Lover | Mobile Developer

diff --git a/src/Components/Sticky/StickyFooter.jsx b/src/Components/Sticky/StickyFooter.jsx
@@ -11,7 +11,7 @@ import {RiShareCircleFill} from 'react-icons/ri';
 import {TiSocialLinkedinCircular} from 'react-icons/ti';
 import './StickyState.css';
 
-const StickyFooter = ({id, likes}) => {
+const StickyFooter = ({id, likes, setViewComment, viewComment}) => {
   const [postLikes, setPostLikes] = useState(likes)
 
   useEffect(() => {
@@ -36,7 +36,7 @@ const StickyFooter = ({id, likes}) => {
                     <FaRegThumbsUp onClick={handleLike}/> &nbsp; <span>{postLikes}</span> &nbsp;
                   </JustifyContent>
                   <JustifyContent MarginRight>
-                    <FaRegComment/> &nbsp; <span>1</span>
+                    <FaRegComment onClick={() => setViewComment(true)}/> &nbsp; <span>1</span>
                   </JustifyContent>
                 </JustifyContent>
                 <Font2>

diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx
@@ -13,6 +13,7 @@ const ArticleItem = () => {
     const [user] = state.userAPI.user;
     const [articles] = state.articlesAPI.articles
     const [detailArticle, setdetailArticle] = useState([])
+    const [viewComment, setViewComment] = useState(false)
 
     useEffect(() => {
         if (params.id) {
@@ -37,8 +38,8 @@ const ArticleItem = () => {
                 user.name !== "" && 
                 <SideBar/>
             }
-            <MainContainer user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
-            <RightColumn user={user} articles={articles}/>
+            <MainContainer viewComment={viewComment} setViewComment={setViewComment}  user={user} articles={articles} timeFormater={timeFormater} readTime={readTime} detailArticle={detailArticle} />
+            <RightColumn setViewComment={setViewComment} viewComment={viewComment} user={user} articles={articles}/>
           </main>
         </>
     )

diff --git a/src/Pages/Articles/LikeButton.jsx b/src/Pages/Articles/LikeButton.jsx