1 | import {
|
---|
2 | OpinionCard,
|
---|
3 | OpinionCardContent,
|
---|
4 | OpinionCardContentTime,
|
---|
5 | OpinionCardContentTitle,
|
---|
6 | OpinionReplyCard,
|
---|
7 | OpinionReplyCardContent,
|
---|
8 | OpinionReplyCardContentTime,
|
---|
9 | StyledFontAwesomeIcon,
|
---|
10 | } from "./Styled/OpinionCard.style";
|
---|
11 |
|
---|
12 | import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
|
---|
13 | import { dateConverter } from "../Util/dateConverter";
|
---|
14 |
|
---|
15 | function OpinionTree({ professor }) {
|
---|
16 | var renderedOpinionIds = [];
|
---|
17 | var postCount; // za da ne go pokazuva ispod postot
|
---|
18 |
|
---|
19 | function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
|
---|
20 | if (child == null) return;
|
---|
21 | postCount = renderedOpinionIds.push(child.postId);
|
---|
22 | return (
|
---|
23 | <div key={child.postId}>
|
---|
24 | <OpinionReplyCard indent={replyIndent + "px"}>
|
---|
25 | <OpinionReplyCardContent>
|
---|
26 | <p>
|
---|
27 | <a href="#">{child.author.username}</a> му реплицирал на{" "}
|
---|
28 | {parentPostAuthorUsername}
|
---|
29 | </p>
|
---|
30 | <p>{child.content}</p>
|
---|
31 | <OpinionReplyCardContentTime>
|
---|
32 | {dateConverter(
|
---|
33 | new Date(child.timePosted).toString().slice(4, -43)
|
---|
34 | )}
|
---|
35 | </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 | />
|
---|
51 | </OpinionReplyCardContent>
|
---|
52 | {child.children.map((childOfChild) =>
|
---|
53 | displayChildPosts(
|
---|
54 | childOfChild,
|
---|
55 | child.author.username,
|
---|
56 | replyIndent + 30
|
---|
57 | )
|
---|
58 | )}
|
---|
59 | </OpinionReplyCard>
|
---|
60 | </div>
|
---|
61 | );
|
---|
62 | }
|
---|
63 |
|
---|
64 | return (
|
---|
65 | <div className="opinionTree">
|
---|
66 | {professor.relatedOpinions.map((opinion) => {
|
---|
67 | if (!renderedOpinionIds.includes(opinion.postId)) {
|
---|
68 | postCount = renderedOpinionIds.push(opinion.postId);
|
---|
69 | return (
|
---|
70 | <div key={opinion.postId}>
|
---|
71 | <OpinionCard>
|
---|
72 | <OpinionCardContent>
|
---|
73 | <p>
|
---|
74 | <a href="#">{opinion.author.username}</a> напишал
|
---|
75 | </p>
|
---|
76 | <OpinionCardContentTitle>
|
---|
77 | {opinion.title}
|
---|
78 | </OpinionCardContentTitle>
|
---|
79 | <p>{opinion.content}</p>
|
---|
80 | <OpinionCardContentTime>
|
---|
81 | {dateConverter(
|
---|
82 | new Date(opinion.timePosted).toString().slice(4, -43)
|
---|
83 | )}
|
---|
84 | </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 | />
|
---|
100 | </OpinionCardContent>
|
---|
101 | {opinion.children.map((child) =>
|
---|
102 | displayChildPosts(child, opinion.author.username, 30)
|
---|
103 | )}
|
---|
104 | </OpinionCard>
|
---|
105 | </div>
|
---|
106 | );
|
---|
107 | }
|
---|
108 | })}
|
---|
109 | </div>
|
---|
110 | );
|
---|
111 | }
|
---|
112 |
|
---|
113 | export default OpinionTree;
|
---|