[8d83180] | 1 | import React, { useState } from "react";
|
---|
| 2 | import {
|
---|
| 3 | AccordionTitle,
|
---|
| 4 | SubjectsAccordionDiv,
|
---|
| 5 | OpenAccordionSymbol,
|
---|
| 6 | } from "./Styled/SubjectsAccordion.style.";
|
---|
| 7 | import { EntityLi, EntityUl, EntityParam } from "./Styled/EntityList.style";
|
---|
[9bf1f8d] | 8 | import JSOG from "jsog";
|
---|
[8d83180] | 9 |
|
---|
| 10 | const SubjectsAccordion = (props) => {
|
---|
| 11 | const [height, setHeight] = useState("0");
|
---|
| 12 | const [opacity, setOpacity] = useState(0);
|
---|
[9bf1f8d] | 13 |
|
---|
| 14 | const [subjects, setSubjects] = useState(null);
|
---|
| 15 | const [loadedSubjects, setLoadedSubjects] = useState(false);
|
---|
| 16 | const [counts, setCounts] = useState(null);
|
---|
| 17 | const [loadedCounts, setLoadedCounts] = useState(false);
|
---|
| 18 |
|
---|
| 19 | const [fetchError, setFetchError] = useState(false);
|
---|
[8d83180] | 20 | const handleClick = () => {
|
---|
| 21 | if (height === "0") {
|
---|
| 22 | setHeight("auto");
|
---|
| 23 | setOpacity(1);
|
---|
[9bf1f8d] | 24 | try {
|
---|
[8dffe02] | 25 | Promise.all([fetch(`http://192.168.1.108:8080/public/subjects?studyProgrammeId=${props.title.studyProgrammeId}`),
|
---|
| 26 | fetch(`http://192.168.1.108:8080/public/study_programme/${props.title.studyProgrammeId}/threadCountForEachSubject`)])
|
---|
[9bf1f8d] | 27 | .then(([resSubjects, counts]) => Promise.all([resSubjects.json(), counts.json()]))
|
---|
| 28 | .then(([dataSubjects, dataCounts]) => {
|
---|
| 29 | let cyclicGraph1 = dataSubjects;
|
---|
| 30 | let jsogStructure1 = JSOG.encode(cyclicGraph1);
|
---|
| 31 | cyclicGraph1 = JSOG.decode(jsogStructure1);
|
---|
| 32 | setSubjects(cyclicGraph1);
|
---|
| 33 | setLoadedSubjects(true);
|
---|
| 34 |
|
---|
| 35 | let cyclicGraph2 = dataCounts;
|
---|
| 36 | let jsogStructure2 = JSOG.encode(cyclicGraph2);
|
---|
| 37 | cyclicGraph2 = JSOG.decode(jsogStructure2);
|
---|
| 38 | setCounts(cyclicGraph2);
|
---|
| 39 | setLoadedCounts(true);
|
---|
| 40 | })
|
---|
| 41 |
|
---|
| 42 | } catch (error) {
|
---|
| 43 | setFetchError(true);
|
---|
| 44 | }
|
---|
[8d83180] | 45 | } else {
|
---|
| 46 | setHeight("0");
|
---|
| 47 | setOpacity(0);
|
---|
| 48 | }
|
---|
| 49 | };
|
---|
| 50 | return (
|
---|
| 51 | <div onClick={() => handleClick()}>
|
---|
| 52 | <AccordionTitle>
|
---|
| 53 | {props.title.studyProgrammeName} ({props.title.cycle}. циклус)
|
---|
| 54 | <OpenAccordionSymbol>▾</OpenAccordionSymbol>
|
---|
| 55 | </AccordionTitle>
|
---|
| 56 | <SubjectsAccordionDiv height={height} opacity={opacity}>
|
---|
| 57 | <EntityUl>
|
---|
[9bf1f8d] | 58 | {loadedSubjects &&
|
---|
| 59 | subjects.map((item, idx) => {
|
---|
| 60 | let totalPosts = parseInt(counts[idx].split(",")[1]);
|
---|
[c68150f] | 61 | return (
|
---|
| 62 | <EntityLi key={item.subjectName} bgcolor="cornsilk">
|
---|
| 63 | <a href={"/subject/" + item.subjectId}>{item.subjectName}</a>
|
---|
| 64 | <EntityParam right="30px">
|
---|
| 65 | {totalPosts !== 1 ? (
|
---|
| 66 | totalPosts !== 0 ? (
|
---|
[8d83180] | 67 | <span
|
---|
| 68 | style={{
|
---|
[c68150f] | 69 | fontWeight: "normal",
|
---|
[8d83180] | 70 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
| 71 | }}
|
---|
| 72 | >
|
---|
[c68150f] | 73 | <span
|
---|
| 74 | style={{
|
---|
| 75 | fontWeight: "bold",
|
---|
| 76 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
| 77 | }}
|
---|
| 78 | >
|
---|
| 79 | {totalPosts}
|
---|
| 80 | </span>{" "}
|
---|
| 81 | мислења
|
---|
| 82 | </span>
|
---|
| 83 | ) : (
|
---|
[8d83180] | 84 | <span
|
---|
| 85 | style={{
|
---|
[c68150f] | 86 | fontWeight: "normal",
|
---|
[8d83180] | 87 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
| 88 | }}
|
---|
| 89 | >
|
---|
[c68150f] | 90 | <span
|
---|
| 91 | style={{
|
---|
| 92 | fontWeight: "bold",
|
---|
| 93 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
| 94 | }}
|
---|
| 95 | >
|
---|
| 96 | {totalPosts}
|
---|
| 97 | </span>{" "}
|
---|
| 98 | мислења
|
---|
| 99 | </span>
|
---|
| 100 | )
|
---|
| 101 | ) : (
|
---|
| 102 | <span style={{ fontWeight: "normal" }}>
|
---|
| 103 | <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
|
---|
| 104 | мислење
|
---|
[8d83180] | 105 | </span>
|
---|
[c68150f] | 106 | )}
|
---|
| 107 | </EntityParam>
|
---|
| 108 | </EntityLi>
|
---|
| 109 | );
|
---|
| 110 | })}
|
---|
[8d83180] | 111 | </EntityUl>
|
---|
| 112 | </SubjectsAccordionDiv>
|
---|
| 113 | </div>
|
---|
| 114 | );
|
---|
| 115 | };
|
---|
| 116 |
|
---|
| 117 | export default SubjectsAccordion;
|
---|