source: reactapp/src/Components/OpinionTree.js@ 8d83180

main
Last change on this file since 8d83180 was cae16b5, checked in by unknown <mlviktor23@…>, 2 years ago

implemented registration in react

  • Property mode set to 100644
File size: 8.7 KB
Line 
1import {
2 OpinionCard,
3 OpinionCardContent,
4 OpinionCardContentTime,
5 OpinionCardContentTitle,
6 OpinionReplyCard,
7 OpinionReplyCardContent,
8 OpinionReplyCardContentTime,
9 StyledFontAwesomeIcon,
10 VoteCount,
11} from "./Styled/OpinionCard.style";
12import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
13import { dateConverter } from "../Util/dateConverter";
14import AuthApi from "../api/AuthApi";
15import { useNavigate } from "react-router-dom";
16import { useContext, useState } from "react";
17import {
18 Modal,
19 ModalContent,
20 ModalClose,
21 ModalHeader,
22 ModalBody,
23 ModalTextarea,
24 ModalFooter,
25} from "../Components/Styled/Modal.style";
26import axios from "../api/axios";
27
28function OpinionTree({ professor, user, userLoaded }) {
29 var renderedOpinionIds = [];
30 var postCount; // za da ne go pokazuva ispod postot
31
32 let navigate = useNavigate();
33 const { auth, setAuth } = useContext(AuthApi);
34
35 let [replyModalDisplay, setReplyModalDisplay] = useState("none");
36 const [replyContent, setReplyContent] = useState("");
37
38 const [postForModal, setPostForModal] = useState(null);
39
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 {
57 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);
78 } else {
79 return;
80 }
81 };
82
83 const handleReply = (opinion) => {
84 if (auth) {
85 setReplyModalDisplay("block");
86 setPostForModal(opinion);
87 } else {
88 navigate("/login");
89 }
90 };
91
92 const handleModalCloseClick = () => {
93 setReplyModalDisplay("none");
94 };
95
96 const handleContentChange = (e) => {
97 setReplyContent(e.target.value);
98 };
99
100 const handleReplySubmit = async (e, postId) => {
101 e.preventDefault();
102
103 const response = await axios(
104 `http://192.168.0.17:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
105 {
106 method: "post",
107 body: {
108 content: replyContent,
109 },
110 withCredentials: true,
111 }
112 );
113
114 window.location.reload(false);
115 //console.log(response);
116 };
117
118 function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
119 if (child == null) return;
120 postCount = renderedOpinionIds.push(child.postId);
121 return (
122 <div key={child.postId}>
123 <OpinionReplyCard indent={replyIndent + "px"}>
124 <OpinionReplyCardContent>
125 <p>
126 <a href="#">{child.author.username}</a> му реплицирал на{" "}
127 {parentPostAuthorUsername}
128 </p>
129 <p>{child.content}</p>
130 <OpinionReplyCardContentTime>
131 {dateConverter(
132 new Date(child.timePosted).toString().slice(4, -43)
133 )}
134 </OpinionReplyCardContentTime>
135 {auth && userLoaded && user.user.id !== child.author.id && (
136 <>
137 <StyledFontAwesomeIcon
138 icon={solid("thumbs-up")}
139 right={50 + "px"}
140 color={
141 child.likes.some((e) => e.id === user.user.id)
142 ? "greenyellow"
143 : "darkgrey"
144 }
145 onClick={() => handleLike(child)}
146 />
147 <VoteCount right={50 + "px"}>{child.likes.length}</VoteCount>
148 <StyledFontAwesomeIcon
149 icon={solid("thumbs-down")}
150 right={10 + "px"}
151 color={
152 child.dislikes.some((e) => e.id === user.user.id)
153 ? "indianred"
154 : "darkgrey"
155 }
156 onClick={() => handleDislike(child)}
157 />
158 <VoteCount right={10 + "px"}>{child.dislikes.length}</VoteCount>
159 <StyledFontAwesomeIcon
160 icon={solid("reply")}
161 right={90 + "px"}
162 color="darkgrey"
163 onClick={() => handleReply(child)}
164 />
165 </>
166 )}
167 </OpinionReplyCardContent>
168 {child.children.map((childOfChild) =>
169 displayChildPosts(
170 childOfChild,
171 child.author.username,
172 replyIndent + 30
173 )
174 )}
175 </OpinionReplyCard>
176 </div>
177 );
178 }
179
180 return (
181 <div className="opinionTree">
182 {professor.relatedOpinions.map((opinion) => {
183 if (!renderedOpinionIds.includes(opinion.postId)) {
184 postCount = renderedOpinionIds.push(opinion.postId);
185 return (
186 <div key={opinion.postId}>
187 <OpinionCard>
188 <OpinionCardContent>
189 <p>
190 <a href="#">{opinion.author.username}</a> напишал
191 </p>
192 <OpinionCardContentTitle>
193 {opinion.title}
194 </OpinionCardContentTitle>
195 <p>{opinion.content}</p>
196 <OpinionCardContentTime>
197 {dateConverter(
198 new Date(opinion.timePosted).toString().slice(4, -43)
199 )}
200 </OpinionCardContentTime>
201 {auth && userLoaded && user.user.id !== opinion.author.id && (
202 <>
203 <StyledFontAwesomeIcon
204 icon={solid("thumbs-up")}
205 right={50 + "px"}
206 color={
207 opinion.likes.some((e) => e.id === user.user.id)
208 ? "greenyellow"
209 : "darkgrey"
210 }
211 onClick={() => handleLike(opinion)}
212 />
213 <VoteCount right={50 + "px"}>
214 {opinion.likes.length}
215 </VoteCount>
216 <StyledFontAwesomeIcon
217 icon={solid("thumbs-down")}
218 right={10 + "px"}
219 color={
220 opinion.dislikes.some((e) => e.id === user.user.id)
221 ? "indianred"
222 : "darkgrey"
223 }
224 onClick={() => handleDislike(opinion)}
225 />
226 <VoteCount right={10 + "px"}>
227 {opinion.dislikes.length}
228 </VoteCount>
229 <StyledFontAwesomeIcon
230 icon={solid("reply")}
231 right={90 + "px"}
232 color="darkgrey"
233 onClick={() => handleReply(opinion)}
234 />
235 </>
236 )}
237 </OpinionCardContent>
238 {opinion.children.map((child) =>
239 displayChildPosts(child, opinion.author.username, 30)
240 )}
241 </OpinionCard>
242 </div>
243 );
244 }
245 })}
246 {postForModal && (
247 <Modal display={replyModalDisplay}>
248 <ModalContent>
249 <ModalHeader>
250 <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
251 <h3 style={{ marginTop: "5px" }}>
252 Реплика на {postForModal.author.username}
253 </h3>
254 </ModalHeader>
255 <form onSubmit={(e) => handleReplySubmit(e, postForModal.postId)}>
256 <ModalBody>
257 <label htmlFor="content">
258 <b>Содржина</b>:
259 <ModalTextarea
260 id="content"
261 rows="8"
262 cols="100"
263 value={replyContent}
264 onChange={handleContentChange}
265 />
266 </label>
267 </ModalBody>
268 <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
269 </form>
270 </ModalContent>
271 </Modal>
272 )}
273 </div>
274 );
275}
276
277export default OpinionTree;
Note: See TracBrowser for help on using the repository browser.