2020-08-12 04:13:14 +02:00
|
|
|
import React, { useContext } from 'react';
|
|
|
|
import './index.scss';
|
|
|
|
import Collapse from '@material-ui/core/Collapse';
|
|
|
|
import ExpandIcon from './expand.png';
|
|
|
|
import { Lecture, Group } from '../../../types/index';
|
|
|
|
import { LecturesContext } from '../../../contexts/LecturesProvider';
|
2020-06-17 19:53:30 +02:00
|
|
|
|
|
|
|
interface LectureCardProps {
|
2020-07-01 00:59:19 +02:00
|
|
|
onGroupMouseOver: (id: string, name: string) => void;
|
|
|
|
onCardClick: (e: React.MouseEvent) => void;
|
|
|
|
lecture: Lecture;
|
|
|
|
id: string;
|
|
|
|
isSelected: boolean;
|
2020-06-17 19:53:30 +02:00
|
|
|
}
|
|
|
|
|
2020-08-12 04:13:14 +02:00
|
|
|
export default function LectureCard({ onGroupMouseOver, onCardClick, lecture, id, isSelected }: LectureCardProps) {
|
|
|
|
const { addGroup } = useContext(LecturesContext)!;
|
2020-07-30 18:06:27 +02:00
|
|
|
|
2020-08-12 04:13:14 +02:00
|
|
|
function onGroupClick(group: Group) {
|
|
|
|
addGroup(group);
|
2020-07-30 18:06:27 +02:00
|
|
|
}
|
|
|
|
|
2020-07-01 00:59:19 +02:00
|
|
|
return (
|
|
|
|
<div className="class" onClick={onCardClick} id={id}>
|
|
|
|
<div className="class__name">{lecture.name}</div>
|
2020-08-12 04:13:14 +02:00
|
|
|
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
|
2020-07-01 00:59:19 +02:00
|
|
|
{lecture.groups.map((group, index) => (
|
|
|
|
<div
|
|
|
|
className="class__group"
|
|
|
|
key={index}
|
|
|
|
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
|
2020-07-30 18:06:27 +02:00
|
|
|
onClick={() => onGroupClick(group)}
|
2020-07-01 00:59:19 +02:00
|
|
|
>
|
|
|
|
<p>
|
|
|
|
{group.time} {group.room} <br></br> {group.lecturer}
|
2020-08-12 04:13:14 +02:00
|
|
|
</p>{' '}
|
2020-07-01 00:59:19 +02:00
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</Collapse>
|
|
|
|
<div onClick={onCardClick} id={id}>
|
2020-08-12 04:13:14 +02:00
|
|
|
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
|
2020-07-01 00:59:19 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2020-06-17 19:53:30 +02:00
|
|
|
}
|