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";
|
---|
8 | import JSOG from "jsog";
|
---|
9 |
|
---|
10 | const SubjectsAccordion = (props) => {
|
---|
11 | const [height, setHeight] = useState("0");
|
---|
12 | const [opacity, setOpacity] = useState(0);
|
---|
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);
|
---|
20 | const handleClick = () => {
|
---|
21 | if (height === "0") {
|
---|
22 | setHeight("auto");
|
---|
23 | setOpacity(1);
|
---|
24 | try {
|
---|
25 | Promise.all([fetch(`http://192.168.1.254:8080/public/subjects?studyProgrammeId=${props.title.studyProgrammeId}`),
|
---|
26 | fetch(`http://192.168.1.254:8080/public/study_programme/${props.title.studyProgrammeId}/threadCountForEachSubject`)])
|
---|
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 | }
|
---|
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>
|
---|
58 | {loadedSubjects &&
|
---|
59 | subjects.map((item, idx) => {
|
---|
60 | let totalPosts = parseInt(counts[idx].split(",")[1]);
|
---|
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 ? (
|
---|
67 | <span
|
---|
68 | style={{
|
---|
69 | fontWeight: "normal",
|
---|
70 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
71 | }}
|
---|
72 | >
|
---|
73 | <span
|
---|
74 | style={{
|
---|
75 | fontWeight: "bold",
|
---|
76 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
77 | }}
|
---|
78 | >
|
---|
79 | {totalPosts}
|
---|
80 | </span>{" "}
|
---|
81 | мислења
|
---|
82 | </span>
|
---|
83 | ) : (
|
---|
84 | <span
|
---|
85 | style={{
|
---|
86 | fontWeight: "normal",
|
---|
87 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
88 | }}
|
---|
89 | >
|
---|
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 | мислење
|
---|
105 | </span>
|
---|
106 | )}
|
---|
107 | </EntityParam>
|
---|
108 | </EntityLi>
|
---|
109 | );
|
---|
110 | })}
|
---|
111 | </EntityUl>
|
---|
112 | </SubjectsAccordionDiv>
|
---|
113 | </div>
|
---|
114 | );
|
---|
115 | };
|
---|
116 |
|
---|
117 | export default SubjectsAccordion;
|
---|