Ignore:
Timestamp:
08/19/22 19:10:24 (23 months 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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Pages/Professor.js

    r6eba109 r702ca77  
    1 import React, { useEffect, useState } from "react";
     1import React, { useEffect, useState, useContext } from "react";
    22import { Outlet, useParams } from "react-router-dom";
    33import JSOG from "jsog";
    44import OpinionTree from "../Components/OpinionTree";
    5 
     5import {
     6  AddOpinionButton,
     7  Modal,
     8  ModalContent,
     9  ModalClose,
     10  ModalHeader,
     11  ModalBody,
     12  ModalInput,
     13  ModalTextarea,
     14  ModalFooter,
     15} from "../Components/Styled/Modal.style";
    616import {
    717  ProfessorCard,
    … …  
    1020  ProfessorCardSeparator,
    1121} from "../Components/Styled/ProfessorCard.style";
     22import AuthApi from "../api/AuthApi";
     23import { useNavigate } from "react-router-dom";
    1224
    13 function Professor(props) {
     25function Professor() {
    1426  let params = useParams();
    1527
    1628  let [professor, setProfessor] = useState(null);
    1729  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("");
    1835
    1936  useEffect(() => {
    20     const url = `http://192.168.0.18:8080/public/professor/${params.professorId}`;
     37    const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
    2138
    2239    const fetchData = async () => {
    … …  
    2441        const response = await fetch(url);
    2542        var cyclicGraph = await response.json();
    26         var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
     43        var jsogStructure = JSOG.encode(cyclicGraph);
    2744        cyclicGraph = JSOG.decode(jsogStructure);
    2845        setProfessor(cyclicGraph);
    2946        setLoaded(true);
    3047      } catch (error) {
    31         console.log("Error", error);
     48        console.log("Fetching error", error);
    3249      }
    3350    };
    … …  
    3552    fetchData();
    3653  }, [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  };
    3777
    3878  if (loaded) {
    … …  
    5191          </div>
    5292        </ProfessorCard>
    53         <h3 style={{ marginBottom: "10px" }}>
    54           {professor.relatedOpinions.length}{" "}
    55           {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
    56         </h3>
     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}>&times;</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
    57144        <div className="opinionTree">
    58145          <OpinionTree professor={professor} />
Note: See TracChangeset for help on using the changeset viewer.