Ignore:
Timestamp:
08/20/22 21:12:04 (2 years 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

Location:
reactapp/src/Components
Files:
5 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) =>

  • reactapp/src/Components/Search.js

    r702ca77 r6221ab6  
    1515
    1616  useEffect(() => {
    17     const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
     17    const url = `http://192.168.0.19:8080/public/professors/nameContains/${transliterate(
    1818      query
    1919    )}`;

  • reactapp/src/Components/Styled/Modal.style.js

    r702ca77 r6221ab6  
    2727  top: 0;
    2828  width: 100%;
    29   height: 100%;
     29  height: auto;
    3030  overflow: auto;
    3131  background-color: rgb(0, 0, 0);
    … …  
    4747  background-color: #fefefe;
    4848  margin: 15% auto;
    49   padding: 0;
     49  padding: 20px;
    5050  border: 1px solid #888;
    5151  width: 80%;
    … …  
    7272  color: white;
    7373  height: 40px;
    74   margin-bottom: 10px;
     74  margin-bottom: 30px;
    7575`;
    7676
    77 export const ModalFooter = styled.div`
     77export const ModalFooter = styled.button`
    7878  padding: 2px 16px;
    7979  background-color: rgba(0, 102, 204, 1);
    … …  
    8181  color: white;
    8282  height: 40px;
    83   margin-top: 10px;
     83  margin-top: 30px;
    8484  transition: 0.4s;
    8585  &:hover {
    … …  
    8787    cursor: pointer;
    8888  }
     89  font-family: "Roboto Mono", monospace;
     90  width: 100%;
     91  border: 0;
     92  font-size: 18px;
     93  font-weight: bold;
    8994`;
    9095
    … …  
    109114  padding: 12px 16px;
    110115  border: 1px solid #ccc;
     116  resize: none;
    111117`;

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

    r702ca77 r6221ab6  
    6161  &:hover {
    6262    color: ${(props) => props.color};
     63    cursor: pointer;
    6364  }
    6465`;

  • reactapp/src/Components/UserHeader.js

    r702ca77 r6221ab6  
    44import Logout from "./Logout";
    55
    6 function UserHeader() {
    7   const [user, setUser] = useState(null);
    8   const [loaded, setLoaded] = useState(false);
    9 
    10   useEffect(() => {
    11     const fetchData = async () => {
    12       try {
    13         const response = await axios.get(
    14           "http://192.168.0.17:8080/secure/currentUser",
    15           { withCredentials: true }
    16         );
    17         var cyclicGraph = await response.data;
    18         var jsogStructure = JSOG.encode(cyclicGraph);
    19         cyclicGraph = JSOG.decode(jsogStructure);
    20         setUser(cyclicGraph);
    21         setLoaded(true);
    22       } catch (error) {
    23         console.log("Fetching error", error);
    24       }
    25     };
    26 
    27     fetchData();
    28   }, []);
    29 
    30   return loaded ? (
     6function UserHeader({ user, userLoaded }) {
     7  return userLoaded ? (
    318    <div style={{ float: "left", marginTop: 20, marginLeft: 40 }}>
    329      Најавен/а: <a href="/user_dashboard">{user.username}</a> <Logout />{" "}
Note: See TracChangeset for help on using the changeset viewer.