[f5d4792] | 1 | import {
|
---|
| 2 | OpinionCard,
|
---|
| 3 | OpinionCardContent,
|
---|
| 4 | OpinionCardContentTime,
|
---|
| 5 | OpinionCardContentTitle,
|
---|
| 6 | OpinionReplyCard,
|
---|
| 7 | OpinionReplyCardContent,
|
---|
| 8 | OpinionReplyCardContentTime,
|
---|
| 9 | StyledFontAwesomeIcon,
|
---|
| 10 | } from "./OpinionCard.style";
|
---|
| 11 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
---|
| 12 | import {
|
---|
| 13 | solid,
|
---|
| 14 | regular,
|
---|
| 15 | brands,
|
---|
| 16 | } from "@fortawesome/fontawesome-svg-core/import.macro";
|
---|
[5347491] | 17 | import { dateConverter } from "../Util/dateConverter";
|
---|
[e958037] | 18 |
|
---|
[3a44163] | 19 | function OpinionTree({ professor }) {
|
---|
[2998dc4] | 20 | var renderedOpinionIds = [];
|
---|
| 21 | var postCount; // za da ne go pokazuva ispod postot
|
---|
| 22 |
|
---|
[5347491] | 23 | function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
|
---|
[2998dc4] | 24 | if (child == null) return;
|
---|
| 25 | postCount = renderedOpinionIds.push(child.postId);
|
---|
[3a44163] | 26 | return (
|
---|
[2998dc4] | 27 | <div key={child.postId}>
|
---|
[5347491] | 28 | <OpinionReplyCard indent={replyIndent + "px"}>
|
---|
[f5d4792] | 29 | <OpinionReplyCardContent>
|
---|
| 30 | <p>
|
---|
| 31 | <a href="#">{child.author.username}</a> му реплицирал на{" "}
|
---|
| 32 | {parentPostAuthorUsername}
|
---|
| 33 | </p>
|
---|
| 34 | <p>{child.content}</p>
|
---|
| 35 | <OpinionReplyCardContentTime>
|
---|
| 36 | {dateConverter(
|
---|
| 37 | new Date(child.timePosted).toString().slice(4, -43)
|
---|
| 38 | )}
|
---|
| 39 | </OpinionReplyCardContentTime>
|
---|
| 40 | <StyledFontAwesomeIcon
|
---|
| 41 | icon={solid("thumbs-up")}
|
---|
| 42 | right={50 + "px"}
|
---|
| 43 | />
|
---|
| 44 | <StyledFontAwesomeIcon
|
---|
| 45 | icon={solid("thumbs-down")}
|
---|
| 46 | right={10 + "px"}
|
---|
| 47 | />
|
---|
| 48 | <StyledFontAwesomeIcon icon={solid("reply")} right={90 + "px"} />
|
---|
| 49 | </OpinionReplyCardContent>
|
---|
| 50 | {child.children.map((childOfChild) =>
|
---|
| 51 | displayChildPosts(
|
---|
| 52 | childOfChild,
|
---|
| 53 | child.author.username,
|
---|
| 54 | replyIndent + 30
|
---|
| 55 | )
|
---|
| 56 | )}
|
---|
[5347491] | 57 | </OpinionReplyCard>
|
---|
[3a44163] | 58 | </div>
|
---|
| 59 | );
|
---|
| 60 | }
|
---|
| 61 |
|
---|
| 62 | return (
|
---|
| 63 | <div className="opinionTree">
|
---|
| 64 | {professor.relatedOpinions.map((opinion) => {
|
---|
[2998dc4] | 65 | if (!renderedOpinionIds.includes(opinion.postId)) {
|
---|
| 66 | postCount = renderedOpinionIds.push(opinion.postId);
|
---|
[3a44163] | 67 | return (
|
---|
| 68 | <div key={opinion.postId}>
|
---|
[e958037] | 69 | <OpinionCard>
|
---|
[f5d4792] | 70 | <OpinionCardContent>
|
---|
| 71 | <p>
|
---|
| 72 | <a href="#">{opinion.author.username}</a> напишал
|
---|
| 73 | </p>
|
---|
| 74 | <OpinionCardContentTitle>
|
---|
| 75 | {opinion.title}
|
---|
| 76 | </OpinionCardContentTitle>
|
---|
| 77 | <p>{opinion.content}</p>
|
---|
| 78 | <OpinionCardContentTime>
|
---|
| 79 | {dateConverter(
|
---|
| 80 | new Date(opinion.timePosted).toString().slice(4, -43)
|
---|
| 81 | )}
|
---|
| 82 | </OpinionCardContentTime>
|
---|
| 83 | <StyledFontAwesomeIcon
|
---|
| 84 | icon={solid("thumbs-up")}
|
---|
| 85 | right={50 + "px"}
|
---|
| 86 | />
|
---|
| 87 | <StyledFontAwesomeIcon
|
---|
| 88 | icon={solid("thumbs-down")}
|
---|
| 89 | right={10 + "px"}
|
---|
| 90 | />
|
---|
| 91 | <StyledFontAwesomeIcon
|
---|
| 92 | icon={solid("reply")}
|
---|
| 93 | right={90 + "px"}
|
---|
| 94 | />
|
---|
| 95 | </OpinionCardContent>
|
---|
| 96 | {opinion.children.map((child) =>
|
---|
| 97 | displayChildPosts(child, opinion.author.username, 30)
|
---|
| 98 | )}
|
---|
[e958037] | 99 | </OpinionCard>
|
---|
[3a44163] | 100 | </div>
|
---|
| 101 | );
|
---|
| 102 | }
|
---|
| 103 | })}
|
---|
| 104 | </div>
|
---|
| 105 | );
|
---|
| 106 | }
|
---|
| 107 |
|
---|
| 108 | export default OpinionTree;
|
---|