├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── data
    │   └── data.json
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── Assets
        ├── avatars
        │   ├── image-amyrobson.png
        │   ├── image-juliusomo.png
        │   ├── image-maxblagun.png
        │   └── image-ramsesmiron.png
        ├── design
        │   ├── active-states.jpg
        │   ├── desktop-design.jpg
        │   ├── desktop-modal.jpg
        │   ├── desktop-preview.jpg
        │   ├── mobile-design.jpg
        │   └── mobile-modal.jpg
        └── images
        │   ├── icon-delete.svg
        │   ├── icon-edit.svg
        │   ├── icon-minus.svg
        │   ├── icon-plus.svg
        │   ├── icon-reply.svg
        │   └── screenshot.png
    ├── Components
        ├── AddComment.js
        ├── Comment.js
        ├── DeleteModal.js
        ├── Reply.js
        ├── ReplyContainer.js
        ├── Styles
        │   ├── AddComment.scss
        │   ├── App.scss
        │   ├── Comment.scss
        │   ├── DeleteModal.scss
        │   ├── _mixins.scss
        │   ├── _variables.scss
        │   └── index.scss
        └── commentParts
        │   ├── CommentBtn.js
        │   ├── CommentFooter.js
        │   ├── CommentHeader.js
        │   ├── CommentVotes.js
        │   └── index.js
    ├── index.js
    └── utils
        ├── index.js
        └── time.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # assets
26 | /Assets/design


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Interactive comments section
 2 | 
 3 | ![](./src/Assets/images/screenshot.png)
 4 | 
 5 | ## The challenge
 6 | 
 7 | - optimal layout for the app depending on their device's screen size.
 8 | - hover states for all interactive elements on the page.
 9 | - create, Read, Update, and Delete comments and replies.
10 | - up-vote and down-vote comments.
11 | - tracks the time dynamically since the comment or reply was posted.
12 | 
13 | ### Information 
14 | - this is a solution to the [Interactive comments section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9).
15 | - by [Frontend Mentor](https://www.frontendmentor.io)
16 | 
17 | ## Built with
18 | 
19 | - CSS custom properties
20 | - Flex-box
21 | - Mobile-first workflow
22 | - [SCSS](https://sass-lang.com) - CSS Preprocessor
23 | - [React](https://reactjs.org/) - JS library
24 | 
25 | ## What I learned
26 | 
27 | - I learned how to calculate the time between current time and given time.
28 | 
29 | ## Continued development
30 | 
31 | - I still want to add the feature :
32 |   - which sorts the comments the comment of the basis of their votes
33 | 
34 | ## Author
35 | 
36 | - Frontend Mentor - [@arshGoyalDev](https://www.frontendmentor.io/profile/arshGoyalDev)
37 | - Twitter - [@arshGoyalDDev](https://twitter.com/arshGoyalDev)
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "interactive-comments-section",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.1",
 7 |     "@testing-library/react": "^12.1.2",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "node": "^17.3.0",
10 |     "react": "^18.1.0",
11 |     "react-dom": "^18.1.0",
12 |     "react-scripts": "5.0.0",
13 |     "sass": "^1.45.1",
14 |     "web-vitals": "^2.1.2"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/public/data/data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "currentUser": {
 3 |     "username": "juliusomo"
 4 |   },
 5 |   "comments": [
 6 |     {
 7 |       "id": 1,
 8 |       "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
 9 |       "createdAt": "23 November 2021",
10 |       "score": 12,
11 |       "username": "amyrobson",
12 |       "currentUser": false,
13 |       "replies": []
14 |     },
15 |     {
16 |       "id": 2,
17 |       "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
18 |       "createdAt": "5 December 2021",
19 |       "score": 5,
20 |       "username": "maxblagun",
21 |       "currentUser": false,
22 |       "replies": [
23 |         {
24 |           "id": 3,
25 |           "content": "@maxblaugn, If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
26 |           "createdAt": "18 December 2021",
27 |           "score": 4,
28 |           "username": "ramsesmiron",
29 |           "currentUser": false,
30 |           "replies": []
31 |         },
32 |         {
33 |           "id": 4,
34 |           "content": "@ramsesmiron, I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
35 |           "createdAt": "30 December 2021",
36 |           "score": 2,
37 |           "username": "juliusomo",
38 |           "currentUser": true,
39 |           "replies": []
40 |         }
41 |       ]
42 |     }
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Interactive comments section</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.png",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "favicon.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "favicon.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | 
  3 | import "./Components/Styles/App.scss";
  4 | 
  5 | import Comment from "./Components/Comment";
  6 | import AddComment from "./Components/AddComment";
  7 | 
  8 | const App = () => {
  9 |   const [comments, updateComments] = useState([]);
 10 |   const [deleteModalState, setDeleteModalState] = useState(false);
 11 | 
 12 |   const getData = async () => {
 13 |     const res = await fetch("./data/data.json");
 14 |     const data = await res.json();
 15 |     updateComments(data.comments);
 16 |   };
 17 | 
 18 |   useEffect(() => {
 19 |     localStorage.getItem("comments") !== null
 20 |       ? updateComments(JSON.parse(localStorage.getItem("comments")))
 21 |       : getData();
 22 |   }, []);
 23 | 
 24 |   useEffect(() => {
 25 |     localStorage.setItem("comments", JSON.stringify(comments));
 26 |     deleteModalState
 27 |       ? document.body.classList.add("overflow--hidden")
 28 |       : document.body.classList.remove("overflow--hidden");
 29 |   }, [comments, deleteModalState]);
 30 | 
 31 |   // update score
 32 |   const updateScore = (score, id, type, method) => {
 33 |     let updatedComments = [...comments];
 34 | 
 35 |     if (type === "comment") {
 36 |       updatedComments.forEach((data) => {
 37 |         if (data.id === id) {
 38 |           data.score = score;
 39 |           data.voted = method === "upvote" ? true : false;
 40 |         }
 41 |       });
 42 |     } else if (type === "reply") {
 43 |       updatedComments.forEach((comment) => {
 44 |         comment.replies.forEach((data) => {
 45 |           if (data.id === id) {
 46 |             data.score = score;
 47 |             data.voted = method === "upvote" ? true : false;
 48 |           }
 49 |         });
 50 |       });
 51 |     }
 52 |     updateComments(updatedComments);
 53 |   };
 54 | 
 55 |   // add comments
 56 |   const addComments = (newComment) => {
 57 |     const updatedComments = [...comments, newComment];
 58 |     updateComments(updatedComments);
 59 |   };
 60 | 
 61 |   // add replies
 62 |   const updateReplies = (replies, id) => {
 63 |     let updatedComments = [...comments];
 64 |     updatedComments.forEach((data) => {
 65 |       if (data.id === id) {
 66 |         data.replies = [...replies];
 67 |       }
 68 |     });
 69 |     updateComments(updatedComments);
 70 |   };
 71 | 
 72 |   // edit comment
 73 |   const editComment = (content, id, type) => {
 74 |     let updatedComments = [...comments];
 75 | 
 76 |     if (type === "comment") {
 77 |       updatedComments.forEach((data) => {
 78 |         if (data.id === id) {
 79 |           data.content = content;
 80 |         }
 81 |       });
 82 |     } else if (type === "reply") {
 83 |       updatedComments.forEach((comment) => {
 84 |         comment.replies.forEach((data) => {
 85 |           if (data.id === id) {
 86 |             data.content = content;
 87 |           }
 88 |         });
 89 |       });
 90 |     }
 91 | 
 92 |     updateComments(updatedComments);
 93 |   };
 94 | 
 95 |   // delete comment
 96 |   let commentDelete = (id, type, parentComment) => {
 97 |     let updatedComments = [...comments];
 98 |     let updatedReplies = [];
 99 | 
100 |     if (type === "comment") {
101 |       updatedComments = updatedComments.filter((data) => data.id !== id);
102 |     } else if (type === "reply") {
103 |       comments.forEach((comment) => {
104 |         if (comment.id === parentComment) {
105 |           updatedReplies = comment.replies.filter((data) => data.id !== id);
106 |           comment.replies = updatedReplies;
107 |         }
108 |       });
109 |     }
110 | 
111 |     updateComments(updatedComments);
112 |   };
113 | 
114 |   return (
115 |     <main className="App">
116 |       {comments.map((comment) => (
117 |         <Comment
118 |           key={comment.id}
119 |           commentData={comment}
120 |           updateScore={updateScore}
121 |           updateReplies={updateReplies}
122 |           editComment={editComment}
123 |           commentDelete={commentDelete}
124 |           setDeleteModalState={setDeleteModalState}
125 |         />
126 |       ))}
127 |       <AddComment buttonValue={"send"} addComments={addComments} />
128 |     </main>
129 |   );
130 | };
131 | 
132 | export default App;
133 | 


--------------------------------------------------------------------------------
/src/Assets/avatars/image-amyrobson.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/avatars/image-amyrobson.png


--------------------------------------------------------------------------------
/src/Assets/avatars/image-juliusomo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/avatars/image-juliusomo.png


--------------------------------------------------------------------------------
/src/Assets/avatars/image-maxblagun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/avatars/image-maxblagun.png


--------------------------------------------------------------------------------
/src/Assets/avatars/image-ramsesmiron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/avatars/image-ramsesmiron.png


--------------------------------------------------------------------------------
/src/Assets/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/active-states.jpg


--------------------------------------------------------------------------------
/src/Assets/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/desktop-design.jpg


--------------------------------------------------------------------------------
/src/Assets/design/desktop-modal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/desktop-modal.jpg


--------------------------------------------------------------------------------
/src/Assets/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/src/Assets/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/mobile-design.jpg


--------------------------------------------------------------------------------
/src/Assets/design/mobile-modal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/design/mobile-modal.jpg


--------------------------------------------------------------------------------
/src/Assets/images/icon-delete.svg:
--------------------------------------------------------------------------------
1 | <svg width="12" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M1.167 12.448c0 .854.7 1.552 1.555 1.552h6.222c.856 0 1.556-.698 1.556-1.552V3.5H1.167v8.948Zm10.5-11.281H8.75L7.773 0h-3.88l-.976 1.167H0v1.166h11.667V1.167Z" fill="#ED6368"/></svg>


--------------------------------------------------------------------------------
/src/Assets/images/icon-edit.svg:
--------------------------------------------------------------------------------
1 | <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.479 2.872 11.08.474a1.75 1.75 0 0 0-2.327-.06L.879 8.287a1.75 1.75 0 0 0-.5 1.06l-.375 3.648a.875.875 0 0 0 .875.954h.078l3.65-.333c.399-.04.773-.216 1.058-.499l7.875-7.875a1.68 1.68 0 0 0-.061-2.371Zm-2.975 2.923L8.159 3.449 9.865 1.7l2.389 2.39-1.75 1.706Z" fill="#5357B6"/></svg>


--------------------------------------------------------------------------------
/src/Assets/images/icon-minus.svg:
--------------------------------------------------------------------------------
1 | <svg width="11" height="3" xmlns="http://www.w3.org/2000/svg"><path d="M9.256 2.66c.204 0 .38-.056.53-.167.148-.11.222-.243.222-.396V.722c0-.152-.074-.284-.223-.395a.859.859 0 0 0-.53-.167H.76a.859.859 0 0 0-.53.167C.083.437.009.57.009.722v1.375c0 .153.074.285.223.396a.859.859 0 0 0 .53.167h8.495Z" fill="#C5C6EF"/></svg>


--------------------------------------------------------------------------------
/src/Assets/images/icon-plus.svg:
--------------------------------------------------------------------------------
1 | <svg width="11" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M6.33 10.896c.137 0 .255-.05.354-.149.1-.1.149-.217.149-.354V7.004h3.315c.136 0 .254-.05.354-.149.099-.1.148-.217.148-.354V5.272a.483.483 0 0 0-.148-.354.483.483 0 0 0-.354-.149H6.833V1.4a.483.483 0 0 0-.149-.354.483.483 0 0 0-.354-.149H4.915a.483.483 0 0 0-.354.149c-.1.1-.149.217-.149.354v3.37H1.08a.483.483 0 0 0-.354.15c-.1.099-.149.217-.149.353v1.23c0 .136.05.254.149.353.1.1.217.149.354.149h3.333v3.39c0 .136.05.254.15.353.098.1.216.149.353.149H6.33Z" fill="#C5C6EF"/></svg>


--------------------------------------------------------------------------------
/src/Assets/images/icon-reply.svg:
--------------------------------------------------------------------------------
1 | <svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M.227 4.316 5.04.16a.657.657 0 0 1 1.085.497v2.189c4.392.05 7.875.93 7.875 5.093 0 1.68-1.082 3.344-2.279 4.214-.373.272-.905-.07-.767-.51 1.24-3.964-.588-5.017-4.829-5.078v2.404c0 .566-.664.86-1.085.496L.227 5.31a.657.657 0 0 1 0-.993Z" fill="#5357B6"/></svg>


--------------------------------------------------------------------------------
/src/Assets/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arshGoyalDev/interactive-comments-section/8573c3d71d50c019ecf9555e2fbefc6c8ed6c0e8/src/Assets/images/screenshot.png


--------------------------------------------------------------------------------
/src/Components/AddComment.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | import "./Styles/AddComment.scss";
 4 | 
 5 | const AddComment = ({ buttonValue, addComments, replyingTo }) => {
 6 |   const replyingToUser = replyingTo ? `@${replyingTo}, ` : "";
 7 |   const [comment, setComment] = useState(replyingToUser);
 8 | 
 9 |   const clickHandler = () => {
10 |     if (comment === "" || comment === " ") return;
11 | 
12 |     const newComment = {
13 |       id: Math.floor(Math.random() * 100) + 5,
14 |       content: replyingToUser + comment.replace(replyingToUser, ""),
15 |       createdAt: new Date(),
16 |       score: 0,
17 |       username: "juliusomo",
18 |       currentUser: true,
19 |       replies: [],
20 |     };
21 | 
22 |     addComments(newComment);
23 |     setComment("");
24 |   };
25 | 
26 |   return (
27 |     <div className="add-comment">
28 |       <div className="profile-pic"></div>
29 |       <textarea
30 |         className="comment-input"
31 |         placeholder="Add a comment"
32 |         value={comment}
33 |         onChange={(e) => {
34 |           setComment(e.target.value);
35 |         }}
36 |       />
37 |       <div className="send-btn-container">
38 |         <div className="profile-pic"></div>
39 |         <button className="add-btn" onClick={clickHandler}>
40 |           {buttonValue}
41 |         </button>
42 |       </div>
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default AddComment;
48 | 


--------------------------------------------------------------------------------
/src/Components/Comment.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | 
  3 | import "./Styles/Comment.scss";
  4 | 
  5 | import AddComment from "./AddComment";
  6 | import ReplyContainer from "./ReplyContainer";
  7 | import DeleteModal from "./DeleteModal";
  8 | 
  9 | import { CommentHeader, CommentFooter, CommentVotes } from "./commentParts";
 10 | 
 11 | const Comment = ({
 12 |   commentData,
 13 |   updateScore,
 14 |   updateReplies,
 15 |   editComment,
 16 |   commentDelete,
 17 |   setDeleteModalState,
 18 | }) => {
 19 |   const [replying, setReplying] = useState(false);
 20 |   const [editing, setEditing] = useState(false);
 21 |   const [content, setContent] = useState(commentData.content);
 22 |   const [deleting, setDeleting] = useState(false);
 23 | 
 24 |   const addReply = (newReply) => {
 25 |     const replies = [...commentData.replies, newReply];
 26 |     updateReplies(replies, commentData.id);
 27 |     setReplying(false);
 28 |   };
 29 | 
 30 |   const updateComment = () => {
 31 |     editComment(content, commentData.id, "comment");
 32 |     setEditing(false);
 33 |   };
 34 | 
 35 |   const deleteComment = (id, type) => {
 36 |     const finalType = type !== undefined ? type : "comment";
 37 |     const finalId = id !== undefined ? id : commentData.id;
 38 |     commentDelete(finalId, finalType, commentData.id);
 39 |     setDeleting(false);
 40 |   };
 41 | 
 42 |   return (
 43 |     <div
 44 |       className={`comment-container ${
 45 |         commentData.replies[0] !== undefined ? "reply-container-gap" : ""
 46 |       }`}
 47 |     >
 48 |       <div className="comment">
 49 |         <CommentVotes
 50 |           updateScore={updateScore}
 51 |           commentData={commentData}
 52 |           type="comment"
 53 |         />
 54 |         <div className="comment--body">
 55 |           <CommentHeader
 56 |             commentData={commentData}
 57 |             replying={replying}
 58 |             setReplying={setReplying}
 59 |             setDeleting={setDeleting}
 60 |             setDeleteModalState={setDeleteModalState}
 61 |             setEditing={setEditing}
 62 |           />
 63 |           {!editing ? (
 64 |             <div className="comment-content">{commentData.content}</div>
 65 |           ) : (
 66 |             <textarea
 67 |               className="content-edit-box"
 68 |               value={content}
 69 |               onChange={(e) => {
 70 |                 setContent(e.target.value);
 71 |               }}
 72 |             />
 73 |           )}
 74 |           {editing && (
 75 |             <button className="update-btn" onClick={updateComment}>
 76 |               update
 77 |             </button>
 78 |           )}
 79 |         </div>
 80 |         <CommentFooter
 81 |           updateScore={updateScore}
 82 |           commentData={commentData}
 83 |           setReplying={setReplying}
 84 |           setDeleting={setDeleting}
 85 |           setDeleteModalState={setDeleteModalState}
 86 |           setEditing={setEditing}
 87 |           type="comment"
 88 |         />{" "}
 89 |       </div>
 90 | 
 91 |       {replying && (
 92 |         <AddComment
 93 |           buttonValue={"reply"}
 94 |           addComments={addReply}
 95 |           replyingTo={commentData.username}
 96 |         />
 97 |       )}
 98 |       {commentData.replies !== [] && (
 99 |         <ReplyContainer
100 |           key={commentData.replies.id}
101 |           commentData={commentData.replies}
102 |           updateScore={updateScore}
103 |           addReply={addReply}
104 |           editComment={editComment}
105 |           deleteComment={deleteComment}
106 |           setDeleteModalState={setDeleteModalState}
107 |         />
108 |       )}
109 | 
110 |       {deleting && (
111 |         <DeleteModal
112 |           setDeleting={setDeleting}
113 |           deleteComment={deleteComment}
114 |           setDeleteModalState={setDeleteModalState}
115 |         />
116 |       )}
117 |     </div>
118 |   );
119 | };
120 | 
121 | export default Comment;
122 | 


--------------------------------------------------------------------------------
/src/Components/DeleteModal.js:
--------------------------------------------------------------------------------
 1 | import "./Styles/DeleteModal.scss";
 2 | 
 3 | const DeleteModal = ({ setDeleting, deleteComment, setDeleteModalState }) => {
 4 |   const cancelDelete = () => {
 5 |     setDeleting(false);
 6 |     setDeleteModalState(false);
 7 |   };
 8 | 
 9 |   const deleteBtnClick = () => {
10 |     deleteComment();
11 |     setDeleteModalState(false);
12 |   };
13 | 
14 |   return (
15 |     <div className="delete-confirmation-wrapper">
16 |       <div className="delete-container">
17 |         <div className="title">Delete comment</div>
18 |         <div className="confirmation-message">
19 |           Are you sure you want to delete this comment? This will remove the
20 |           comment and can't be undone.
21 |         </div>
22 |         <div className="btn-container">
23 |           <button className="cancel-btn" onClick={cancelDelete}>
24 |             No, cancel
25 |           </button>
26 |           <button className="delete-btn" onClick={deleteBtnClick}>
27 |             Yes, delete
28 |           </button>
29 |         </div>
30 |       </div>
31 |     </div>
32 |   );
33 | };
34 | 
35 | export default DeleteModal;
36 | 


--------------------------------------------------------------------------------
/src/Components/Reply.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | 
  3 | import "./Styles/Comment.scss";
  4 | 
  5 | import AddComment from "./AddComment";
  6 | import DeleteModal from "./DeleteModal";
  7 | 
  8 | import { CommentHeader, CommentFooter, CommentVotes } from "./commentParts";
  9 | 
 10 | const Reply = ({
 11 |   commentData,
 12 |   updateScore,
 13 |   addNewReply,
 14 |   editComment,
 15 |   deleteComment,
 16 |   setDeleteModalState,
 17 | }) => {
 18 |   const [replying, setReplying] = useState(false);
 19 |   const [editing, setEditing] = useState(false);
 20 |   const [content, setContent] = useState(commentData.content);
 21 |   const [deleting, setDeleting] = useState(false);
 22 | 
 23 |   // adding reply
 24 |   const addReply = (newReply) => {
 25 |     addNewReply(newReply);
 26 |     setReplying(false);
 27 |   };
 28 | 
 29 |   const commentContent = () => {
 30 |     const text = commentData.content.trim().split(" ");
 31 |     const firstWord = text.shift().split(",");
 32 | 
 33 |     return !editing ? (
 34 |       <div className="comment-content">
 35 |         <span className="replyingTo">{firstWord}</span>
 36 |         {text.join(" ")}
 37 |       </div>
 38 |     ) : (
 39 |       <textarea
 40 |         className="content-edit-box"
 41 |         value={content}
 42 |         onChange={(e) => {
 43 |           setContent(e.target.value);
 44 |         }}
 45 |       />
 46 |     );
 47 |   };
 48 | 
 49 |   const updateComment = () => {
 50 |     editComment(content, commentData.id, "reply");
 51 |     setEditing(false);
 52 |   };
 53 | 
 54 |   // delete comment
 55 |   const deleteReply = () => {
 56 |     deleteComment(commentData.id, "reply");
 57 |     setDeleting(false);
 58 |   };
 59 | 
 60 |   return (
 61 |     <div
 62 |       className={`comment-container ${
 63 |         commentData.replies[0] !== undefined ? "gap" : ""
 64 |       }`}
 65 |     >
 66 |       <div className="comment">
 67 |         <CommentVotes
 68 |           updateScore={updateScore}
 69 |           commentData={commentData}
 70 |           type="reply"
 71 |         />
 72 |         <div className="comment--body">
 73 |           <CommentHeader
 74 |             commentData={commentData}
 75 |             setReplying={setReplying}
 76 |             setDeleting={setDeleting}
 77 |             setDeleteModalState={setDeleteModalState}
 78 |             setEditing={setEditing}
 79 |           />
 80 | 
 81 |           {commentContent()}
 82 |           {editing && (
 83 |             <button className="update-btn" onClick={updateComment}>
 84 |               update
 85 |             </button>
 86 |           )}
 87 |         </div>
 88 |         <CommentFooter
 89 |           updateScore={updateScore}
 90 |           commentData={commentData}
 91 |           setReplying={setReplying}
 92 |           setDeleting={setDeleting}
 93 |           setDeleteModalState={setDeleteModalState}
 94 |           setEditing={setEditing}
 95 |           type="reply"
 96 |         />
 97 |       </div>
 98 | 
 99 |       {replying && (
100 |         <AddComment
101 |           buttonValue={"reply"}
102 |           addComments={addReply}
103 |           replyingTo={commentData.username}
104 |         />
105 |       )}
106 |       {commentData.replies.map((reply) => (
107 |         <Reply key={reply.id} commentData={reply} addReply={addReply} />
108 |       ))}
109 | 
110 |       {deleting && (
111 |         <DeleteModal
112 |           setDeleting={setDeleting}
113 |           deleteComment={deleteReply}
114 |           setDeleteModalState={setDeleteModalState}
115 |         />
116 |       )}
117 |     </div>
118 |   );
119 | };
120 | 
121 | export default Reply;
122 | 


--------------------------------------------------------------------------------
/src/Components/ReplyContainer.js:
--------------------------------------------------------------------------------
 1 | import Reply from "./Reply";
 2 | 
 3 | const ReplyContainer = ({
 4 |   commentData,
 5 |   updateScore,
 6 |   addReply,
 7 |   editComment,
 8 |   deleteComment,
 9 |   setDeleteModalState,
10 | }) => {
11 |   return (
12 |     <div className="reply-container">
13 |       {commentData.map((data) => (
14 |         <Reply
15 |           key={data.id}
16 |           commentData={data}
17 |           updateScore={updateScore}
18 |           addNewReply={addReply}
19 |           editComment={editComment}
20 |           deleteComment={deleteComment}
21 |           setDeleteModalState={setDeleteModalState}
22 |         />
23 |       ))}
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default ReplyContainer;
29 | 


--------------------------------------------------------------------------------
/src/Components/Styles/AddComment.scss:
--------------------------------------------------------------------------------
  1 | @use "./variables" as *;
  2 | @use "./mixins" as *;
  3 | 
  4 | .add-comment {
  5 |   display: flex;
  6 |   flex-direction: column;
  7 |   gap: 20px;
  8 |   width: 90%;
  9 |   padding: 20px;
 10 |   background: $white;
 11 |   border-radius: 10px;
 12 |   animation: come-in 1.5s ease-in-out;
 13 | 
 14 |   .profile-pic {
 15 |     width: 30px;
 16 |     height: 30px;
 17 |     background: url(../../Assets/avatars/image-juliusomo.png);
 18 |     background-size: cover;
 19 |     border-radius: 50%;
 20 |     margin-right: 10px;
 21 |   }
 22 | 
 23 |   > .profile-pic {
 24 |     display: none;
 25 |   }
 26 | 
 27 |   .comment-input {
 28 |     position: relative;
 29 |     height: 100px;
 30 |     border: 2px solid $light-gray;
 31 |     color: $dark-blue;
 32 |     border-radius: 10px;
 33 |     padding: 15px 25px;
 34 |     resize: none;
 35 |     scrollbar-width: none;
 36 | 
 37 |     &::placeholder {
 38 |       color: $dark-blue;
 39 |     }
 40 | 
 41 |     &::-webkit-scrollbar {
 42 |       width: 0;
 43 |     }
 44 | 
 45 |     &:focus {
 46 |       outline: 1.5px solid $grayish-blue;
 47 |     }
 48 |   }
 49 | 
 50 |   .send-btn-container {
 51 |     display: flex;
 52 |     justify-content: space-between;
 53 |     align-items: center;
 54 |   }
 55 | 
 56 |   .add-btn {
 57 |     color: $white;
 58 |     font-weight: $fw-bold;
 59 |     text-transform: uppercase;
 60 |     padding: 15px 30px;
 61 |     background: $moderate-blue;
 62 |     border: 0;
 63 |     border-radius: 10px;
 64 |     transition: 0.3s;
 65 |     cursor: pointer;
 66 | 
 67 |     &:hover,
 68 |     &:focus{
 69 |       opacity: 0.65;
 70 |     }
 71 |   }
 72 | 
 73 |   @include media-md() {
 74 |     width: 735px;
 75 |     flex-direction: row;
 76 |     padding: 25px;
 77 |     gap: 25px;
 78 | 
 79 |     > .profile-pic {
 80 |       width: 50px;
 81 |       height: 36px;
 82 |       display: block;
 83 |       margin: 0;
 84 |     }
 85 | 
 86 |     .comment-input {
 87 |       width: 100%;
 88 |     }
 89 | 
 90 |     .send-btn-container {
 91 |       align-items: flex-start;
 92 | 
 93 |       .profile-pic {
 94 |         display: none;
 95 |       }
 96 |     }
 97 |   }
 98 | }
 99 | 
100 | @keyframes come-in {
101 |   0%{
102 |     opacity: 0;
103 |     transform: translateY(-100%);
104 |   }
105 | 
106 |   75%{
107 |     opacity: 0;
108 |     transform: translateY(-50%);
109 |   }
110 | 
111 |   100%{
112 |     opacity: 1;
113 |     transform: translateY(0);
114 |   }
115 | }


--------------------------------------------------------------------------------
/src/Components/Styles/App.scss:
--------------------------------------------------------------------------------
 1 | @use "variables" as *;
 2 | @use "mixins" as *;
 3 | 
 4 | .App {
 5 |   min-height: 100vh;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   gap: 15px;
11 |   padding: 2rem 0;
12 |   background-color: $very-light-gray;
13 |   
14 |   @include media-md() {
15 |     gap: 20px;
16 |     padding: 4rem 0;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/Components/Styles/Comment.scss:
--------------------------------------------------------------------------------
  1 | @use "variables" as *;
  2 | @use "mixins" as *;
  3 | 
  4 | .comment-container {
  5 |   display: flex;
  6 |   flex-direction: column;
  7 |   width: 90%;
  8 | 
  9 |   .comment {
 10 |     display: flex;
 11 |     flex-direction: column;
 12 |     background: $white;
 13 |     padding: 15px;
 14 |     border-radius: 10px;
 15 |     gap: 15px;
 16 |     animation: come-in 1s ease-in;
 17 | 
 18 |     &--votes {
 19 |       display: none;
 20 |       flex-direction: column;
 21 |       align-items: center;
 22 |       justify-content: center;
 23 |       height: max-content;
 24 |       padding: 8px 12px 10px;
 25 |       background: $very-light-gray;
 26 |       border-radius: 10px;
 27 | 
 28 |       .plus-btn,
 29 |       .minus-btn {
 30 |         display: grid;
 31 |         place-items: center;
 32 |         width: 20px;
 33 |         height: 20px;       
 34 |         background: transparent;
 35 |         border: 0;
 36 |         cursor: pointer;
 37 | 
 38 |         &:hover svg path {
 39 |           fill: $moderate-blue;
 40 |         }
 41 |       }
 42 | 
 43 |       .votes-counter {
 44 |         font-size: 1.1rem;
 45 |         margin-block: 8px;
 46 |         color: $moderate-blue;
 47 |         font-weight: $fw-medium;
 48 |       }
 49 |     }
 50 | 
 51 |     &--body {
 52 |       display: flex;
 53 |       flex-direction: column;
 54 |       gap: 10px;
 55 |       width: 100%;
 56 | 
 57 |       .comment--header {
 58 |         display: flex;
 59 |         align-items: center;
 60 | 
 61 |         .profile-pic {
 62 |           width: 30px;
 63 |           height: 30px;
 64 |           background-size: cover;
 65 |           border-radius: 50%;
 66 |           margin-right: 10px;
 67 |         }
 68 | 
 69 |         .username {
 70 |           color: $dark-blue;
 71 |           font-weight: $fw-medium;
 72 |         }
 73 | 
 74 |         .you-tag {
 75 |           color: $white;
 76 |           font-weight: $fw-regular;
 77 |           font-size: 0.9rem;
 78 |           padding: 2px 10px 3px;
 79 |           background: $moderate-blue;
 80 |           border-radius: 3px;
 81 |           margin-left: 10px;
 82 |         }
 83 | 
 84 |         .comment-posted-time {
 85 |           margin-left: 15px;
 86 |           color: $grayish-blue;
 87 |         }
 88 | 
 89 |         .comment--btn {
 90 |           display: none;
 91 |         }
 92 |       }
 93 | 
 94 |       .comment-content {
 95 |         width: 100%;
 96 |         color: $grayish-blue;
 97 |         line-height: 1.5;
 98 |         word-wrap: break-word;
 99 |         word-break: break;
100 | 
101 |         .replyingTo {
102 |           color: $moderate-blue;
103 |           font-weight: $fw-bold;
104 |           display: inline-block;
105 |           margin-right: 10px;
106 |         }
107 |       }
108 | 
109 |       .content-edit-box{
110 |         height: 150px;
111 |         color: $grayish-blue;
112 |         line-height: 1.5;
113 |         padding: 10px 15px;
114 |         border: 2px solid $light-gray;
115 |         border-radius: 10px;
116 |         resize: none;
117 |         scrollbar-width: none;
118 |     
119 |         &::-webkit-scrollbar {
120 |           width: 0;
121 |         }
122 |     
123 |         &:focus {
124 |           outline: 1.5px solid $grayish-blue;
125 |         }
126 |     
127 |       }
128 | 
129 |       .update-btn{
130 |         align-self: flex-end;
131 |         width: max-content;
132 |         color: $white;
133 |         font-weight: $fw-bold;
134 |         text-transform: uppercase;
135 |         padding: 15px 30px;
136 |         background: $moderate-blue;
137 |         border: 0;
138 |         border-radius: 10px;
139 |         transition: 0.3s;
140 |         cursor: pointer;
141 |     
142 |         &:hover,
143 |         &:focus{
144 |           opacity: 0.65;
145 |         }    
146 |       }
147 |     }
148 | 
149 |     &--footer {
150 |       display: flex;
151 |       align-items: center;
152 |       justify-content: space-between;
153 | 
154 |       .comment--votes {
155 |         padding: 8px 15px;
156 |         display: flex;
157 |         flex-direction: row;
158 | 
159 |         .votes-counter {
160 |           margin-block: 0;
161 |           margin-inline: 15px;
162 |         }
163 | 
164 |         .plus-btn,
165 |         .minus-btn {
166 |           width: 30px;
167 |           height: 30px;
168 |         }
169 |       }
170 |     }
171 |   }
172 | 
173 |   .comment--btn {
174 |     display: flex;
175 |     align-items: center;
176 |     gap: 7px;
177 |     margin-left: auto;
178 | 
179 |     button {
180 |       display: flex;
181 |       align-items: center;
182 |       gap: 5px;
183 |       color: $moderate-blue;
184 |       font-weight: $fw-bold;
185 |       padding: 5px;
186 |       background: transparent;
187 |       border: none;
188 |       border-radius: 5px;
189 |       transition: 0.3s;
190 |       cursor: pointer;
191 | 
192 |       &:hover,
193 |       &:focus {
194 |         opacity: 0.5;
195 |       }
196 |     }
197 | 
198 |     .delete-btn {
199 |       color: $soft-red;
200 |     }
201 |   }
202 | 
203 |   .reply-container {
204 |     display: flex;
205 |     align-items: center;
206 |     flex-direction: column;
207 |     padding-left: 15px;
208 |     border-left: 2px solid $light-gray;
209 |     margin-left: 15px;
210 |     gap: 15px;
211 | 
212 |     .comment-container {
213 |       width: 100%;
214 |       
215 |       .comment{
216 |         animation: come-in 1.1s ease-in-out;
217 |       }
218 |     }
219 |   }
220 | 
221 |   .add-comment {
222 |     width: 100%;
223 |     margin-top: 5px;
224 |     animation-duration: 0.5s;
225 |   }
226 | 
227 |   @include media-md() {
228 |     width: 735px;
229 | 
230 |     .comment {
231 |       flex-direction: row;
232 |       padding: 25px;
233 |       gap: 25px;
234 | 
235 |       &--votes {
236 |         display: flex;
237 |       }
238 | 
239 |       &--header {
240 |         .comment--btn {
241 |           display: flex !important;
242 |         }
243 |       }
244 | 
245 |       &-content {
246 |         width: 97%;
247 |       }
248 | 
249 |       .content-edit-box{
250 |         height: 100px;
251 |       }
252 | 
253 | 
254 |       &--footer {
255 |         display: none;
256 |       }
257 |     }
258 | 
259 |     .add-comment {
260 |       margin-top: 10px;
261 |     }
262 | 
263 |     .reply-container {
264 |       padding-left: 35px;
265 |       margin-left: 35px;
266 |       gap: 20px;
267 |     }
268 |   }
269 | }
270 | 
271 | .reply-container-gap .reply-container {
272 |   margin-top: 15px;
273 | 
274 |   @include media-md() {
275 |     margin-top: 20px;
276 |   }
277 | }
278 | 
279 | .amyrobson {
280 |   background: url(../../Assets/avatars/image-amyrobson.png);
281 | }
282 | 
283 | .maxblagun {
284 |   background: url(../../Assets/avatars/image-maxblagun.png);
285 | }
286 | 
287 | .ramsesmiron {
288 |   background: url(../../Assets/avatars/image-ramsesmiron.png);
289 | }
290 | 
291 | .juliusomo {
292 |   background: url(../../Assets/avatars/image-juliusomo.png);
293 | }
294 | 
295 | 
296 | @keyframes come-in {
297 |   0%{
298 |     opacity: 0;
299 |     transform: translateY(-100%);
300 |   }
301 | 
302 |   75%{
303 |     opacity: 0;
304 |     transform: translateY(-50%);
305 |   }
306 | 
307 |   100%{
308 |     opacity: 1;
309 |     transform: translateY(0);
310 |   }
311 | }


--------------------------------------------------------------------------------
/src/Components/Styles/DeleteModal.scss:
--------------------------------------------------------------------------------
 1 | @use 'variables' as *;
 2 | @use 'mixins' as *;
 3 | 
 4 | 
 5 | .delete-confirmation-wrapper{
 6 |   position: fixed;
 7 |   z-index: 100;
 8 |   top: 0; left: 0;
 9 |   height: 100vh;  width: 100%;
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   background: rgba($color: #000000, $alpha: 0.3);
14 | 
15 |   .delete-container{
16 |     display: flex;
17 |     flex-direction: column;
18 |     gap: 15px;
19 |     width: 90%;
20 |     background: $white;
21 |     padding: 20px;
22 |     border-radius: 10px;
23 | 
24 |     .title{
25 |       color: $dark-blue;
26 |       font-weight: $fw-bold;
27 |       font-size: 1.2rem;
28 |     }
29 | 
30 |     .confirmation-message{
31 |       line-height: 1.5;
32 |       color: $grayish-blue;
33 |     }
34 | 
35 |     .btn-container{
36 |       display: flex;
37 |       justify-content: space-between;
38 | 
39 |       button{
40 |         color: $white;
41 |         text-transform: uppercase;
42 |         font-weight: $fw-medium;
43 |         padding: 15px 20px;
44 |         border: none;
45 |         border-radius: 10px;
46 |         transition: 0.3s;
47 |         cursor: pointer;
48 | 
49 |         &:hover{
50 |           opacity: 0.65;
51 |         }
52 |       }
53 |       
54 |       .cancel-btn{
55 |         background: $grayish-blue;
56 |       }
57 | 
58 |       .delete-btn{
59 |         background: $soft-red;
60 |         color: $white;
61 |       }
62 |     }
63 | 
64 |     @include media-sm() {
65 |       width: 400px;
66 |       padding: 30px;
67 | 
68 |       .btn-container {
69 | 
70 |         button{
71 |           padding: 15px 30px;
72 |         }
73 |       }
74 |     }
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/Components/Styles/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin media-sm() {
 2 |   @media (min-width: 26.25em) {
 3 |     @content;
 4 |   }
 5 | }
 6 | 
 7 | 
 8 | @mixin media-md() {
 9 |   @media (min-width: 47em) {
10 |     @content;
11 |   }
12 | }
13 | 
14 | @mixin support($value) {
15 |   @supports (#{$value}) {
16 |     @content;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/Components/Styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");
 2 | 
 3 | /* primary */
 4 | $moderate-blue: hsl(238, 40%, 52%);
 5 | $soft-red: hsl(358, 79%, 66%);
 6 | $light-grayish-blue: hsl(239, 57%, 85%);
 7 | $pale-red: hsl(357, 100%, 86%);
 8 | 
 9 | /* neutral */
10 | $dark-blue: hsl(212, 24%, 26%);
11 | $grayish-blue: hsl(211, 10%, 45%);
12 | $light-gray: hsl(223, 19%, 93%);
13 | $very-light-gray: hsl(228, 33%, 97%);
14 | $white: hsl(0, 0%, 100%);
15 | 
16 | /* typography */
17 | $ff-rubik: "Rubik", sans-serif;
18 | $fw-regular: 400;
19 | $fw-medium: 500;
20 | $fw-bold: 700;
21 | 


--------------------------------------------------------------------------------
/src/Components/Styles/index.scss:
--------------------------------------------------------------------------------
 1 | @use "variables" as *;
 2 | @use "mixins" as *;
 3 | 
 4 | // ------------------- //
 5 | // reset //
 6 | // ------------------- //
 7 | 
 8 | *,
 9 | *::before,
10 | *::after {
11 |   padding: 0;
12 |   margin: 0;
13 |   box-sizing: border-box;
14 | }
15 | 
16 | a,
17 | p,
18 | span {
19 |   font-weight: $fw-regular;
20 | }
21 | 
22 | button,
23 | input,
24 | textarea {
25 |   font-family: inherit;
26 |   font-size: inherit;
27 | }
28 | 
29 | // ------------------- //
30 | // body //
31 | // ------------------- //
32 | 
33 | html {
34 |   @include support("scrollbar-width: thin") {
35 |     scrollbar-width: thin;
36 |     scrollbar-color: $grayish-blue $very-light-gray;
37 |   }
38 | }
39 | 
40 | body {
41 |   font-family: $ff-rubik;
42 |   -webkit-font-smoothing: antialiased;
43 |   -moz-osx-font-smoothing: grayscale;
44 | 
45 |   &::-webkit-scrollbar {
46 |     width: 6px;
47 |   }
48 | 
49 |   &::-webkit-scrollbar-track {
50 |     background: $very-light-gray;
51 |   }
52 | 
53 |   &::-webkit-scrollbar-thumb {
54 |     border-radius: 50px;
55 |     background: $grayish-blue;
56 |   }
57 | }
58 | 
59 | // ------------------- //
60 | // utility classes //
61 | // ------------------- //
62 | 
63 | .display--none {
64 |   display: none !important;
65 | }
66 | 
67 | .overflow--hidden {
68 |   overflow-y: hidden;
69 | }
70 | 
71 | ::selection {
72 |   color: $white;
73 |   background: $grayish-blue;
74 | }
75 | 


--------------------------------------------------------------------------------
/src/Components/commentParts/CommentBtn.js:
--------------------------------------------------------------------------------
 1 | import { ReactComponent as IconReply } from "../../Assets/images/icon-reply.svg";
 2 | import { ReactComponent as IconDelete } from "../../Assets/images/icon-delete.svg";
 3 | import { ReactComponent as IconEdit } from "../../Assets/images/icon-edit.svg";
 4 | 
 5 | const CommentBtn = ({
 6 |   commentData,
 7 |   replying,
 8 |   setReplying,
 9 |   setDeleting,
10 |   setDeleteModalState,
11 |   setEditing,
12 | }) => {
13 |   const showAddComment = () => {
14 |     setReplying(!replying);
15 |   };
16 | 
17 |   // delete comment
18 |   const showDeleteModal = () => {
19 |     setDeleting(true);
20 |     setDeleteModalState(true);
21 |   };
22 | 
23 |   // edit comment
24 |   const showEditComment = () => {
25 |     setEditing(true);
26 |   };
27 | 
28 |   return (
29 |     <div className="comment--btn">
30 |       <button
31 |         className={`reply-btn ${
32 |           !commentData.currentUser ? "" : "display--none"
33 |         }`}
34 |         onClick={showAddComment}
35 |       >
36 |         <IconReply /> Reply
37 |       </button>
38 |       <button
39 |         className={`delete-btn ${
40 |           commentData.currentUser ? "" : "display--none"
41 |         }`}
42 |         onClick={showDeleteModal}
43 |       >
44 |         <IconDelete /> Delete
45 |       </button>
46 |       <button
47 |         className={`edit-btn ${commentData.currentUser ? "" : "display--none"}`}
48 |         onClick={showEditComment}
49 |       >
50 |         <IconEdit /> Edit
51 |       </button>
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default CommentBtn;
57 | 


--------------------------------------------------------------------------------
/src/Components/commentParts/CommentFooter.js:
--------------------------------------------------------------------------------
 1 | import { CommentVotes, CommentBtn } from "./";
 2 | 
 3 | const CommentFooter = ({
 4 |   updateScore,
 5 |   commentData,
 6 |   setReplying,
 7 |   setDeleting,
 8 |   setDeleteModalState,
 9 |   setEditing,
10 |   type,
11 | }) => {
12 |   return (
13 |     <div className="comment--footer">
14 |       <CommentVotes
15 |         updateScore={updateScore}
16 |         commentData={commentData}
17 |         type={type}
18 |       />
19 | 
20 |       <CommentBtn
21 |         commentData={commentData}
22 |         setReplying={setReplying}
23 |         setDeleting={setDeleting}
24 |         setDeleteModalState={setDeleteModalState}
25 |         setEditing={setEditing}
26 |       />
27 |     </div>
28 |   );
29 | };
30 | 
31 | export default CommentFooter;
32 | 


--------------------------------------------------------------------------------
/src/Components/commentParts/CommentHeader.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | import { commentPostedTime } from "../../utils";
 4 | 
 5 | import CommentBtn from "./CommentBtn";
 6 | 
 7 | const CommentHeader = ({
 8 |   commentData,
 9 |   replying,
10 |   setReplying,
11 |   setDeleting,
12 |   setDeleteModalState,
13 |   setEditing,
14 | }) => {
15 |   const [time, setTime] = useState("");
16 |   const createdAt = new Date(commentData.createdAt);
17 |   const today = new Date();
18 | 
19 |   useEffect(() => {
20 |     const timeout = setTimeout(() => {
21 |       const differenceInTime = today.getTime() - createdAt.getTime();
22 |       setTime(commentPostedTime(differenceInTime));
23 |     }, 1000);
24 | 
25 |     return () => clearTimeout(timeout);
26 |     // eslint-disable-next-line
27 |   }, []);
28 | 
29 |   return (
30 |     <div className="comment--header">
31 |       <div className={`profile-pic ${commentData.username}`}></div>
32 |       <div className="username">{commentData.username}</div>
33 |       {commentData.currentUser ? <div className="you-tag">you</div> : ""}
34 |       <div className="comment-posted-time">{`${time} ago`}</div>
35 |       <CommentBtn
36 |         commentData={commentData}
37 |         replying={replying}
38 |         setReplying={setReplying}
39 |         setDeleting={setDeleting}
40 |         setDeleteModalState={setDeleteModalState}
41 |         setEditing={setEditing}
42 |       />
43 |     </div>
44 |   );
45 | };
46 | 
47 | export default CommentHeader;
48 | 


--------------------------------------------------------------------------------
/src/Components/commentParts/CommentVotes.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | import { ReactComponent as IconPlus } from "../../Assets/images/icon-plus.svg";
 4 | import { ReactComponent as IconMinus } from "../../Assets/images/icon-minus.svg";
 5 | 
 6 | const CommentVotes = ({ updateScore, commentData, type }) => {
 7 |   const [score, setScore] = useState(commentData.score);
 8 |   const [voted, setVoted] = useState(commentData.voted ?? false);
 9 |   let upVote = () => {
10 |     if (commentData.currentUser) return;
11 |     if (voted === false) {
12 |       let n = score + 1;
13 |       setScore(n);
14 |       updateScore(n, commentData.id, type, "upvote");
15 |       setVoted(true);
16 |     }
17 |   };
18 | 
19 |   let downVote = () => {
20 |     if (commentData.currentUser) return;
21 |     if (voted === true) {
22 |       let n = score - 1;
23 |       setScore(n);
24 |       updateScore(n, commentData.id, type, "downvote");
25 |       setVoted(false);
26 |     }
27 |   };
28 | 
29 |   return (
30 |     <div className="comment--votes">
31 |       <button className="plus-btn" onClick={upVote} aria-label="plus-btn">
32 |         <IconPlus />
33 |       </button>
34 |       <div className="votes-counter">{commentData.score}</div>
35 |       <button className="minus-btn" onClick={downVote} aria-label="minus-btn">
36 |         <IconMinus />
37 |       </button>
38 |     </div>
39 |   );
40 | };
41 | 
42 | export default CommentVotes;
43 | 


--------------------------------------------------------------------------------
/src/Components/commentParts/index.js:
--------------------------------------------------------------------------------
1 | import CommentHeader from "./CommentHeader";
2 | import CommentFooter from "./CommentFooter";
3 | import CommentBtn from "./CommentBtn";
4 | import CommentVotes from "./CommentVotes";
5 | 
6 | export { CommentHeader, CommentFooter, CommentBtn, CommentVotes };
7 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client';
2 | 
3 | import './Components/Styles/index.scss';
4 | 
5 | import App from './App';
6 | 
7 | const container = document.getElementById('root');
8 | const root = createRoot(container);
9 | root.render(<App tab="home" />);


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { commentPostedTime } from "./time";
2 | 


--------------------------------------------------------------------------------
/src/utils/time.js:
--------------------------------------------------------------------------------
 1 | const commentPostedTime = (timeInMileSec) => {
 2 |   const sec = (timeInMileSec / 1000).toFixed(0);
 3 |   const min = (timeInMileSec / (1000 * 60)).toFixed(0);
 4 |   const hrs = (timeInMileSec / (1000 * 60 * 60)).toFixed(0);
 5 |   const days = (timeInMileSec / (1000 * 60 * 60 * 24)).toFixed(0);
 6 |   const weeks = (timeInMileSec / (1000 * 60 * 60 * 24 * 7)).toFixed(0);
 7 |   const months = (timeInMileSec / (1000 * 60 * 60 * 24 * 31)).toFixed(0);
 8 |   const years = (timeInMileSec / (1000 * 60 * 60 * 24 * 12)).toFixed(0);
 9 | 
10 |   if (sec < 60) {
11 |     return "seconds";
12 |   } else if (min < 60) {
13 |     return min + " mins";
14 |   } else if (hrs < 24) {
15 |     return hrs + " hrs";
16 |   } else if (days < 7) {
17 |     return days + " days";
18 |   } else if (weeks < 4) {
19 |     return weeks + " weeks";
20 |   } else if (months < 12) {
21 |     return months + " months";
22 |   } else {
23 |     return years + " year";
24 |   }
25 | };
26 | 
27 | export { commentPostedTime };
28 | 


--------------------------------------------------------------------------------