1 | import React, { useEffect, useState, useContext } from "react";
|
---|
2 | import { Outlet, useParams } from "react-router-dom";
|
---|
3 | import JSOG from "jsog";
|
---|
4 | import OpinionTree from "../Components/OpinionTree";
|
---|
5 | import {
|
---|
6 | AddOpinionButton,
|
---|
7 | Modal,
|
---|
8 | ModalContent,
|
---|
9 | ModalClose,
|
---|
10 | ModalHeader,
|
---|
11 | ModalBody,
|
---|
12 | ModalInput,
|
---|
13 | ModalTextarea,
|
---|
14 | ModalFooter,
|
---|
15 | } from "../Components/Styled/Modal.style";
|
---|
16 | import {
|
---|
17 | ProfessorCard,
|
---|
18 | ProfessorCardDetails,
|
---|
19 | ProfessorCardName,
|
---|
20 | ProfessorCardSeparator,
|
---|
21 | } from "../Components/Styled/ProfessorCard.style";
|
---|
22 | import AuthApi from "../api/AuthApi";
|
---|
23 | import { useNavigate } from "react-router-dom";
|
---|
24 |
|
---|
25 | function Professor() {
|
---|
26 | let params = useParams();
|
---|
27 |
|
---|
28 | let [professor, setProfessor] = useState(null);
|
---|
29 | let [loaded, setLoaded] = useState(null);
|
---|
30 | let [modalDisplay, setModalDisplay] = useState("none");
|
---|
31 | let navigate = useNavigate();
|
---|
32 | const { auth, setAuth } = useContext(AuthApi);
|
---|
33 | const [addPostTitle, setAddPostTitle] = useState("");
|
---|
34 | const [addPostContent, setAddPostContent] = useState("");
|
---|
35 |
|
---|
36 | useEffect(() => {
|
---|
37 | const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
|
---|
38 |
|
---|
39 | const fetchData = async () => {
|
---|
40 | try {
|
---|
41 | const response = await fetch(url);
|
---|
42 | var cyclicGraph = await response.json();
|
---|
43 | var jsogStructure = JSOG.encode(cyclicGraph);
|
---|
44 | cyclicGraph = JSOG.decode(jsogStructure);
|
---|
45 | setProfessor(cyclicGraph);
|
---|
46 | setLoaded(true);
|
---|
47 | } catch (error) {
|
---|
48 | console.log("Fetching error", error);
|
---|
49 | }
|
---|
50 | };
|
---|
51 |
|
---|
52 | fetchData();
|
---|
53 | }, [params.professorId]);
|
---|
54 |
|
---|
55 | const handleAddOpinionButtonClick = () => {
|
---|
56 | if (auth) {
|
---|
57 | setModalDisplay("block");
|
---|
58 | } else {
|
---|
59 | navigate("/login");
|
---|
60 | }
|
---|
61 | };
|
---|
62 |
|
---|
63 | const handleModalCloseClick = () => {
|
---|
64 | setModalDisplay("none");
|
---|
65 | console.log("here");
|
---|
66 | };
|
---|
67 |
|
---|
68 | const handlePostSubmit = () => {};
|
---|
69 |
|
---|
70 | const handleTitleChange = (e) => {
|
---|
71 | setAddPostTitle(e.target.value);
|
---|
72 | };
|
---|
73 |
|
---|
74 | const handleContentChange = (e) => {
|
---|
75 | setAddPostContent(e.target.value);
|
---|
76 | };
|
---|
77 |
|
---|
78 | if (loaded) {
|
---|
79 | return (
|
---|
80 | <div>
|
---|
81 | <ProfessorCard>
|
---|
82 | <ProfessorCardName>{professor.professorName}</ProfessorCardName>
|
---|
83 | <ProfessorCardSeparator />
|
---|
84 | <div style={{ marginTop: "10px" }}>
|
---|
85 | <ProfessorCardDetails fontSize="20px">
|
---|
86 | {professor.faculty.facultyName}
|
---|
87 | </ProfessorCardDetails>
|
---|
88 | <ProfessorCardDetails fontSize="15px">
|
---|
89 | {professor.faculty.university.universityName}
|
---|
90 | </ProfessorCardDetails>
|
---|
91 | </div>
|
---|
92 | </ProfessorCard>
|
---|
93 | <div style={{ height: "20px", marginBottom: "30px" }}>
|
---|
94 | <h3
|
---|
95 | style={{
|
---|
96 | float: "left",
|
---|
97 | }}
|
---|
98 | >
|
---|
99 | {professor.relatedOpinions.length}{" "}
|
---|
100 | {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
|
---|
101 | </h3>
|
---|
102 | <AddOpinionButton onClick={handleAddOpinionButtonClick}>
|
---|
103 | Објави мислење
|
---|
104 | </AddOpinionButton>
|
---|
105 | </div>
|
---|
106 |
|
---|
107 | <Modal display={modalDisplay}>
|
---|
108 | <ModalContent>
|
---|
109 | <ModalHeader>
|
---|
110 | <ModalClose onClick={handleModalCloseClick}>×</ModalClose>
|
---|
111 | <h3 style={{ marginTop: "5px" }}>
|
---|
112 | Мислење за {professor.professorName}
|
---|
113 | </h3>
|
---|
114 | </ModalHeader>
|
---|
115 | <ModalBody>
|
---|
116 | <form onSubmit={handlePostSubmit}>
|
---|
117 | <label for="title">
|
---|
118 | <b>Наслов</b>:
|
---|
119 | <ModalInput
|
---|
120 | id="title"
|
---|
121 | type="text"
|
---|
122 | value={addPostTitle}
|
---|
123 | onChange={handleTitleChange}
|
---|
124 | />
|
---|
125 | </label>
|
---|
126 | <label for="content">
|
---|
127 | <b>Содржина</b>:
|
---|
128 | <ModalTextarea
|
---|
129 | id="content"
|
---|
130 | rows="8"
|
---|
131 | cols="100"
|
---|
132 | value={addPostContent}
|
---|
133 | onChange={handleContentChange}
|
---|
134 | />
|
---|
135 | </label>
|
---|
136 | </form>
|
---|
137 | </ModalBody>
|
---|
138 | <ModalFooter>
|
---|
139 | <h2 style={{ textAlign: "center" }}>ОБЈАВИ</h2>
|
---|
140 | </ModalFooter>
|
---|
141 | </ModalContent>
|
---|
142 | </Modal>
|
---|
143 |
|
---|
144 | <div className="opinionTree">
|
---|
145 | <OpinionTree professor={professor} />
|
---|
146 | </div>
|
---|
147 | <Outlet />
|
---|
148 | </div>
|
---|
149 | );
|
---|
150 | } else {
|
---|
151 | return (
|
---|
152 | <div>
|
---|
153 | <p style={{ marginTop: "140px" }}>се вчитува...</p>
|
---|
154 | <Outlet />
|
---|
155 | </div>
|
---|
156 | );
|
---|
157 | }
|
---|
158 | }
|
---|
159 |
|
---|
160 | export default Professor;
|
---|