import React, { useState, useEffect, useContext } from "react"; import { useParams, Outlet } from "react-router-dom"; import JSOG from "jsog"; import { CurrentPageNav } from "../Components/Styled/Main.style"; import AuthApi from "../api/AuthApi"; import { useNavigate } from "react-router-dom"; import { OpinionCard, OpinionCardContent, OpinionCardContentTime, OpinionReplyCard, OpinionReplyCardContent, OpinionReplyCardContentTime, VoteCount, } from "../Components/Styled/OpinionCard.style"; import { dateConverter } from "../Util/dateConverter"; import { StyledFontAwesomeIcon } from "../Components/Styled/OpinionCard.style"; import { solid } from "@fortawesome/fontawesome-svg-core/import.macro"; import { AddOpinionButton, Modal, ModalContent, ModalHeader, ModalClose, ModalBody, ModalTextarea, ModalFooter, } from "../Components/Styled/Modal.style"; import axios from "../api/axios"; import LoadingSpinner from "../Components/Styled/LoadingSpinner.style"; const Topic = () => { let params = useParams(); let navigate = useNavigate(); const { auth, setAuth } = useContext(AuthApi); const [thread, setThread] = useState(null); const [loadedThread, setLoadedThread] = useState(false); const [user, setUser] = useState(null); const [loadedUser, setLoadedUser] = useState(false); const [fetchError, setFetchError] = useState(false); const [postModalDisplay, setPostModalDisplay] = useState("none"); const [postContent, setPostContent] = useState(""); const [replyModalDisplay, setReplyModalDisplay] = useState("none"); const [replyContent, setReplyContent] = useState(""); const [postForReplyModal, setPostForReplyModal] = useState(null); const [reportModalDisplay, setReportModalDisplay] = useState("none"); const [reportContent, setReportContent] = useState(""); const [postForReportModal, setPostForReportModal] = useState(null); const [errorMessage, setErrorMessage] = useState(""); useEffect(() => { const url1 = `http://192.168.1.108:8080/public/thread/${params.topicId}`; const url2 = `http://192.168.1.108:8080/secure/currentUser`; const fetchTopic = async () => { try { const response = await fetch(url1); let cyclicGraph = await response.json(); let jsogStructure = JSOG.encode(cyclicGraph); cyclicGraph = JSOG.decode(jsogStructure); setThread(cyclicGraph); setLoadedThread(true); } catch (error) { setFetchError(true); } }; const fetchUser = async () => { try { const response = await axios.get(url2, { withCredentials: true }); var cyclicGraph = await response.data; var jsogStructure = JSOG.encode(cyclicGraph); cyclicGraph = JSOG.decode(jsogStructure); setUser(cyclicGraph); setLoadedUser(true); } catch (error) { setFetchError(true); } }; fetchTopic().then(fetchUser); }, [loadedThread]); const handleReply = (post) => { if (auth) { setReplyModalDisplay("block"); setPostForReplyModal(post); document.body.style.overflowY = "hidden"; } else { navigate("/login"); } }; const handleReport = (post) => { if (auth) { setReportModalDisplay("block"); setPostForReportModal(post); document.body.style.overflowY = "hidden"; } else { navigate("/login"); } }; const handleReplyContentChange = (e) => { setReplyContent(e.target.value); }; const handleReportContentChange = (e) => { e.preventDefault(); setReportContent(e.target.value); }; const handleReplySubmit = async (e, postId) => { e.preventDefault(); if (!replyContent.length < 1) { const response = await axios( `http://192.168.1.108:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${postId}`, { method: "post", data: { content: replyContent, }, withCredentials: true, } ); setErrorMessage(""); window.location.reload(); } else { setErrorMessage("Полето за содржина не смее да биде празно"); } }; const handleReportSubmit = async (e, postId) => { e.preventDefault(); if (!reportContent.length < 1) { const response = await axios( `http://192.168.1.108:8080/secure/reportThread/${postId}`, { method: "post", data: { description: reportContent, }, withCredentials: true, } ); setErrorMessage(""); window.location.reload(); } else { setErrorMessage("Полето за содржина не смее да биде празно"); } }; const handleAddOpinionButtonClick = () => { if (auth) { setPostModalDisplay("block"); document.body.style.overflowY = "hidden"; } else { navigate("/login"); } }; const handlePostSubmit = async (e) => { e.preventDefault(); if (!postContent.length < 1) { const response = await axios( `http://192.168.1.108:8080/secure/subject/${thread.targetSubject.subjectId}/replyToThread/${params.topicId}`, { method: "post", data: { content: postContent, }, withCredentials: true, } ); setErrorMessage(""); window.location.reload(); } else { setErrorMessage("Полето за содржина не смее да биде празно"); } }; const handleModalCloseClick = () => { setPostModalDisplay("none"); setReplyModalDisplay("none"); setReportModalDisplay("none"); document.body.style.overflowY = "auto"; }; const handleContentChange = (e) => { setPostContent(e.target.value); }; const handleLike = async (post) => { if (auth) { if ( loadedUser && user && !post.votes.some((e) => e.user.id === user.id) ) { const response = await axios( `http://192.168.1.108:8080/secure/upvoteThread/${post.postId}`, { method: "get", withCredentials: true, } ); window.location.reload(); } else { return; } } else { navigate("/login"); } }; const handleDislike = async (post) => { if (auth) { if ( loadedUser && user && !post.votes.some((e) => e.user.id === user.id) ) { const response = await axios( `http://192.168.1.108:8080/secure/downvoteThread/${post.postId}`, { method: "get", withCredentials: true, } ); window.location.reload(); } else { return; } } else { navigate("/login"); } }; function displayChildPosts(child, parentPostAuthorUsername, replyIndent) { if (child == null) return; //postCount = renderedOpinionIds.push(child.postId); return (
{child.author.username}{" "} му реплицирал на {parentPostAuthorUsername}
{child.content}
{new Date(child.timePosted).setMilliseconds(0) === new Date(child.timeLastEdited).setMilliseconds(0) ? ({thread.author.username}{" "} напишал
{thread.content}
{new Date(thread.timePosted).setMilliseconds(0) === new Date(thread.timeLastEdited).setMilliseconds(0) ? ({directChild.author.username} {" "} напишал
{directChild.content}
{new Date(directChild.timePosted).setMilliseconds(0) === new Date(directChild.timeLastEdited).setMilliseconds(0) ? (