Changeset 62b653f for reactapp

Timestamp:

08/30/22 15:33:18 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

cae16b5

Parents:

2fcbde4

Message:

implemented upvote/downvote func. in react

Location:

reactapp/src

Files:

• App.js (modified) (1 diff)
• Components/OpinionTree.js (modified) (5 diffs)
• Components/Search.js (modified) (1 diff)
• Components/Styled/OpinionCard.style.js (modified) (2 diffs)
• Pages/Professor.js (modified) (2 diffs)
• api/axios.js (modified) (1 diff)

reactapp/src/App.js

@@ -21 +21 @@
     try {
       const response = await axios.get(
-        "http://192.168.0.19:8080/secure/currentUser",
+        "http://192.168.0.17:8080/secure/currentUser",
         { withCredentials: true }
       );

reactapp/src/Components/OpinionTree.js

@@ -8 +8 @@
   OpinionReplyCardContentTime,
   StyledFontAwesomeIcon,
+  VoteCount,
 } from "./Styled/OpinionCard.style";
 import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
@@ -37 +38 @@
   const [postForModal, setPostForModal] = useState(null);
 
-  const handleLike = () => {
-    if (auth) {
+  const handleLike = async (post) => {
+    if (
+      auth &&
+      userLoaded &&
+      !post.likes.some((e) => e.id === user.user.id) &&
+      !post.dislikes.some((e) => e.id === user.user.id)
+    ) {
+      const response = await axios(
+        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/upvoteOpinion/${post.postId}`,
+        {
+          method: "get",
+          withCredentials: true,
+        }
+      );
+
+      window.location.reload(false);
+    } else {
       return;
+    }
+  };
+
+  const handleDislike = async (post) => {
+    if (
+      auth &&
+      auth &&
+      userLoaded &&
+      !post.likes.some((e) => e.id === user.user.id) &&
+      !post.dislikes.some((e) => e.id === user.user.id)
+    ) {
+      const response = await axios(
+        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/downvoteOpinion/${post.postId}`,
+        {
+          method: "get",
+          withCredentials: true,
+        }
+      );
+
+      window.location.reload(false);
     } else {
-      navigate("/login");
-    }
-  };
-
-  const handleDislike = () => {
-    if (auth) {
       return;
-    } else {
-      navigate("/login");
     }
   };
@@ -74 +102 @@
 
     const response = await axios(
-      `http://192.168.0.19:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
+      `http://192.168.0.17:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
       {
         method: "post",
@@ -110 +138 @@
                   icon={solid("thumbs-up")}
                   right={50 + "px"}
-                  color="greenyellow"
-                  onClick={handleLike}
+                  color={
+                    child.likes.some((e) => e.id === user.user.id)
+                      ? "greenyellow"
+                      : "darkgrey"
+                  }
+                  onClick={() => handleLike(child)}
                 />
+                <VoteCount right={50 + "px"}>{child.likes.length}</VoteCount>
                 <StyledFontAwesomeIcon
                   icon={solid("thumbs-down")}
                   right={10 + "px"}
-                  color="indianred"
-                  onClick={handleDislike}
+                  color={
+                    child.dislikes.some((e) => e.id === user.user.id)
+                      ? "indianred"
+                      : "darkgrey"
+                  }
+                  onClick={() => handleDislike(child)}
                 />
+                <VoteCount right={10 + "px"}>{child.dislikes.length}</VoteCount>
                 <StyledFontAwesomeIcon
                   icon={solid("reply")}
                   right={90 + "px"}
-                  color="black"
+                  color="darkgrey"
                   onClick={() => handleReply(child)}
                 />
@@ -166 +204 @@
                         icon={solid("thumbs-up")}
                         right={50 + "px"}
-                        color="greenyellow"
-                        onClick={handleLike}
+                        color={
+                          opinion.likes.some((e) => e.id === user.user.id)
+                            ? "greenyellow"
+                            : "darkgrey"
+                        }
+                        onClick={() => handleLike(opinion)}
                       />
+                      <VoteCount right={50 + "px"}>
+                        {opinion.likes.length}
+                      </VoteCount>
                       <StyledFontAwesomeIcon
                         icon={solid("thumbs-down")}
                         right={10 + "px"}
-                        color="indianred"
-                        onClick={handleDislike}
+                        color={
+                          opinion.dislikes.some((e) => e.id === user.user.id)
+                            ? "indianred"
+                            : "darkgrey"
+                        }
+                        onClick={() => handleDislike(opinion)}
                       />
+                      <VoteCount right={10 + "px"}>
+                        {opinion.dislikes.length}
+                      </VoteCount>
                       <StyledFontAwesomeIcon
                         icon={solid("reply")}
                         right={90 + "px"}
-                        color="black"
+                        color="darkgrey"
                         onClick={() => handleReply(opinion)}
                       />

reactapp/src/Components/Search.js

@@ -15 +15 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.19:8080/public/professors/nameContains/${transliterate(
+    const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
       query
     )}`;

reactapp/src/Components/Styled/OpinionCard.style.js

@@ -52 +52 @@
 
 export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
-  color: darkgrey;
+  color: ${(props) => props.color};
   display: block;
   position: absolute;
@@ -64 +64 @@
   }
 `;
+
+export const VoteCount = styled.p`
+  color: darkgrey;
+  display: block;
+  position: absolute;
+  top: 80%;
+  transform: translateY(-50%);
+  right: ${(props) => props.right};
+  transition: 0.5s;
+`;

reactapp/src/Pages/Professor.js

@@ -36 +36 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.19:8080/public/professor/${params.professorId}`;
+    const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
 
     const fetchData = async () => {
@@ -70 +70 @@
 
     const response = await axios(
-      `http://192.168.0.19:8080/secure/professor/${professor.professorId}/addOpinion`,
+      `http://192.168.0.17:8080/secure/professor/${professor.professorId}/addOpinion`,
       {
         method: "post",

reactapp/src/api/axios.js

@@ -2 +2 @@
 
 export default axios.create({
-  baseURL: "http://192.168.0.19:8080",
+  baseURL: "http://192.168.0.17:8080",
 });