[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"}
|
---|
[ad40ec0] | 43 | color="greenyellow"
|
---|
[f5d4792] | 44 | />
|
---|
| 45 | <StyledFontAwesomeIcon
|
---|
| 46 | icon={solid("thumbs-down")}
|
---|
| 47 | right={10 + "px"}
|
---|
[ad40ec0] | 48 | color="indianred"
|
---|
| 49 | />
|
---|
| 50 | <StyledFontAwesomeIcon
|
---|
| 51 | icon={solid("reply")}
|
---|
| 52 | right={90 + "px"}
|
---|
| 53 | color="black"
|
---|
[f5d4792] | 54 | />
|
---|
| 55 | </OpinionReplyCardContent>
|
---|
| 56 | {child.children.map((childOfChild) =>
|
---|
| 57 | displayChildPosts(
|
---|
| 58 | childOfChild,
|
---|
| 59 | child.author.username,
|
---|
| 60 | replyIndent + 30
|
---|
| 61 | )
|
---|
| 62 | )}
|
---|
[5347491] | 63 | </OpinionReplyCard>
|
---|
[3a44163] | 64 | </div>
|
---|
| 65 | );
|
---|
| 66 | }
|
---|
| 67 |
|
---|
| 68 | return (
|
---|
| 69 | <div className="opinionTree">
|
---|
| 70 | {professor.relatedOpinions.map((opinion) => {
|
---|
[2998dc4] | 71 | if (!renderedOpinionIds.includes(opinion.postId)) {
|
---|
| 72 | postCount = renderedOpinionIds.push(opinion.postId);
|
---|
[3a44163] | 73 | return (
|
---|
| 74 | <div key={opinion.postId}>
|
---|
[e958037] | 75 | <OpinionCard>
|
---|
[f5d4792] | 76 | <OpinionCardContent>
|
---|
| 77 | <p>
|
---|
| 78 | <a href="#">{opinion.author.username}</a> напишал
|
---|
| 79 | </p>
|
---|
| 80 | <OpinionCardContentTitle>
|
---|
| 81 | {opinion.title}
|
---|
| 82 | </OpinionCardContentTitle>
|
---|
| 83 | <p>{opinion.content}</p>
|
---|
| 84 | <OpinionCardContentTime>
|
---|
| 85 | {dateConverter(
|
---|
| 86 | new Date(opinion.timePosted).toString().slice(4, -43)
|
---|
| 87 | )}
|
---|
| 88 | </OpinionCardContentTime>
|
---|
| 89 | <StyledFontAwesomeIcon
|
---|
| 90 | icon={solid("thumbs-up")}
|
---|
| 91 | right={50 + "px"}
|
---|
[ad40ec0] | 92 | color="greenyellow"
|
---|
[f5d4792] | 93 | />
|
---|
| 94 | <StyledFontAwesomeIcon
|
---|
| 95 | icon={solid("thumbs-down")}
|
---|
| 96 | right={10 + "px"}
|
---|
[ad40ec0] | 97 | color="indianred"
|
---|
[f5d4792] | 98 | />
|
---|
| 99 | <StyledFontAwesomeIcon
|
---|
| 100 | icon={solid("reply")}
|
---|
| 101 | right={90 + "px"}
|
---|
[ad40ec0] | 102 | color="black"
|
---|
[f5d4792] | 103 | />
|
---|
| 104 | </OpinionCardContent>
|
---|
| 105 | {opinion.children.map((child) =>
|
---|
| 106 | displayChildPosts(child, opinion.author.username, 30)
|
---|
| 107 | )}
|
---|
[e958037] | 108 | </OpinionCard>
|
---|
[3a44163] | 109 | </div>
|
---|
| 110 | );
|
---|
| 111 | }
|
---|
| 112 | })}
|
---|
| 113 | </div>
|
---|
| 114 | );
|
---|
| 115 | }
|
---|
| 116 |
|
---|
| 117 | export default OpinionTree;
|
---|