Changeset 9bf1f8d for reactapp/src/Components/OpinionTree.js

Timestamp:

01/20/23 22:57:18 (21 months ago)

Author:

viktor <viktor@…>

Branches:

main

Children:

8dffe02

Parents:

4abf55a

Message:

prefinal

File:

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

reactapp/src/Components/OpinionTree.js

@@ -26 +26 @@
 import axios from "../api/axios";
 
-function OpinionTree({ professor }) {
+const OpinionTree = ({professor, relatedOpinions}) => {
   var renderedOpinionIds = [];
   var postCount; // za da ne go pokazuva ispod postot
@@ -35 +35 @@
   const [replyModalDisplay, setReplyModalDisplay] = useState("none");
   const [replyContent, setReplyContent] = useState("");
-  const [postForModal, setPostForModal] = useState(null);
+  const [postForReplyModal, setPostForReplyModal] = useState(null);
+  const [reportModalDisplay, setReportModalDisplay] = useState("none");
+  const [reportContent, setReportContent] = useState("")
+  const [postForReportModal, setPostForReportModal] = useState(null);
+
   const [user, setUser] = useState(null);
   const [loadedUser, setLoadedUser] = useState(false);
@@ -42 +46 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.29:8080/secure/currentUser`;
+    const url = `http://192.168.1.254:8080/secure/currentUser`;
 
     const fetchUser = async () => {
@@ -68 +72 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/upvoteOpinion/${post.postId}`,
+          `http://192.168.1.254:8080/secure/upvoteOpinion/${post.postId}`,
           {
             method: "get",
@@ -91 +95 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/downvoteOpinion/${post.postId}`,
+          `http://192.168.1.254:8080/secure/downvoteOpinion/${post.postId}`,
           {
             method: "get",
@@ -110 +114 @@
     if (auth) {
       setReplyModalDisplay("block");
-      setPostForModal(opinion);
+      setPostForReplyModal(opinion);
       document.body.style.overflowY = "hidden";
     } else {
@@ -116 +120 @@
     }
   };
+
+  const handleReport = (opinion) => {
+    if (auth) {
+      setReportModalDisplay("block");
+      setPostForReportModal(opinion);
+      document.body.style.overflowY = "hidden";
+    } else {
+      navigate("/login");
+    }
+  }
 
   const handleModalCloseClick = () => {
     setReplyModalDisplay("none");
+    setReportModalDisplay("none");
     document.body.style.overflowY = "auto";
   };
 
-  const handleContentChange = (e) => {
+  const handleReplyContentChange = (e) => {
     setReplyContent(e.target.value);
+  };
+
+  const handleReportContentChange = (e) => {
+    setReportContent(e.target.value);
   };
 
@@ -131 +150 @@
     if (!replyContent.length < 1) {
       const response = await axios(
-        `http://192.168.0.29:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
+        `http://192.168.1.254:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
         {
           method: "post",
@@ -147 +166 @@
   };
 
+  const handleReportSubmit = async (e, postId) => {
+    e.preventDefault();
+
+    if (!reportContent.length < 1) {
+      const response = await axios(
+          `http://192.168.1.254:8080/secure/reportOpinion/${postId}`,
+          {
+            method: "post",
+            data: {
+              description: reportContent,
+            },
+            withCredentials: true,
+          }
+      );
+      setErrorMessage("");
+      window.location.reload();
+    } else {
+      setErrorMessage("Полето за содржина не смее да биде празно");
+    }
+  };
+
   function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
     if (child == null) return;
-    postCount = renderedOpinionIds.push(child.postId);
+    if (!renderedOpinionIds.includes(child.postId)) {postCount = renderedOpinionIds.push(child.postId);}
     return (
       <div key={child.postId}>
@@ -158 +198 @@
               му реплицирал на {parentPostAuthorUsername}
             </p>
-            <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+            <p style={{ marginBottom: "10px", maxWidth: "85%" }}>
               {child.content}
             </p>
@@ -228 +268 @@
                 onClick={() => handleReply(child)}
               />
+
+              <StyledFontAwesomeIcon
+                  icon={solid("flag")}
+                  right={130 + "px"}
+                  color="darkgrey"
+                  onClick={() => handleReport(child)}
+              />
             </div>
           </OpinionReplyCardContent>
@@ -244 +291 @@
   return (
     <div className="opinionTree">
-      {professor.relatedOpinions.map((opinion) => {
-        if (!renderedOpinionIds.includes(opinion.postId)) {
+      {relatedOpinions.map((opinion) => {
+        if (!renderedOpinionIds.includes(opinion.postId) && opinion.parent === null) {
           postCount = renderedOpinionIds.push(opinion.postId);
           return (
@@ -257 +304 @@
                     напишал
                   </p>
-                  <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+                  <p style={{ marginBottom: "10px", maxWidth: "85%" }}>
                     {opinion.content}
                   </p>
@@ -335 +382 @@
                       onClick={() => handleReply(opinion)}
                     />
+
+                    <StyledFontAwesomeIcon
+                        icon={solid("flag")}
+                        right={130 + "px"}
+                        color="darkgrey"
+                        onClick={() => handleReport(opinion)}
+                    />
                   </div>
                 </OpinionCardContent>
@@ -346 +400 @@
         return null;
       })}
-      {postForModal && (
+      {postForReplyModal && (
         <Modal display={replyModalDisplay}>
           <ModalContent>
@@ -352 +406 @@
               <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
               <h3 style={{ marginTop: "5px" }}>
-                Реплика на {postForModal.author.username}
+                Реплика на {postForReplyModal.author.username}
               </h3>
             </ModalHeader>
-            <form onSubmit={(e) => handleReplySubmit(e, postForModal.postId)}>
+            <form onSubmit={(e) => handleReplySubmit(e, postForReplyModal.postId)}>
               <ModalBody>
                 <label htmlFor="content">
@@ -364 +418 @@
                     cols="100"
                     value={replyContent}
-                    onChange={handleContentChange}
+                    onChange={handleReplyContentChange}
                     spellCheck={false}
                   />
@@ -379 +433 @@
         </Modal>
       )}
+      {postForReportModal && (
+          <Modal display={reportModalDisplay}>
+            <ModalContent>
+              <ModalHeader>
+                <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
+                <h3 style={{ marginTop: "5px" }}>
+                  Пријава за мислење #{postForReportModal.postId}
+                </h3>
+              </ModalHeader>
+              <form onSubmit={(e) => handleReportSubmit(e, postForReportModal.postId)}>
+                <ModalBody>
+                  <label htmlFor="content">
+                    <b>Наведете причина</b>:
+                    <ModalTextarea
+                        id="content"
+                        rows="8"
+                        cols="100"
+                        value={reportContent}
+                        onChange={handleReportContentChange}
+                        spellCheck={false}
+                    />
+                  </label>
+                </ModalBody>
+                <p
+                    style={{ color: "red", marginLeft: "15px", marginTop: "10px" }}
+                >
+                  {errorMessage}
+                </p>
+                <ModalFooter type="submit">ПРИЈАВИ</ModalFooter>
+              </form>
+            </ModalContent>
+          </Modal>
+      )}
     </div>
   );