Changeset 702ca77 for reactapp/src/Pages

Timestamp:

08/19/22 19:10:24 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

6221ab6

Parents:

6eba109

Message:

added current user/logout in header, display karma on user dashboard, started add post functionality in react

Location:

reactapp/src/Pages

Files:

• Home.js (modified) (2 diffs)
• Login.js (modified) (1 diff)
• Professor.js (modified) (5 diffs)
• User.js (deleted)
• UserDashboard.js (added)

reactapp/src/Pages/Home.js

@@ -1 @@
-import React from "react";
+import React, { useContext } from "react";
 import { MainWrapper, MainTitle } from "../Components/Styled/Main.style";
 import { Outlet } from "react-router-dom";
 import Search from "../Components/Search";
+import UserHeader from "../Components/UserHeader";
+import AuthApi from "../api/AuthApi";
 
 function Home() {
+  const { auth, setAuth } = useContext(AuthApi);
+
   return (
     <MainWrapper>
@@ -20 +24 @@
       </a>{" "}
       <Search />
+      {auth && <UserHeader />}
       <div style={{ marginTop: "140px" }}></div>
       <Outlet />

reactapp/src/Pages/Login.js

@@ -45 +45 @@
   };
 
-  const handleLogout = () => {
-    setAuth(false);
-    Cookies.remove("JSESSIONID");
-  };
-
   return auth ? (
-    /*
-    <div style={{ marginTop: "140px" }}>
-      <h1>Успешна најава!</h1>
-      <br />
-      <p>
-        <a href="/user">Оди на protected</a>
-      </p>
-      <button onClick={handleLogout}>Одјави се</button>
-    </div>
-    */
-    <Navigate to="/user" />
+    <Navigate to="/user_dashboard" />
   ) : (
     <div style={{ marginTop: "140px" }}>

reactapp/src/Pages/Professor.js

@@ -1 @@
-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 +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 +41 @@
         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 +52 @@
     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 +91 @@
           </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} />