Changeset 2998dc4 for reactapp


Ignore:
Timestamp:
07/30/22 15:39:04 (2 years ago)
Author:
unknown <mlviktor23@…>
Branches:
main
Children:
e958037
Parents:
3a44163
Message:

made OpinionTree display author info

Location:
reactapp
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • reactapp/package-lock.json

    r3a44163 r2998dc4  
    1212        "@testing-library/react": "^13.3.0",
    1313        "@testing-library/user-event": "^13.5.0",
     14        "jsog": "^1.0.7",
    1415        "react": "^18.2.0",
    1516        "react-dom": "^18.2.0",
    … …  
    1122611227      }
    1122711228    },
     11229    "node_modules/jsog": {
     11230      "version": "1.0.7",
     11231      "resolved": "https://registry.npmjs.org/jsog/-/jsog-1.0.7.tgz",
     11232      "integrity": "sha512-9IA6ZY6g5rSgRTvHO7B4Ro9LGGqJEPXdKRkvPohmzdk777fldQ3rjbUkmiIG3gxswLi2ZiAKsdgqfs+zMwmRcg=="
     11233    },
    1122811234    "node_modules/json-parse-even-better-errors": {
    1122911235      "version": "2.3.1",
    … …  
    2473424740      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
    2473524741    },
     24742    "jsog": {
     24743      "version": "1.0.7",
     24744      "resolved": "https://registry.npmjs.org/jsog/-/jsog-1.0.7.tgz",
     24745      "integrity": "sha512-9IA6ZY6g5rSgRTvHO7B4Ro9LGGqJEPXdKRkvPohmzdk777fldQ3rjbUkmiIG3gxswLi2ZiAKsdgqfs+zMwmRcg=="
     24746    },
    2473624747    "json-parse-even-better-errors": {
    2473724748      "version": "2.3.1",

  • reactapp/package.json

    r3a44163 r2998dc4  
    77    "@testing-library/react": "^13.3.0",
    88    "@testing-library/user-event": "^13.5.0",
     9    "jsog": "^1.0.7",
    910    "react": "^18.2.0",
    1011    "react-dom": "^18.2.0",

  • reactapp/src/App.css

    r3a44163 r2998dc4  
    22  text-align: center;
    33}
    4 
    5 .App-logo {
    6   height: 40vmin;
    7   pointer-events: none;
    8 }
    9 
    10 @media (prefers-reduced-motion: no-preference) {
    11   .App-logo {
    12     animation: App-logo-spin infinite 20s linear;
    13   }
    14 }
    15 
    16 .App-header {
    17   background-color: #282c34;
    18   min-height: 100vh;
    19   display: flex;
    20   flex-direction: column;
    21   align-items: center;
    22   justify-content: center;
    23   font-size: calc(10px + 2vmin);
    24   color: white;
    25 }
    26 
    27 .App-link {
    28   color: #61dafb;
    29 }
    30 
    31 @keyframes App-logo-spin {
    32   from {
    33     transform: rotate(0deg);
    34   }
    35   to {
    36     transform: rotate(360deg);
    37   }
    38 }

  • reactapp/src/App.js

    r3a44163 r2998dc4  
    44  return (
    55    <div>
    6       <h1>Main App Page</h1>
    7       <nav
    8         style={{
    9           borderBottom: "solid 1px",
    10           paddingBottom: "1rem",
    11         }}
    12       >
    13         <Link to="/professor">Professor</Link>
    14       </nav>
     6      <h1>profesori.mk</h1>
    157      <Outlet />
    168    </div>

  • reactapp/src/Components/OpinionTree.js

    r3a44163 r2998dc4  
    11function OpinionTree({ professor }) {
    2   function displayChildPosts(post) {
    3     if (post == null) return;
     2  var renderedOpinionIds = [];
     3  var postCount; // za da ne go pokazuva ispod postot
     4
     5  function displayChildPosts(child) {
     6    if (child == null) return;
     7    postCount = renderedOpinionIds.push(child.postId);
    48    return (
    5       <div key={post.postId}>
    6         <p>Содржина: {post.content}</p>
    7         {post.children.map((child) => displayChildPosts(child))}
     9      <div key={child.postId}>
     10        <p>{child.author.username} реплицирал</p>
     11        <p>Содржина: {child.content}</p>
     12        {child.children.map((childOfChild) => displayChildPosts(childOfChild))}
    813      </div>
    914    );
    … …  
    1318    <div className="opinionTree">
    1419      {professor.relatedOpinions.map((opinion) => {
    15         if (opinion.hasOwnProperty("title")) {
     20        if (!renderedOpinionIds.includes(opinion.postId)) {
     21          postCount = renderedOpinionIds.push(opinion.postId);
    1622          return (
    1723            <div key={opinion.postId}>
     24              <p>{opinion.author.username} напишал</p>
    1825              <p>Наслов: {opinion.title}</p>
    1926              <p>Содржина: {opinion.content}</p>
    2027              {opinion.children.map((child) => displayChildPosts(child))}
     28              <hr />
    2129            </div>
    2230          );

  • reactapp/src/Pages/Professor.js

    r3a44163 r2998dc4  
    11import React, { useEffect, useState } from "react";
    22import { Outlet, useParams } from "react-router-dom";
     3import JSOG from "jsog";
    34import OpinionTree from "../Components/OpinionTree";
    45
    … …  
    1516      try {
    1617        const response = await fetch(url);
    17         const json = await response.json();
    18         setProfessor(json);
     18        var cyclicGraph = await response.json();
     19        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
     20        cyclicGraph = JSOG.decode(jsogStructure);
     21        setProfessor(cyclicGraph);
    1922        setLoaded(true);
    2023      } catch (error) {
Note: See TracChangeset for help on using the changeset viewer.