Changeset 2fcbde4 for reactapp/src/Components

Timestamp:

08/23/22 13:31:02 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

62b653f

Parents:

6221ab6

Message:

implemented replying to posts in react

File:

• reactapp/src/Components/OpinionTree.js (modified) (6 diffs)

reactapp/src/Components/OpinionTree.js

@@ -35 +35 @@
   const [replyContent, setReplyContent] = useState("");
 
+  const [postForModal, setPostForModal] = useState(null);
+
   const handleLike = () => {
     if (auth) {
@@ -51 +53 @@
   };
 
-  const handleReply = () => {
+  const handleReply = (opinion) => {
     if (auth) {
       setReplyModalDisplay("block");
+      setPostForModal(opinion);
     } else {
       navigate("/login");
@@ -120 +123 @@
                   right={90 + "px"}
                   color="black"
-                  onClick={handleReply} //todo
+                  onClick={() => handleReply(child)}
                 />
               </>
@@ -144 +147 @@
           return (
             <div key={opinion.postId}>
-              <Modal display={replyModalDisplay}>
-                <ModalContent>
-                  <ModalHeader>
-                    <ModalClose onClick={handleModalCloseClick}>
-                      &times;
-                    </ModalClose>
-                    <h3 style={{ marginTop: "5px" }}>
-                      Реплика на {opinion.author.username}
-                    </h3>
-                  </ModalHeader>
-                  <form onSubmit={(e) => handleReplySubmit(e, opinion.postId)}>
-                    <ModalBody>
-                      <label htmlFor="content">
-                        <b>Содржина</b>:
-                        <ModalTextarea
-                          id="content"
-                          rows="8"
-                          cols="100"
-                          value={replyContent}
-                          onChange={handleContentChange}
-                        />
-                      </label>
-                    </ModalBody>
-                    <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
-                  </form>
-                </ModalContent>
-              </Modal>
               <OpinionCard>
                 <OpinionCardContent>
@@ -203 +179 @@
                         right={90 + "px"}
                         color="black"
-                        onClick={handleReply}
+                        onClick={() => handleReply(opinion)}
                       />
                     </>
@@ -216 +192 @@
         }
       })}
+      {postForModal && (
+        <Modal display={replyModalDisplay}>
+          <ModalContent>
+            <ModalHeader>
+              <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
+              <h3 style={{ marginTop: "5px" }}>
+                Реплика на {postForModal.author.username}
+              </h3>
+            </ModalHeader>
+            <form onSubmit={(e) => handleReplySubmit(e, postForModal.postId)}>
+              <ModalBody>
+                <label htmlFor="content">
+                  <b>Содржина</b>:
+                  <ModalTextarea
+                    id="content"
+                    rows="8"
+                    cols="100"
+                    value={replyContent}
+                    onChange={handleContentChange}
+                  />
+                </label>
+              </ModalBody>
+              <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
+            </form>
+          </ModalContent>
+        </Modal>
+      )}
     </div>
   );