edit comments

reddit-front/src/components/Comments/Comments.jsx

@@ -7,7 +7,7 @@ import { Button } from '@mui/material';
 import avatarImg from '../../assets/Images/avatar_default_5.png';
 import CreatePostEditor from '../../pages/CreatePost/CreatePostEditor';
 
-export default function Comments() {
+export default function Comments({ comment }) {
   const [replyContnet, setReplyContnet] = useState('');
   const [countVotes, setCountVotes] = useState();
   const [showReply, setShowReply] = useState(false);
@@ -62,7 +62,9 @@ export default function Comments() {
             alt="avatar"
           />
         </div>
-        <p style={{ marginLeft: '10px', fontSize: '13px' }}>karim</p>
+        <p style={{ marginLeft: '10px', fontSize: '13px' }}>
+          {comment.user.username}
+        </p>
         <p
           style={{
             marginLeft: '7px',

reddit-front/src/components/PostCard/PostContent/PostContent.jsx

@@ -22,7 +22,7 @@ import PostInteractions from '../PostInteractions/PostInteractions';
 import PostInfo from '../PostInfo/PostInfo';
 import './PostContent.css';
 import { divideBigNumber, getDateDiff } from '../../../utilities/Helpers';
-import { flagPostAsVisited } from '../../../services/requests/Post';
+// import { flagPostAsVisited } from '../../../services/requests/Post';
 
 /**
  * @typedef PropType
@@ -223,7 +223,6 @@ function PostContent({
         userInfo={postContentData.user}
         subredditInfo={postContentData.subredditInfo}
         postedAt={getDateDiff(postContentData.publishedDate)}
-
         postId={postContentData._id}
         isCommunityPost={isCommunityPost}
         modAction={modAction}
@@ -274,7 +273,6 @@ function PostContent({
       {/* post content  */}
       <div className="post-main-content">
         <div className="post-content-core">
-
           <ReactMarkdown>
             {/* ffffff *fdfdfdfdf* *rerererer* ~fdsfdfdsfdfd~ `fdfdfdfdfdf` >
             `fdfsdfdfdfd` > dfsdfsdfdsfd - rerere - gfgfgf - oioioi 1. fdsfdfs

reddit-front/src/pages/ModToolsPage/ModToolsPage.jsx

@@ -26,7 +26,7 @@ import Banned from '../../components/Banned/Banned';
 import Muted from '../../components/Muted/Muted';
 import Approved from '../../components/Approved/Approved';
 import Moderators from '../../components/Moderators/Moderators';
-// import ModQueue from '../../components/ModQueue/ModQueue';
+import ModQueue from '../../components/ModQueue/ModQueue';
 import FetchUserData from '../../utilities/FetchUserData/FetchUserData';
 import { getSubreddit } from '../../services/requests/Subreddit';
 import Loader from '../../utilities/Loader/Loader';
@@ -64,7 +64,6 @@ function ModToolsPage() {
 
   // Mapping for the components
   const componentsMap = {
-
     muted: <Box>muted</Box>,
     banned: <Box>banned</Box>,
     moderators: <Box>moderators</Box>,
@@ -270,7 +269,6 @@ function ModToolsPage() {
                       </SideBarItem>
                     </SideBarCategory>
 
-
                     {/* User Management  */}
                     <SideBarCategory>
                       <SideBarCategoryTitle>

reddit-front/src/pages/PostFullPage/PostCard/PostContent/PostContent.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/named */
 /* eslint-disable no-unneeded-ternary */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/jsx-boolean-value */
@@ -23,7 +24,7 @@ import PostInfo from '../PostInfo/PostInfo';
 import './PostContent.css';
 
 import { divideBigNumber, getDateDiff } from '../../../../utilities/Helpers';
-import { flagPostAsVisited } from '../../../../services/requests/Post';
+// import { flagPostAsVisited } from '../../../../services/requests/Post';
 
 /**
  * @typedef PropType
@@ -240,7 +241,6 @@ function PostContent({
         postId={postData._id}
         userInfo={postData.user}
         subredditInfo={postData.subredditInfo}
-
         postedAt={getDateDiff(postData.publishedDate)}
         approvedBy={postData.approvedBy}
         approvedAt={postData.approvedAt}

reddit-front/src/pages/PostFullPage/PostFullPage.jsx

@@ -1,12 +1,16 @@
+/* eslint-disable indent */
+/* eslint-disable react/jsx-indent */
+/* eslint-disable operator-linebreak */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-multiple-empty-lines */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable prefer-const */
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { ThemeProvider, Box } from '@mui/material';
-
+import { ThemeProvider, Box, Button } from '@mui/material';
 
 import BackToTop from '../../components/BackToTop/BackToTop';
 import AppBar from '../../components/Layout/AppBar/AppBar';
@@ -19,6 +23,7 @@ import {
   subredditTheme
 } from '../Subreddit/Subreddit.Style';
 
+import CreatePostEditor from '../CreatePost/CreatePostEditor';
 import {
   SideBarContainer,
   SideBarContent
@@ -29,7 +34,7 @@ import { getPost } from '../../services/requests/Post';
 import { getSubreddit } from '../../services/requests/Subreddit';
 import Loader from '../../utilities/Loader/Loader';
 import Comments from '../../components/Comments/Comments';
-
+import { postComment, getComments } from '../../services/requests/comments';
 
 /**
  * This Component for the Community Cards.
@@ -45,10 +50,29 @@ function PostFullPage() {
   const [loadingSubreddit, setLoadingSubreddit] = useState(true);
   const [goToErrorPage, setGoToErrorPage] = useState(false);
 
-
   const [commentContnet, setCommentContnet] = useState('');
-  const handleReply = () => {};
+  const [comments, setComments] = useState([]);
+  const handleComment = () => {
+    postComment({
+      parentId: postData._id,
+      subredditId: subredditData._id,
+      postId: postData._id,
+      text: commentContnet
+    });
+  };
+  useEffect(() => {
+    const fetchGetComments = async () => {
+      const results = await getComments({ id: postData._id });
+      setComments(results);
+    };
+    fetchGetComments();
+  }, []);
+  console.log('comments');
+  console.log(comments);
+  console.log('finish');
   const handleCloseReply = () => {};
+  console.log(postData);
+  console.log(subredditData);
 
   const color = '#ccc';
   let subredditId = 1; // for testing only
@@ -78,6 +102,15 @@ function PostFullPage() {
     fetchSubredditInfo();
   }, []);
 
+  const commentsShow =
+    comments.length > 0
+      ? comments.map((comment) => (
+          <div>
+            <Comments comment={comment} />
+          </div>
+        ))
+      : '';
+
   return (
     <ThemeProvider theme={subredditTheme}>
       {!goToErrorPage ? (
@@ -124,29 +157,21 @@ function PostFullPage() {
                       postContent={commentContnet}
                     />
                     <Button
-                      style={{ marginLeft: '657px', marginTop: '-44px' }}
+                      style={{ marginLeft: '642px', marginTop: '-44px' }}
                       variant="contained"
-                      onClick={handleReply}
+                      onClick={handleComment}
                     >
-                      Reply
+                      Comment
                     </Button>
                     <Button
-                      style={{ marginLeft: '583px', marginTop: '-68px' }}
+                      style={{ marginLeft: '570px', marginTop: '-68px' }}
                       variant="contained"
                       onClick={handleCloseReply}
                     >
                       Cancle
                     </Button>
                   </div>
-                  <div>
-                    <Comments />
-                  </div>
-                  <div>
-                    <Comments />
-                  </div>
-                  <div>
-                    <Comments />
-                  </div>
+                  {commentsShow}
                 </PostsContainer>
 
                 <SideBarContainer>

reddit-front/src/services/requests/comments.js

@@ -11,7 +11,7 @@ export const getComments = async (object) => {
   console.log(object);
   try {
     console.log('first');
-    const response = await api.get(`/api/comment/${id}`, {
+    const response = await api.get(`/api/thing/${id}/with-children`, {
       headers: { Authorization: token }
     });
     console.log('last');