[f5d4792] | 1 | import {
|
---|
| 2 | OpinionCard,
|
---|
| 3 | OpinionCardContent,
|
---|
| 4 | OpinionCardContentTime,
|
---|
| 5 | OpinionCardContentTitle,
|
---|
| 6 | OpinionReplyCard,
|
---|
| 7 | OpinionReplyCardContent,
|
---|
| 8 | OpinionReplyCardContentTime,
|
---|
| 9 | StyledFontAwesomeIcon,
|
---|
[3e98cea] | 10 | } from "./Styled/OpinionCard.style";
|
---|
| 11 |
|
---|
| 12 | import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
|
---|
[5347491] | 13 | import { dateConverter } from "../Util/dateConverter";
|
---|
[e958037] | 14 |
|
---|
[3a44163] | 15 | function OpinionTree({ professor }) {
|
---|
[2998dc4] | 16 | var renderedOpinionIds = [];
|
---|
| 17 | var postCount; // za da ne go pokazuva ispod postot
|
---|
| 18 |
|
---|
[5347491] | 19 | function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
|
---|
[2998dc4] | 20 | if (child == null) return;
|
---|
| 21 | postCount = renderedOpinionIds.push(child.postId);
|
---|
[3a44163] | 22 | return (
|
---|
[2998dc4] | 23 | <div key={child.postId}>
|
---|
[5347491] | 24 | <OpinionReplyCard indent={replyIndent + "px"}>
|
---|
[f5d4792] | 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"}
|
---|
[ad40ec0] | 39 | color="greenyellow"
|
---|
[f5d4792] | 40 | />
|
---|
| 41 | <StyledFontAwesomeIcon
|
---|
| 42 | icon={solid("thumbs-down")}
|
---|
| 43 | right={10 + "px"}
|
---|
[ad40ec0] | 44 | color="indianred"
|
---|
| 45 | />
|
---|
| 46 | <StyledFontAwesomeIcon
|
---|
| 47 | icon={solid("reply")}
|
---|
| 48 | right={90 + "px"}
|
---|
| 49 | color="black"
|
---|
[f5d4792] | 50 | />
|
---|
| 51 | </OpinionReplyCardContent>
|
---|
| 52 | {child.children.map((childOfChild) =>
|
---|
| 53 | displayChildPosts(
|
---|
| 54 | childOfChild,
|
---|
| 55 | child.author.username,
|
---|
| 56 | replyIndent + 30
|
---|
| 57 | )
|
---|
| 58 | )}
|
---|
[5347491] | 59 | </OpinionReplyCard>
|
---|
[3a44163] | 60 | </div>
|
---|
| 61 | );
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | return (
|
---|
| 65 | <div className="opinionTree">
|
---|
| 66 | {professor.relatedOpinions.map((opinion) => {
|
---|
[2998dc4] | 67 | if (!renderedOpinionIds.includes(opinion.postId)) {
|
---|
| 68 | postCount = renderedOpinionIds.push(opinion.postId);
|
---|
[3a44163] | 69 | return (
|
---|
| 70 | <div key={opinion.postId}>
|
---|
[e958037] | 71 | <OpinionCard>
|
---|
[f5d4792] | 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"}
|
---|
[ad40ec0] | 88 | color="greenyellow"
|
---|
[f5d4792] | 89 | />
|
---|
| 90 | <StyledFontAwesomeIcon
|
---|
| 91 | icon={solid("thumbs-down")}
|
---|
| 92 | right={10 + "px"}
|
---|
[ad40ec0] | 93 | color="indianred"
|
---|
[f5d4792] | 94 | />
|
---|
| 95 | <StyledFontAwesomeIcon
|
---|
| 96 | icon={solid("reply")}
|
---|
| 97 | right={90 + "px"}
|
---|
[ad40ec0] | 98 | color="black"
|
---|
[f5d4792] | 99 | />
|
---|
| 100 | </OpinionCardContent>
|
---|
| 101 | {opinion.children.map((child) =>
|
---|
| 102 | displayChildPosts(child, opinion.author.username, 30)
|
---|
| 103 | )}
|
---|
[e958037] | 104 | </OpinionCard>
|
---|
[3a44163] | 105 | </div>
|
---|
| 106 | );
|
---|
| 107 | }
|
---|
| 108 | })}
|
---|
| 109 | </div>
|
---|
| 110 | );
|
---|
| 111 | }
|
---|
| 112 |
|
---|
| 113 | export default OpinionTree;
|
---|