Ignore:
Timestamp:
08/30/22 15:33:18 (22 months ago)
Author:
unknown <mlviktor23@…>
Branches:
main
Children:
cae16b5
Parents:
2fcbde4
Message:

implemented upvote/downvote func. in react

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/OpinionTree.js

    r2fcbde4 r62b653f  
    88  OpinionReplyCardContentTime,
    99  StyledFontAwesomeIcon,
     10  VoteCount,
    1011} from "./Styled/OpinionCard.style";
    1112import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
    … …  
    3738  const [postForModal, setPostForModal] = useState(null);
    3839
    39   const handleLike = () => {
    40     if (auth) {
     40  const handleLike = async (post) => {
     41    if (
     42      auth &&
     43      userLoaded &&
     44      !post.likes.some((e) => e.id === user.user.id) &&
     45      !post.dislikes.some((e) => e.id === user.user.id)
     46    ) {
     47      const response = await axios(
     48        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/upvoteOpinion/${post.postId}`,
     49        {
     50          method: "get",
     51          withCredentials: true,
     52        }
     53      );
     54
     55      window.location.reload(false);
     56    } else {
    4157      return;
     58    }
     59  };
     60
     61  const handleDislike = async (post) => {
     62    if (
     63      auth &&
     64      auth &&
     65      userLoaded &&
     66      !post.likes.some((e) => e.id === user.user.id) &&
     67      !post.dislikes.some((e) => e.id === user.user.id)
     68    ) {
     69      const response = await axios(
     70        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/downvoteOpinion/${post.postId}`,
     71        {
     72          method: "get",
     73          withCredentials: true,
     74        }
     75      );
     76
     77      window.location.reload(false);
    4278    } else {
    43       navigate("/login");
    44     }
    45   };
    46 
    47   const handleDislike = () => {
    48     if (auth) {
    4979      return;
    50     } else {
    51       navigate("/login");
    5280    }
    5381  };
    … …  
    74102
    75103    const response = await axios(
    76       `http://192.168.0.19:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
     104      `http://192.168.0.17:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
    77105      {
    78106        method: "post",
    … …  
    110138                  icon={solid("thumbs-up")}
    111139                  right={50 + "px"}
    112                   color="greenyellow"
    113                   onClick={handleLike}
     140                  color={
     141                    child.likes.some((e) => e.id === user.user.id)
     142                      ? "greenyellow"
     143                      : "darkgrey"
     144                  }
     145                  onClick={() => handleLike(child)}
    114146                />
     147                <VoteCount right={50 + "px"}>{child.likes.length}</VoteCount>
    115148                <StyledFontAwesomeIcon
    116149                  icon={solid("thumbs-down")}
    117150                  right={10 + "px"}
    118                   color="indianred"
    119                   onClick={handleDislike}
     151                  color={
     152                    child.dislikes.some((e) => e.id === user.user.id)
     153                      ? "indianred"
     154                      : "darkgrey"
     155                  }
     156                  onClick={() => handleDislike(child)}
    120157                />
     158                <VoteCount right={10 + "px"}>{child.dislikes.length}</VoteCount>
    121159                <StyledFontAwesomeIcon
    122160                  icon={solid("reply")}
    123161                  right={90 + "px"}
    124                   color="black"
     162                  color="darkgrey"
    125163                  onClick={() => handleReply(child)}
    126164                />
    … …  
    166204                        icon={solid("thumbs-up")}
    167205                        right={50 + "px"}
    168                         color="greenyellow"
    169                         onClick={handleLike}
     206                        color={
     207                          opinion.likes.some((e) => e.id === user.user.id)
     208                            ? "greenyellow"
     209                            : "darkgrey"
     210                        }
     211                        onClick={() => handleLike(opinion)}
    170212                      />
     213                      <VoteCount right={50 + "px"}>
     214                        {opinion.likes.length}
     215                      </VoteCount>
    171216                      <StyledFontAwesomeIcon
    172217                        icon={solid("thumbs-down")}
    173218                        right={10 + "px"}
    174                         color="indianred"
    175                         onClick={handleDislike}
     219                        color={
     220                          opinion.dislikes.some((e) => e.id === user.user.id)
     221                            ? "indianred"
     222                            : "darkgrey"
     223                        }
     224                        onClick={() => handleDislike(opinion)}
    176225                      />
     226                      <VoteCount right={10 + "px"}>
     227                        {opinion.dislikes.length}
     228                      </VoteCount>
    177229                      <StyledFontAwesomeIcon
    178230                        icon={solid("reply")}
    179231                        right={90 + "px"}
    180                         color="black"
     232                        color="darkgrey"
    181233                        onClick={() => handleReply(opinion)}
    182234                      />
Note: See TracChangeset for help on using the changeset viewer.