Changeset 9bf1f8d for reactapp/src/Pages/Topic.js

Timestamp:

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

Author:

viktor <viktor@…>

Branches:

main

Children:

8dffe02

Parents:

4abf55a

Message:

prefinal

File:

• reactapp/src/Pages/Topic.js (modified) (15 diffs)

reactapp/src/Pages/Topic.js

@@ -43 +43 @@
   const [postModalDisplay, setPostModalDisplay] = useState("none");
   const [postContent, setPostContent] = useState("");
+
   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 [errorMessage, setErrorMessage] = useState("");
 
   useEffect(() => {
-    const url1 = `http://192.168.0.29:8080/public/thread/${params.topicId}`;
-    const url2 = `http://192.168.0.29:8080/secure/currentUser`;
+    const url1 = `http://192.168.1.254:8080/public/thread/${params.topicId}`;
+    const url2 = `http://192.168.1.254:8080/secure/currentUser`;
 
     const fetchTopic = async () => {
@@ -79 +85 @@
 
     fetchTopic().then(fetchUser);
-  }, []);
+  }, [loadedThread]);
 
   const handleReply = (post) => {
     if (auth) {
       setReplyModalDisplay("block");
-      setPostForModal(post);
+      setPostForReplyModal(post);
+      document.body.style.overflowY = "hidden";
+    } else {
+      navigate("/login");
+    }
+  };
+
+  const handleReport = (post) => {
+    if (auth) {
+      setReportModalDisplay("block");
+      setPostForReportModal(post);
       document.body.style.overflowY = "hidden";
     } else {
@@ -95 +111 @@
   };
 
+  const handleReportContentChange = (e) => {
+    e.preventDefault();
+    setReportContent(e.target.value);
+  };
+
   const handleReplySubmit = async (e, postId) => {
     e.preventDefault();
@@ -100 +121 @@
     if (!replyContent.length < 1) {
       const response = await axios(
-        `http://192.168.0.29:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${postId}`,
+        `http://192.168.1.254:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${postId}`,
         {
           method: "post",
@@ -116 +137 @@
   };
 
+  const handleReportSubmit = async (e, postId) => {
+    e.preventDefault();
+
+    if (!reportContent.length < 1) {
+      const response = await axios(
+          `http://192.168.1.254:8080/secure/reportThread/${postId}`,
+          {
+            method: "post",
+            data: {
+              description: reportContent,
+            },
+            withCredentials: true,
+          }
+      );
+      setErrorMessage("");
+      window.location.reload();
+    } else {
+      setErrorMessage("Полето за содржина не смее да биде празно");
+    }
+  };
+
   const handleAddOpinionButtonClick = () => {
     if (auth) {
@@ -129 +171 @@
     if (!postContent.length < 1) {
       const response = await axios(
-        `http://192.168.0.29:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${params.topicId}`,
+        `http://192.168.1.254:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${params.topicId}`,
         {
           method: "post",
@@ -147 +189 @@
     setPostModalDisplay("none");
     setReplyModalDisplay("none");
+    setReportModalDisplay("none");
     document.body.style.overflowY = "auto";
   };
@@ -161 +204 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/upvoteThread/${post.postId}`,
+          `http://192.168.1.254:8080/secure/upvoteThread/${post.postId}`,
           {
             method: "get",
@@ -184 +227 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/downvoteThread/${post.postId}`,
+          `http://192.168.1.254:8080/secure/downvoteThread/${post.postId}`,
           {
             method: "get",
@@ -280 +323 @@
                 color="darkgrey"
                 onClick={() => handleReply(child)}
+              />
+
+              <StyledFontAwesomeIcon
+                  icon={solid("flag")}
+                  right={130 + "px"}
+                  color="darkgrey"
+                  onClick={() => handleReport(child)}
               />
             </div>
@@ -393 +443 @@
           >
             <StyledFontAwesomeIcon
+                icon={solid("flag")}
+                right={90 + "px"}
+                color="darkgrey"
+                onClick={() => handleReport(thread)}
+            />
+            <StyledFontAwesomeIcon
               icon={solid("thumbs-up")}
               right={50 + "px"}
@@ -517 +573 @@
                   onClick={() => handleReply(directChild)}
                 />
+
+                <StyledFontAwesomeIcon
+                    icon={solid("flag")}
+                    right={130 + "px"}
+                    color="darkgrey"
+                    onClick={() => handleReport(directChild)}
+                />
               </div>
             </OpinionCardContent>
@@ -525 +588 @@
         );
       })}
-      {postForModal && (
+      {postForReplyModal && (
         <Modal display={replyModalDisplay}>
           <ModalContent>
@@ -531 +594 @@
               <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">
@@ -557 +620 @@
         </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}
+                    />
+                  </label>
+                </ModalBody>
+                <p
+                    style={{ color: "red", marginLeft: "15px", marginTop: "10px" }}
+                >
+                  {errorMessage}
+                </p>
+                <ModalFooter type="submit">ПРИЈАВИ</ModalFooter>
+              </form>
+            </ModalContent>
+          </Modal>
+      )}
     </>
   ) : !fetchError && !loadedThread ? (