1 | import {
|
---|
2 | OpinionCard,
|
---|
3 | OpinionCardContent,
|
---|
4 | OpinionCardContentTime,
|
---|
5 | OpinionCardContentTitle,
|
---|
6 | OpinionReplyCard,
|
---|
7 | OpinionReplyCardContent,
|
---|
8 | OpinionReplyCardContentTime,
|
---|
9 | StyledFontAwesomeIcon,
|
---|
10 | } from "./Styled/OpinionCard.style";
|
---|
11 | import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
|
---|
12 | import { dateConverter } from "../Util/dateConverter";
|
---|
13 | import AuthApi from "../api/AuthApi";
|
---|
14 | import { useNavigate } from "react-router-dom";
|
---|
15 | import { useContext, useState } from "react";
|
---|
16 | import {
|
---|
17 | Modal,
|
---|
18 | ModalContent,
|
---|
19 | ModalClose,
|
---|
20 | ModalHeader,
|
---|
21 | ModalBody,
|
---|
22 | ModalTextarea,
|
---|
23 | ModalFooter,
|
---|
24 | } from "../Components/Styled/Modal.style";
|
---|
25 | import axios from "../api/axios";
|
---|
26 |
|
---|
27 | function OpinionTree({ professor, user, userLoaded }) {
|
---|
28 | var renderedOpinionIds = [];
|
---|
29 | 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 | };
|
---|
86 |
|
---|
87 | function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
|
---|
88 | if (child == null) return;
|
---|
89 | postCount = renderedOpinionIds.push(child.postId);
|
---|
90 | return (
|
---|
91 | <div key={child.postId}>
|
---|
92 | <OpinionReplyCard indent={replyIndent + "px"}>
|
---|
93 | <OpinionReplyCardContent>
|
---|
94 | <p>
|
---|
95 | <a href="#">{child.author.username}</a> му реплицирал на{" "}
|
---|
96 | {parentPostAuthorUsername}
|
---|
97 | </p>
|
---|
98 | <p>{child.content}</p>
|
---|
99 | <OpinionReplyCardContentTime>
|
---|
100 | {dateConverter(
|
---|
101 | new Date(child.timePosted).toString().slice(4, -43)
|
---|
102 | )}
|
---|
103 | </OpinionReplyCardContentTime>
|
---|
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 | )}
|
---|
126 | </OpinionReplyCardContent>
|
---|
127 | {child.children.map((childOfChild) =>
|
---|
128 | displayChildPosts(
|
---|
129 | childOfChild,
|
---|
130 | child.author.username,
|
---|
131 | replyIndent + 30
|
---|
132 | )
|
---|
133 | )}
|
---|
134 | </OpinionReplyCard>
|
---|
135 | </div>
|
---|
136 | );
|
---|
137 | }
|
---|
138 |
|
---|
139 | return (
|
---|
140 | <div className="opinionTree">
|
---|
141 | {professor.relatedOpinions.map((opinion) => {
|
---|
142 | if (!renderedOpinionIds.includes(opinion.postId)) {
|
---|
143 | postCount = renderedOpinionIds.push(opinion.postId);
|
---|
144 | return (
|
---|
145 | <div key={opinion.postId}>
|
---|
146 | <Modal display={replyModalDisplay}>
|
---|
147 | <ModalContent>
|
---|
148 | <ModalHeader>
|
---|
149 | <ModalClose onClick={handleModalCloseClick}>
|
---|
150 | ×
|
---|
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>
|
---|
173 | <OpinionCard>
|
---|
174 | <OpinionCardContent>
|
---|
175 | <p>
|
---|
176 | <a href="#">{opinion.author.username}</a> напишал
|
---|
177 | </p>
|
---|
178 | <OpinionCardContentTitle>
|
---|
179 | {opinion.title}
|
---|
180 | </OpinionCardContentTitle>
|
---|
181 | <p>{opinion.content}</p>
|
---|
182 | <OpinionCardContentTime>
|
---|
183 | {dateConverter(
|
---|
184 | new Date(opinion.timePosted).toString().slice(4, -43)
|
---|
185 | )}
|
---|
186 | </OpinionCardContentTime>
|
---|
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 | )}
|
---|
209 | </OpinionCardContent>
|
---|
210 | {opinion.children.map((child) =>
|
---|
211 | displayChildPosts(child, opinion.author.username, 30)
|
---|
212 | )}
|
---|
213 | </OpinionCard>
|
---|
214 | </div>
|
---|
215 | );
|
---|
216 | }
|
---|
217 | })}
|
---|
218 | </div>
|
---|
219 | );
|
---|
220 | }
|
---|
221 |
|
---|
222 | export default OpinionTree;
|
---|