Changeset f5d4792 for reactapp/src/Components/OpinionTree.js

Timestamp:

07/30/22 23:57:30 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

ad40ec0

Parents:

5347491

Message:

styled professor page

File:

• reactapp/src/Components/OpinionTree.js (modified) (3 diffs)

reactapp/src/Components/OpinionTree.js

@@ -1 @@
-import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
+import {
+  OpinionCard,
+  OpinionCardContent,
+  OpinionCardContentTime,
+  OpinionCardContentTitle,
+  OpinionReplyCard,
+  OpinionReplyCardContent,
+  OpinionReplyCardContentTime,
+  StyledFontAwesomeIcon,
+} from "./OpinionCard.style";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  solid,
+  regular,
+  brands,
+} from "@fortawesome/fontawesome-svg-core/import.macro";
 import { dateConverter } from "../Util/dateConverter";
 
@@ -12 +27 @@
       <div key={child.postId}>
         <OpinionReplyCard indent={replyIndent + "px"}>
-          <p>
-            <a href="#">{child.author.username}</a> му реплицирал на{" "}
-            {parentPostAuthorUsername}
-          </p>
-          <p>{child.content}</p>
-          <p>
-            {dateConverter(new Date(child.timePosted).toString().slice(4, -43))}
-          </p>
+          <OpinionReplyCardContent>
+            <p>
+              <a href="#">{child.author.username}</a> му реплицирал на{" "}
+              {parentPostAuthorUsername}
+            </p>
+            <p>{child.content}</p>
+            <OpinionReplyCardContentTime>
+              {dateConverter(
+                new Date(child.timePosted).toString().slice(4, -43)
+              )}
+            </OpinionReplyCardContentTime>
+            <StyledFontAwesomeIcon
+              icon={solid("thumbs-up")}
+              right={50 + "px"}
+            />
+            <StyledFontAwesomeIcon
+              icon={solid("thumbs-down")}
+              right={10 + "px"}
+            />
+            <StyledFontAwesomeIcon icon={solid("reply")} right={90 + "px"} />
+          </OpinionReplyCardContent>
+          {child.children.map((childOfChild) =>
+            displayChildPosts(
+              childOfChild,
+              child.author.username,
+              replyIndent + 30
+            )
+          )}
         </OpinionReplyCard>
-        {child.children.map((childOfChild) =>
-          displayChildPosts(
-            childOfChild,
-            child.author.username,
-            replyIndent + 30
-          )
-        )}
       </div>
     );
@@ -37 +65 @@
         if (!renderedOpinionIds.includes(opinion.postId)) {
           postCount = renderedOpinionIds.push(opinion.postId);
-          var replyIndent = 30;
           return (
             <div key={opinion.postId}>
               <OpinionCard>
-                <p>
-                  <a href="#">{opinion.author.username}</a> напишал
-                </p>
-
-                <p>{opinion.title}</p>
-                <p>{opinion.content}</p>
-                <p>
-                  {dateConverter(
-                    new Date(opinion.timePosted).toString().slice(4, -43)
-                  )}
-                </p>
+                <OpinionCardContent>
+                  <p>
+                    <a href="#">{opinion.author.username}</a> напишал
+                  </p>
+                  <OpinionCardContentTitle>
+                    {opinion.title}
+                  </OpinionCardContentTitle>
+                  <p>{opinion.content}</p>
+                  <OpinionCardContentTime>
+                    {dateConverter(
+                      new Date(opinion.timePosted).toString().slice(4, -43)
+                    )}
+                  </OpinionCardContentTime>
+                  <StyledFontAwesomeIcon
+                    icon={solid("thumbs-up")}
+                    right={50 + "px"}
+                  />
+                  <StyledFontAwesomeIcon
+                    icon={solid("thumbs-down")}
+                    right={10 + "px"}
+                  />
+                  <StyledFontAwesomeIcon
+                    icon={solid("reply")}
+                    right={90 + "px"}
+                  />
+                </OpinionCardContent>
+                {opinion.children.map((child) =>
+                  displayChildPosts(child, opinion.author.username, 30)
+                )}
               </OpinionCard>
-              {opinion.children.map((child) =>
-                displayChildPosts(child, opinion.author.username, replyIndent)
-              )}
             </div>
           );