2020-06-17 19:53:30 +02:00
|
|
|
import React, { useState } from "react";
|
2020-06-07 15:57:51 +02:00
|
|
|
import "./index.scss";
|
2020-06-17 19:53:30 +02:00
|
|
|
import { Lecture } from "../../lectures";
|
|
|
|
import LectureCard from "./LectureCard";
|
2020-06-09 20:07:54 +02:00
|
|
|
|
2020-06-14 14:24:49 +02:00
|
|
|
interface RightBarProps {
|
2020-06-17 19:53:30 +02:00
|
|
|
onGroupMouseOver: (id: string, name: string) => void;
|
|
|
|
onGroupClick: (id: string, name: string) => void;
|
|
|
|
lectures: Array<Lecture>;
|
2020-06-14 14:24:49 +02:00
|
|
|
}
|
2020-06-07 15:57:51 +02:00
|
|
|
|
2020-06-17 19:53:30 +02:00
|
|
|
export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) {
|
|
|
|
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
2020-06-07 15:57:51 +02:00
|
|
|
|
2020-06-17 19:53:30 +02:00
|
|
|
const onCardClick = (e: React.MouseEvent) => {
|
|
|
|
const target = e.target as HTMLElement;
|
|
|
|
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="right-bar">
|
|
|
|
<div className="right-bar__text">
|
|
|
|
Hubert Wrzesiński<br></br>
|
|
|
|
Semestr zimowy 2020/2021
|
|
|
|
</div>
|
|
|
|
{lectures.map((lecture, index) => (
|
|
|
|
<LectureCard
|
|
|
|
lecture={lecture}
|
|
|
|
key={index}
|
|
|
|
id={index.toString()}
|
|
|
|
onGroupMouseOver={onGroupMouseOver}
|
|
|
|
onGroupClick={onGroupClick}
|
|
|
|
onCardClick={onCardClick}
|
|
|
|
isSelected={selectedCardId === index.toString()}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
2020-06-07 15:57:51 +02:00
|
|
|
}
|