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 |
|
---|
9 | const SubjectsAccordion = (props) => {
|
---|
10 | const [height, setHeight] = useState("0");
|
---|
11 | const [opacity, setOpacity] = useState(0);
|
---|
12 | const handleClick = () => {
|
---|
13 | if (height === "0") {
|
---|
14 | setHeight("auto");
|
---|
15 | setOpacity(1);
|
---|
16 | } else {
|
---|
17 | setHeight("0");
|
---|
18 | setOpacity(0);
|
---|
19 | }
|
---|
20 | };
|
---|
21 | return (
|
---|
22 | <div onClick={() => handleClick()}>
|
---|
23 | <AccordionTitle>
|
---|
24 | {props.title.studyProgrammeName} ({props.title.cycle}. циклус)
|
---|
25 | <OpenAccordionSymbol>▾</OpenAccordionSymbol>
|
---|
26 | </AccordionTitle>
|
---|
27 | <SubjectsAccordionDiv height={height} opacity={opacity}>
|
---|
28 | <EntityUl>
|
---|
29 | {props.content &&
|
---|
30 | props.content.map((item) => {
|
---|
31 | let totalPosts = item.threads.length;
|
---|
32 | return (
|
---|
33 | <EntityLi key={item.subjectName} bgcolor="cornsilk">
|
---|
34 | <a href={"/subject/" + item.subjectId}>{item.subjectName}</a>
|
---|
35 | <EntityParam right="30px">
|
---|
36 | {totalPosts !== 1 ? (
|
---|
37 | totalPosts !== 0 ? (
|
---|
38 | <span
|
---|
39 | style={{
|
---|
40 | fontWeight: "normal",
|
---|
41 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
42 | }}
|
---|
43 | >
|
---|
44 | <span
|
---|
45 | style={{
|
---|
46 | fontWeight: "bold",
|
---|
47 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
48 | }}
|
---|
49 | >
|
---|
50 | {totalPosts}
|
---|
51 | </span>{" "}
|
---|
52 | мислења
|
---|
53 | </span>
|
---|
54 | ) : (
|
---|
55 | <span
|
---|
56 | style={{
|
---|
57 | fontWeight: "normal",
|
---|
58 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
59 | }}
|
---|
60 | >
|
---|
61 | <span
|
---|
62 | style={{
|
---|
63 | fontWeight: "bold",
|
---|
64 | opacity: totalPosts === 0 ? "0.5" : "1",
|
---|
65 | }}
|
---|
66 | >
|
---|
67 | {totalPosts}
|
---|
68 | </span>{" "}
|
---|
69 | мислења
|
---|
70 | </span>
|
---|
71 | )
|
---|
72 | ) : (
|
---|
73 | <span style={{ fontWeight: "normal" }}>
|
---|
74 | <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
|
---|
75 | мислење
|
---|
76 | </span>
|
---|
77 | )}
|
---|
78 | </EntityParam>
|
---|
79 | </EntityLi>
|
---|
80 | );
|
---|
81 | })}
|
---|
82 | </EntityUl>
|
---|
83 | </SubjectsAccordionDiv>
|
---|
84 | </div>
|
---|
85 | );
|
---|
86 | };
|
---|
87 |
|
---|
88 | export default SubjectsAccordion;
|
---|