Changeset 5347491 for reactapp

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

Files:

• package-lock.json (modified) (3 diffs)
• package.json (modified) (1 diff)
• src/Components/OpinionCard.style.js (modified) (1 diff)
• src/Components/OpinionTree.js (modified) (4 diffs)
• src/Pages/Professor.js (modified) (1 diff)
• src/Util/dateConverter.js (added)

reactapp/package-lock.json

@@ -16 +16 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "babel": "^6.23.0",
         "babel-plugin-macros": "^3.1.0",
         "jsog": "^1.0.7",
@@ -4875 +4876 @@
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
+    "node_modules/babel": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel/-/babel-6.23.0.tgz",
+      "integrity": "sha512-ZDcCaI8Vlct8PJ3DvmyqUz+5X2Ylz3ZuuItBe/74yXosk2dwyVo/aN7MCJ8HJzhnnJ+6yP4o+lDgG9MBe91DLA==",
+      "deprecated": "In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers",
+      "bin": {
+        "babel": "lib/cli.js",
+        "babel-external-helpers": "lib/cli.js",
+        "babel-node": "lib/cli.js"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
@@ -20312 +20324 @@
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
+    "babel": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel/-/babel-6.23.0.tgz",
+      "integrity": "sha512-ZDcCaI8Vlct8PJ3DvmyqUz+5X2Ylz3ZuuItBe/74yXosk2dwyVo/aN7MCJ8HJzhnnJ+6yP4o+lDgG9MBe91DLA=="
+    },
     "babel-jest": {
       "version": "27.5.1",

reactapp/package.json

@@ -11 +11 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "babel": "^6.23.0",
     "babel-plugin-macros": "^3.1.0",
     "jsog": "^1.0.7",

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>
           );

reactapp/src/Pages/Professor.js

@@ -48 +48 @@
           <ProfessorCardName>{professor.professorName}</ProfessorCardName>
           <ProfessorCardSeparator />
-          <div style={{ marginTop: "20px" }}>
+          <div style={{ marginTop: "10px" }}>
             <ProfessorCardDetails fontSize="20px">
               {professor.faculty.facultyName}