import React, { useState, useEffect, useContext } from "react";
import { useNavigate, useParams } from "react-router-dom";
import JSOG from "jsog";
import { Outlet } from "react-router-dom";
import { CurrentPageNav } from "../Components/Styled/Main.style";
import {
ProfessorCard,
ProfessorCardDetails,
ProfessorCardName,
ProfessorCardSeparator,
} from "../Components/Styled/ProfessorCard.style";
import AuthApi from "../api/AuthApi";
import { AddOpinionButton } from "../Components/Styled/Modal.style";
import {
EntityLi,
EntityUl,
EntityParam,
} from "../Components/Styled/EntityList.style";
import {
Modal,
ModalBody,
ModalClose,
ModalContent,
ModalFooter,
ModalHeader,
ModalInput,
ModalTextarea,
} from "../Components/Styled/Modal.style";
import axios from "../api/axios";
import LoadingSpinner from "../Components/Styled/LoadingSpinner.style";
const Subject = () => {
let params = useParams();
let navigate = useNavigate();
const { auth, setAuth } = useContext(AuthApi);
const [subject, setSubject] = useState(null);
const [loadedSubject, setLoadedSubject] = useState(false);
const [threads, setThreads] = useState(null);
const [loadedThreads, setLoadedThreads] = useState(false);
const [fetchError, setFetchError] = useState(false);
var totalTopics = 0;
var topics = [];
const [topicModalDisplay, setTopicModalDisplay] = useState("none");
const [topicTitle, setTopicTitle] = useState("");
const [topicContent, setTopicContent] = useState("");
const [errorMessage, setErrorMessage] = useState("");
useEffect(() => {
Promise.all([fetch(`http://192.168.1.108:8080/public/subject/${params.subjectId}`),
fetch(`http://192.168.1.108:8080/public/subject/${params.subjectId}/threads`)])
.then(([resSubject, resThreads]) => Promise.all([resSubject.json(), resThreads.json()]))
.then(([dataSubject, dataThreads]) => {
let cyclicGraph1 = dataSubject;
let jsogStructure1 = JSOG.encode(cyclicGraph1);
cyclicGraph1 = JSOG.decode(jsogStructure1);
setSubject(cyclicGraph1);
setLoadedSubject(true);
let cyclicGraph2 = dataThreads;
let jsogStructure2 = JSOG.encode(cyclicGraph2);
cyclicGraph2 = JSOG.decode(jsogStructure2);
setThreads(cyclicGraph2);
setLoadedThreads(true);
})
}, []);
const handleAddTopicButtonClick = () => {
if (auth) {
setTopicModalDisplay("block");
document.body.style.overflowY = "hidden";
} else {
navigate("/login");
}
};
const handleModalCloseClick = () => {
setTopicModalDisplay("none");
document.body.style.overflowY = "auto";
};
const handleTopicSubmit = async (e) => {
e.preventDefault();
if (!topicTitle.length < 1 && !topicContent.length < 1) {
const response = await axios(
`http://192.168.1.108:8080/secure/subject/${params.subjectId}/addThread`,
{
method: "post",
data: {
title: topicTitle,
content: topicContent,
},
withCredentials: true,
}
);
setErrorMessage("");
window.location.reload();
} else {
setErrorMessage("Полињата за наслов и содржина не смеат да бидат празни");
}
};
const handleContentChange = (e) => {
setTopicContent(e.target.value);
};
const handleTitleChange = (e) => {
setTopicTitle(e.target.value);
};
return loadedSubject ? (
<>