Ignore:
Timestamp:
08/20/22 21:12:04 (23 months ago)
Author:
unknown <mlviktor23@…>
Branches:
main
Children:
2fcbde4
Parents:
702ca77
Message:

finished add post func. in react, fixed user dashboard details not loading upon login redirect

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/OpinionTree.js

    r702ca77 r6221ab6  
    99  StyledFontAwesomeIcon,
    1010} from "./Styled/OpinionCard.style";
    11 
    1211import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
    1312import { dateConverter } from "../Util/dateConverter";
    14 
    15 function OpinionTree({ professor }) {
     13import AuthApi from "../api/AuthApi";
     14import { useNavigate } from "react-router-dom";
     15import { useContext, useState } from "react";
     16import {
     17  Modal,
     18  ModalContent,
     19  ModalClose,
     20  ModalHeader,
     21  ModalBody,
     22  ModalTextarea,
     23  ModalFooter,
     24} from "../Components/Styled/Modal.style";
     25import axios from "../api/axios";
     26
     27function OpinionTree({ professor, user, userLoaded }) {
    1628  var renderedOpinionIds = [];
    1729  var postCount; // za da ne go pokazuva ispod postot
     30
     31  let navigate = useNavigate();
     32  const { auth, setAuth } = useContext(AuthApi);
     33
     34  let [replyModalDisplay, setReplyModalDisplay] = useState("none");
     35  const [replyContent, setReplyContent] = useState("");
     36
     37  const handleLike = () => {
     38    if (auth) {
     39      return;
     40    } else {
     41      navigate("/login");
     42    }
     43  };
     44
     45  const handleDislike = () => {
     46    if (auth) {
     47      return;
     48    } else {
     49      navigate("/login");
     50    }
     51  };
     52
     53  const handleReply = () => {
     54    if (auth) {
     55      setReplyModalDisplay("block");
     56    } else {
     57      navigate("/login");
     58    }
     59  };
     60
     61  const handleModalCloseClick = () => {
     62    setReplyModalDisplay("none");
     63  };
     64
     65  const handleContentChange = (e) => {
     66    setReplyContent(e.target.value);
     67  };
     68
     69  const handleReplySubmit = async (e, postId) => {
     70    e.preventDefault();
     71
     72    const response = await axios(
     73      `http://192.168.0.19:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
     74      {
     75        method: "post",
     76        data: {
     77          content: replyContent,
     78        },
     79        withCredentials: true,
     80      }
     81    );
     82
     83    window.location.reload(false);
     84    //console.log(response);
     85  };
    1886
    1987  function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
    … …  
    34102              )}
    35103            </OpinionReplyCardContentTime>
    36             <StyledFontAwesomeIcon
    37               icon={solid("thumbs-up")}
    38               right={50 + "px"}
    39               color="greenyellow"
    40             />
    41             <StyledFontAwesomeIcon
    42               icon={solid("thumbs-down")}
    43               right={10 + "px"}
    44               color="indianred"
    45             />
    46             <StyledFontAwesomeIcon
    47               icon={solid("reply")}
    48               right={90 + "px"}
    49               color="black"
    50             />
     104            {auth && userLoaded && user.user.id !== child.author.id && (
     105              <>
     106                <StyledFontAwesomeIcon
     107                  icon={solid("thumbs-up")}
     108                  right={50 + "px"}
     109                  color="greenyellow"
     110                  onClick={handleLike}
     111                />
     112                <StyledFontAwesomeIcon
     113                  icon={solid("thumbs-down")}
     114                  right={10 + "px"}
     115                  color="indianred"
     116                  onClick={handleDislike}
     117                />
     118                <StyledFontAwesomeIcon
     119                  icon={solid("reply")}
     120                  right={90 + "px"}
     121                  color="black"
     122                  onClick={handleReply} //todo
     123                />
     124              </>
     125            )}
    51126          </OpinionReplyCardContent>
    52127          {child.children.map((childOfChild) =>
    … …  
    69144          return (
    70145            <div key={opinion.postId}>
     146              <Modal display={replyModalDisplay}>
     147                <ModalContent>
     148                  <ModalHeader>
     149                    <ModalClose onClick={handleModalCloseClick}>
     150                      &times;
     151                    </ModalClose>
     152                    <h3 style={{ marginTop: "5px" }}>
     153                      Реплика на {opinion.author.username}
     154                    </h3>
     155                  </ModalHeader>
     156                  <form onSubmit={(e) => handleReplySubmit(e, opinion.postId)}>
     157                    <ModalBody>
     158                      <label htmlFor="content">
     159                        <b>Содржина</b>:
     160                        <ModalTextarea
     161                          id="content"
     162                          rows="8"
     163                          cols="100"
     164                          value={replyContent}
     165                          onChange={handleContentChange}
     166                        />
     167                      </label>
     168                    </ModalBody>
     169                    <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
     170                  </form>
     171                </ModalContent>
     172              </Modal>
    71173              <OpinionCard>
    72174                <OpinionCardContent>
    … …  
    83185                    )}
    84186                  </OpinionCardContentTime>
    85                   <StyledFontAwesomeIcon
    86                     icon={solid("thumbs-up")}
    87                     right={50 + "px"}
    88                     color="greenyellow"
    89                   />
    90                   <StyledFontAwesomeIcon
    91                     icon={solid("thumbs-down")}
    92                     right={10 + "px"}
    93                     color="indianred"
    94                   />
    95                   <StyledFontAwesomeIcon
    96                     icon={solid("reply")}
    97                     right={90 + "px"}
    98                     color="black"
    99                   />
     187                  {auth && userLoaded && user.user.id !== opinion.author.id && (
     188                    <>
     189                      <StyledFontAwesomeIcon
     190                        icon={solid("thumbs-up")}
     191                        right={50 + "px"}
     192                        color="greenyellow"
     193                        onClick={handleLike}
     194                      />
     195                      <StyledFontAwesomeIcon
     196                        icon={solid("thumbs-down")}
     197                        right={10 + "px"}
     198                        color="indianred"
     199                        onClick={handleDislike}
     200                      />
     201                      <StyledFontAwesomeIcon
     202                        icon={solid("reply")}
     203                        right={90 + "px"}
     204                        color="black"
     205                        onClick={handleReply}
     206                      />
     207                    </>
     208                  )}
    100209                </OpinionCardContent>
    101210                {opinion.children.map((child) =>
Note: See TracChangeset for help on using the changeset viewer.