Index: reactapp/src/Pages/Professor.js
===================================================================
--- reactapp/src/Pages/Professor.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Pages/Professor.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -1,7 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { Outlet, useParams } from "react-router-dom";
 import JSOG from "jsog";
 import OpinionTree from "../Components/OpinionTree";
-
+import {
+  AddOpinionButton,
+  Modal,
+  ModalContent,
+  ModalClose,
+  ModalHeader,
+  ModalBody,
+  ModalInput,
+  ModalTextarea,
+  ModalFooter,
+} from "../Components/Styled/Modal.style";
 import {
   ProfessorCard,
@@ -10,13 +20,20 @@
   ProfessorCardSeparator,
 } from "../Components/Styled/ProfessorCard.style";
+import AuthApi from "../api/AuthApi";
+import { useNavigate } from "react-router-dom";
 
-function Professor(props) {
+function Professor() {
   let params = useParams();
 
   let [professor, setProfessor] = useState(null);
   let [loaded, setLoaded] = useState(null);
+  let [modalDisplay, setModalDisplay] = useState("none");
+  let navigate = useNavigate();
+  const { auth, setAuth } = useContext(AuthApi);
+  const [addPostTitle, setAddPostTitle] = useState("");
+  const [addPostContent, setAddPostContent] = useState("");
 
   useEffect(() => {
-    const url = `http://192.168.0.18:8080/public/professor/${params.professorId}`;
+    const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
 
     const fetchData = async () => {
@@ -24,10 +41,10 @@
         const response = await fetch(url);
         var cyclicGraph = await response.json();
-        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
+        var jsogStructure = JSOG.encode(cyclicGraph);
         cyclicGraph = JSOG.decode(jsogStructure);
         setProfessor(cyclicGraph);
         setLoaded(true);
       } catch (error) {
-        console.log("Error", error);
+        console.log("Fetching error", error);
       }
     };
@@ -35,4 +52,27 @@
     fetchData();
   }, [params.professorId]);
+
+  const handleAddOpinionButtonClick = () => {
+    if (auth) {
+      setModalDisplay("block");
+    } else {
+      navigate("/login");
+    }
+  };
+
+  const handleModalCloseClick = () => {
+    setModalDisplay("none");
+    console.log("here");
+  };
+
+  const handlePostSubmit = () => {};
+
+  const handleTitleChange = (e) => {
+    setAddPostTitle(e.target.value);
+  };
+
+  const handleContentChange = (e) => {
+    setAddPostContent(e.target.value);
+  };
 
   if (loaded) {
@@ -51,8 +91,55 @@
           </div>
         </ProfessorCard>
-        <h3 style={{ marginBottom: "10px" }}>
-          {professor.relatedOpinions.length}{" "}
-          {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
-        </h3>
+        <div style={{ height: "20px", marginBottom: "30px" }}>
+          <h3
+            style={{
+              float: "left",
+            }}
+          >
+            {professor.relatedOpinions.length}{" "}
+            {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
+          </h3>
+          <AddOpinionButton onClick={handleAddOpinionButtonClick}>
+            Објави мислење
+          </AddOpinionButton>
+        </div>
+
+        <Modal display={modalDisplay}>
+          <ModalContent>
+            <ModalHeader>
+              <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
+              <h3 style={{ marginTop: "5px" }}>
+                Мислење за {professor.professorName}
+              </h3>
+            </ModalHeader>
+            <ModalBody>
+              <form onSubmit={handlePostSubmit}>
+                <label for="title">
+                  <b>Наслов</b>:
+                  <ModalInput
+                    id="title"
+                    type="text"
+                    value={addPostTitle}
+                    onChange={handleTitleChange}
+                  />
+                </label>
+                <label for="content">
+                  <b>Содржина</b>:
+                  <ModalTextarea
+                    id="content"
+                    rows="8"
+                    cols="100"
+                    value={addPostContent}
+                    onChange={handleContentChange}
+                  />
+                </label>
+              </form>
+            </ModalBody>
+            <ModalFooter>
+              <h2 style={{ textAlign: "center" }}>ОБЈАВИ</h2>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+
         <div className="opinionTree">
           <OpinionTree professor={professor} />
