Ignore:
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:
2 edited

Legend:

Unmodified
Added
Removed
  • reactapp/src/Components/OpinionCard.style.js

    re958037 r5347491  
    55  width: fit-content;
    66`;
     7
     8export const OpinionReplyCard = styled.div`
     9  background-color: lavender;
     10  width: fit-content;
     11  margin-top: 7px;
     12  margin-bottom: 7px;
     13  margin-left: ${(props) => props.indent};
     14`;
  • reactapp/src/Components/OpinionTree.js

    re958037 r5347491  
    1 import { OpinionCard } from "./OpinionCard.style";
     1import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
     2import { dateConverter } from "../Util/dateConverter";
    23
    34function OpinionTree({ professor }) {
     
    56  var postCount; // za da ne go pokazuva ispod postot
    67
    7   function displayChildPosts(child) {
     8  function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
    89    if (child == null) return;
    910    postCount = renderedOpinionIds.push(child.postId);
    1011    return (
    1112      <div key={child.postId}>
    12         <p>
    13           <a href="#">{child.author.username}</a> реплицирал
    14         </p>
    15         <p>Содржина: {child.content}</p>
    16         {child.children.map((childOfChild) => displayChildPosts(childOfChild))}
     13        <OpinionReplyCard indent={replyIndent + "px"}>
     14          <p>
     15            <a href="#">{child.author.username}</a> му реплицирал на{" "}
     16            {parentPostAuthorUsername}
     17          </p>
     18          <p>{child.content}</p>
     19          <p>
     20            {dateConverter(new Date(child.timePosted).toString().slice(4, -43))}
     21          </p>
     22        </OpinionReplyCard>
     23        {child.children.map((childOfChild) =>
     24          displayChildPosts(
     25            childOfChild,
     26            child.author.username,
     27            replyIndent + 30
     28          )
     29        )}
    1730      </div>
    1831    );
     
    2437        if (!renderedOpinionIds.includes(opinion.postId)) {
    2538          postCount = renderedOpinionIds.push(opinion.postId);
     39          var replyIndent = 30;
    2640          return (
    2741            <div key={opinion.postId}>
     
    3347                <p>{opinion.title}</p>
    3448                <p>{opinion.content}</p>
    35                 <p>{Date(opinion.timePosted)}</p>
     49                <p>
     50                  {dateConverter(
     51                    new Date(opinion.timePosted).toString().slice(4, -43)
     52                  )}
     53                </p>
    3654              </OpinionCard>
    37               {opinion.children.map((child) => displayChildPosts(child))}
     55              {opinion.children.map((child) =>
     56                displayChildPosts(child, opinion.author.username, replyIndent)
     57              )}
    3858            </div>
    3959          );
Note: See TracChangeset for help on using the changeset viewer.