Changeset 5347491 for reactapp/src/Components

Timestamp:

07/30/22 21:53:22 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

f5d4792

Parents:

e958037

Message:

styled professor page, added date translation to datePosted, added indentation for replies

Location:

reactapp/src/Components

Files:

• OpinionCard.style.js (modified) (1 diff)
• OpinionTree.js (modified) (4 diffs)

reactapp/src/Components/OpinionCard.style.js

@@ -5 +5 @@
   width: fit-content;
 `;
+
+export const OpinionReplyCard = styled.div`
+  background-color: lavender;
+  width: fit-content;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  margin-left: ${(props) => props.indent};
+`;

reactapp/src/Components/OpinionTree.js

@@ -1 @@
-import { OpinionCard } from "./OpinionCard.style";
+import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
+import { dateConverter } from "../Util/dateConverter";
 
 function OpinionTree({ professor }) {
@@ -5 +6 @@
   var postCount; // za da ne go pokazuva ispod postot
 
-  function displayChildPosts(child) {
+  function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
     if (child == null) return;
     postCount = renderedOpinionIds.push(child.postId);
     return (
       <div key={child.postId}>
-        <p>
-          <a href="#">{child.author.username}</a> реплицирал
-        </p>
-        <p>Содржина: {child.content}</p>
-        {child.children.map((childOfChild) => displayChildPosts(childOfChild))}
+        <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>
+        </OpinionReplyCard>
+        {child.children.map((childOfChild) =>
+          displayChildPosts(
+            childOfChild,
+            child.author.username,
+            replyIndent + 30
+          )
+        )}
       </div>
     );
@@ -24 +37 @@
         if (!renderedOpinionIds.includes(opinion.postId)) {
           postCount = renderedOpinionIds.push(opinion.postId);
+          var replyIndent = 30;
           return (
             <div key={opinion.postId}>
@@ -33 +47 @@
                 <p>{opinion.title}</p>
                 <p>{opinion.content}</p>
-                <p>{Date(opinion.timePosted)}</p>
+                <p>
+                  {dateConverter(
+                    new Date(opinion.timePosted).toString().slice(4, -43)
+                  )}
+                </p>
               </OpinionCard>
-              {opinion.children.map((child) => displayChildPosts(child))}
+              {opinion.children.map((child) =>
+                displayChildPosts(child, opinion.author.username, replyIndent)
+              )}
             </div>
           );