Modal

frontend/.eslintrc.json

@@ -36,7 +36,8 @@
       {
         "js": "ignorePackages"
       }
-    ]
+    ],
+    "jsx-a11y/label-has-associated-control": ["error", { "assert": "either" }]
   },
   "parserOptions": {
     "ecmaFeatures": {
@@ -45,5 +46,4 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   }
-
 }

frontend/src/components/ModalNewComment/ModalNewComment.js

@@ -0,0 +1,26 @@
+import styles from './ModalNewComment.module.css';
+import Input from '../ui/Input/input';
+import Text from '../ui/Text/Text';
+
+function ModalNewComment({ title, post }) {
+  return (
+    <div className={styles.comment_container}>
+      <h2 className={styles.comment_title}>{title}</h2>
+      <Text className={styles.comment_subTitle} content={post.location} />
+      <div className={styles.comment_image}>
+        <img className={styles.image} src={post.image} alt='post' />
+      </div>
+      <div className={styles.comment_body}>
+        <div className={styles.comments}>
+          <ul className={styles.list_item}>
+            {post.comments.map((comment) => (
+              <li>{comment}</li>
+            ))}
+          </ul>
+        </div>
+        <Input size='l' />
+      </div>
+    </div>
+  );
+}
+export default ModalNewComment;

frontend/src/components/ModalNewComment/ModalNewComment.module.css

@@ -0,0 +1,55 @@
+h2 {
+  padding: 0;
+  display: flex;
+  justify-content: unset;
+}
+
+.comment_subTitle {
+  position: fixed;
+  top: 12rem;
+  left: 12.19rem;
+}
+
+.comment_image {
+  background-color: var(--black);
+  position: relative;
+  display: inline-block;
+  height: 23rem;
+  width: 31.9375rem;
+  left: 3.625rem;
+  top: 7.9375rem;
+}
+.image {
+  width: 100%;
+  height: 100%;
+}
+.comment_body {
+  position: relative;
+  float: right;
+  padding: 5rem;
+}
+
+.comments {
+  position: relative;
+  overflow-y: auto;
+  width: 24.68rem;
+  height: 22.5rem;
+  left: 0.625rem;
+  background-color: #d9d9d9;
+}
+
+.send_button {
+  position: relative;
+  left: 17.5rem;
+  height: 3.75rem;
+  width: 7.81rem;
+  border: none;
+}
+.list_item {
+  list-style-position: inside;
+  content: normal;
+  padding: 1.25rem;
+}
+li::marker {
+  content: normal;
+}

frontend/src/components/ModalNewPost/ModalNewPost.js

@@ -0,0 +1,28 @@
+import styles from './ModalNewPost.module.css';
+import Input from '../ui/Input/input';
+import Textarea from '../ui/Textarea/Textarea';
+import Text from '../ui/Text/Text';
+import UploadFile from '../UploadFile/UploadFile';
+
+function ModalNewPost() {
+  return (
+    <div className={`${styles.post_container}`}>
+      <div className={`${styles.modal_left}`}>
+        <div className={`${styles.modal_photo}`}>
+          <UploadFile />
+        </div>
+      </div>
+      <div className={`${styles.modal_right}`}>
+        <div className={`${styles.modal_textareas}`}>
+          <Text content='Title' type='bold' />
+          <Input className={`${styles.title}`} size='l' />
+          <Text content='Location' type='bold' />
+          <Input className={`${styles.location}`} size='l' />
+          <Text content='Description' type='bold' />
+          <Textarea className={`${styles.description}`} size='l' />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default ModalNewPost;

frontend/src/components/ModalNewPost/ModalNewPost.module.css

@@ -0,0 +1,39 @@
+.post_container {
+  height: 80%;
+}
+
+.modal_photo {
+  display: flex;
+  position: relative;
+  left: 3.75rem;
+  top: 6.5rem;
+  width: 31.625rem;
+  height: 22.9rem;
+  background-color: var(--black);
+}
+
+.modal_right {
+  position: relative;
+  left: 32.5rem;
+  bottom: 21.25rem;
+}
+.description {
+  position: relative;
+  width: 25rem;
+}
+.title {
+  position: relative;
+  left: -.625rem;
+  width: 25rem;
+}
+.location {
+  position: relative;
+  left: -.625rem;
+}
+.modal_textareas {
+  position: relative;
+  display: grid;
+  top: 5.625rem;
+  left: 9.5625rem;
+  align-items: end;
+}

frontend/src/components/Post/Post.js

@@ -2,7 +2,7 @@ import styles from './Post.module.css';
 import Card from '../ui/Card/Card';
 import PostFooter from '../PostFooter/PostFooter';
 
-function Post({ post }) {
+function Post({ post, handleCommentOpen }) {
   return (
     <Card
       key={post.id}
@@ -15,7 +15,7 @@ function Post({ post }) {
         </div>
       }
       description={post.description}
-      Footer={<PostFooter key={post.id} likes={post.likes} comments={post.comments} />}
+      Footer={<PostFooter key={post.id} post={post} likes={post.likes} comments={post.comments} handleCommentOpen={handleCommentOpen} />}
       size='m'
       variant='wide'
     />

frontend/src/components/PostFooter/PostFooter.js

@@ -3,8 +3,7 @@ import { AiFillLike } from 'react-icons/ai';
 import { MdAddComment } from 'react-icons/md';
 import styles from './PostFooter.module.css';
 
-function PostFooter({ postId, likes, comments }) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+function PostFooter({ postId, post, likes, comments, handleCommentOpen }) {
   const [isLiked, setIsLiked] = useState([]);
 
   const handleLikeClick = (postId) => {
@@ -14,8 +13,8 @@ function PostFooter({ postId, likes, comments }) {
       setIsLiked([...isLiked, postId]);
     }
   };
-  const handleCommentClick = () => {
-    setIsModalOpen(true);
+  const handleCommentClick = (post) => {
+    handleCommentOpen(post);
   };
 
   const isPostLiked = isLiked.includes(postId);
@@ -26,7 +25,7 @@ function PostFooter({ postId, likes, comments }) {
       <button onClick={() => handleLikeClick(postId)}>
         <AiFillLike className={`${styles['community-icon']}`} fill={isPostLiked ? 'red' : ''} />
       </button>
-      <button onClick={handleCommentClick}>
+      <button onClick={() => handleCommentClick(post)}>
         <MdAddComment className={`${styles['community-icon']}`} fill='' />
       </button>
       <p className={styles.comments_counter}>{comments.length}</p>

frontend/src/components/UploadFile/UploadFile.js

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import Text from '../ui/Text/Text';
+import styles from './UploadFile.module.css';
+
+function UploadFile() {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [imagePreview, setImagePreview] = useState(null);
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    setSelectedImage(file);
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setImagePreview(reader.result);
+      setIsImageLoaded(true);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  const removeSelectedImage = () => {
+    setSelectedImage(null);
+    setImagePreview(null);
+    setIsImageLoaded(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={`${styles.file_input_container}`}>
+        {!isImageLoaded && (
+          <label htmlFor='imageInput' className={`${styles.file_input_label}`}>
+            <Text content='Click to choose an image' type='bold' />
+          </label>
+        )}
+        <input type='file' id='imageInput' onChange={handleImageChange} accept='image/*' style={{ display: 'none' }} />
+        {imagePreview && isImageLoaded && (
+          <div>
+            <img className={`${styles.image_upload}`} src={imagePreview} alt='Uploaded Preview' />
+            <FaRegTrashAlt className={`${styles.trash_button}`} type='button' onClick={removeSelectedImage} />
+          </div>
+        )}
+      </div>
+    </form>
+  );
+}
+export default UploadFile;

frontend/src/components/UploadFile/UploadFile.module.css

@@ -0,0 +1,25 @@
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 23rem;
+  width: 36.87rem;
+}
+
+.image_upload {
+  position: relative;
+  top: .93rem;
+  width: 31.87rem;
+  height: 23rem;
+}
+
+.trash_button {
+  position: relative;
+  top: .625rem;
+  cursor: pointer;
+}
+
+.file_input_label {
+  cursor: pointer;
+}

frontend/src/components/ui/Modal/Modal.js

@@ -0,0 +1,33 @@
+import { IoClose } from 'react-icons/io5';
+import PropTypes from 'prop-types';
+import styles from './Modal.module.css';
+
+function Modal({ title, onClose, children, footer, isPostModal }) {
+  const footerClassName = isPostModal ? styles.post_footer : styles.comment_footer;
+  const titleClassName = isPostModal ? styles.post_title : styles.comment_title;
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  return (
+    <div className={`${styles.modal_background}`}>
+      <div className={`${styles.modal_container}`}>
+        <IoClose className={styles.close_icon} onClick={handleClose} />
+        <h1 className={titleClassName}>{title}</h1>
+        {children}
+        <div className={footerClassName}> {footer} </div>
+      </div>
+    </div>
+  );
+}
+
+Modal.propTypes = {
+  title: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  footer: PropTypes.node,
+  isPostModal: PropTypes.bool,
+};
+
+export default Modal;

frontend/src/components/ui/Modal/Modal.module.css

@@ -0,0 +1,57 @@
+.modal_background {
+  position: fixed;
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.modal_container {
+  position: relative;
+  left: 8.125rem;
+  top: 3.75rem;
+  width: 74rem;
+  height: 45rem;
+  background: rgba(0, 0, 0, 0.49);
+  border: .0625rem solid rgba(255, 255, 255, 0.1);
+  border-radius: .125rem;
+}
+
+.close_icon {
+  position: fixed;
+  right: 7.9375rem;
+  fill: var(--white);
+  height: 2rem;
+  width: 2rem;
+  cursor: pointer;
+}
+
+.post_title {
+  position: relative;
+  top: 6.3rem;
+  left: 3.75rem;
+}
+
+.comment_title {
+  position: relative;
+  padding-left: 3.75rem;
+  top: 5rem;
+}
+
+.post_footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  top: -3rem;
+}
+
+.comment_footer {
+  position: relative;
+  padding-right: 5.625rem;
+  padding-top: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  top: -6rem;
+}