1 | import React, { useEffect, useState } from "react";
|
---|
2 | import { Outlet, useParams } from "react-router-dom";
|
---|
3 | import JSOG from "jsog";
|
---|
4 | import OpinionTree from "../Components/OpinionTree";
|
---|
5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
---|
6 | import {
|
---|
7 | solid,
|
---|
8 | regular,
|
---|
9 | brands,
|
---|
10 | } from "@fortawesome/fontawesome-svg-core/import.macro";
|
---|
11 |
|
---|
12 | import {
|
---|
13 | ProfessorCard,
|
---|
14 | ProfessorCardDetails,
|
---|
15 | ProfessorCardName,
|
---|
16 | ProfessorCardSeparator,
|
---|
17 | } from "../Components/ProfessorCard.style";
|
---|
18 |
|
---|
19 | function Professor(props) {
|
---|
20 | let params = useParams();
|
---|
21 |
|
---|
22 | let [professor, setProfessor] = useState(null);
|
---|
23 | let [loaded, setLoaded] = useState(null);
|
---|
24 |
|
---|
25 | useEffect(() => {
|
---|
26 | const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
|
---|
27 |
|
---|
28 | const fetchData = async () => {
|
---|
29 | try {
|
---|
30 | const response = await fetch(url);
|
---|
31 | var cyclicGraph = await response.json();
|
---|
32 | var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
|
---|
33 | cyclicGraph = JSOG.decode(jsogStructure);
|
---|
34 | setProfessor(cyclicGraph);
|
---|
35 | setLoaded(true);
|
---|
36 | } catch (error) {
|
---|
37 | console.log("Error", error);
|
---|
38 | }
|
---|
39 | };
|
---|
40 |
|
---|
41 | fetchData();
|
---|
42 | }, []);
|
---|
43 |
|
---|
44 | if (loaded) {
|
---|
45 | return (
|
---|
46 | <div>
|
---|
47 | <ProfessorCard>
|
---|
48 | <ProfessorCardName>{professor.professorName}</ProfessorCardName>
|
---|
49 | <ProfessorCardSeparator />
|
---|
50 | <div style={{ marginTop: "10px" }}>
|
---|
51 | <ProfessorCardDetails fontSize="20px">
|
---|
52 | {professor.faculty.facultyName}
|
---|
53 | </ProfessorCardDetails>
|
---|
54 | <ProfessorCardDetails fontSize="15px">
|
---|
55 | {professor.faculty.university.universityName}
|
---|
56 | </ProfessorCardDetails>
|
---|
57 | </div>
|
---|
58 | </ProfessorCard>
|
---|
59 | <h3>{professor.relatedOpinions.length} мислења</h3>
|
---|
60 | <div className="opinionTree">
|
---|
61 | <OpinionTree professor={professor} />
|
---|
62 | </div>
|
---|
63 | <Outlet />
|
---|
64 | </div>
|
---|
65 | );
|
---|
66 | } else {
|
---|
67 | return (
|
---|
68 | <div>
|
---|
69 | <p>loading</p>
|
---|
70 | <Outlet />
|
---|
71 | </div>
|
---|
72 | );
|
---|
73 | }
|
---|
74 | }
|
---|
75 |
|
---|
76 | export default Professor;
|
---|