frontend/src/components/RightBar/index.tsx

40 lines
1.2 KiB
TypeScript
Raw Normal View History

2020-08-12 04:13:14 +02:00
import React, { useState, useContext } from 'react';
import './index.scss';
2020-08-12 20:52:53 +02:00
import { Course } from '../../types';
import { CourseCard } from './CourseCard/index';
import { coursesContext } from '../../contexts/CoursesProvider';
2020-06-09 20:07:54 +02:00
2020-06-14 14:24:49 +02:00
interface RightBarProps {
2020-08-12 20:52:53 +02:00
onGroupMouseOver: (id: number, name: string) => void;
2020-06-14 14:24:49 +02:00
}
2020-06-07 15:57:51 +02:00
2020-08-12 04:13:14 +02:00
export default function RightBar({ onGroupMouseOver }: RightBarProps) {
2020-07-24 18:59:45 +02:00
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
2020-06-07 15:57:51 +02:00
2020-08-12 20:52:53 +02:00
const { courses } = useContext(coursesContext)!;
2020-06-30 22:09:13 +02:00
2020-07-24 18:59:45 +02:00
const onCardClick = (e: React.MouseEvent) => {
const target = e.currentTarget as HTMLElement;
2020-08-12 04:13:14 +02:00
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
2020-07-24 18:59:45 +02:00
};
2020-06-30 22:09:13 +02:00
2020-07-24 18:59:45 +02:00
return (
<div className="right-bar">
<div className="right-bar__text">
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</div>
2020-08-12 20:52:53 +02:00
{courses.map((course, index) => (
<CourseCard
course={course}
2020-07-24 18:59:45 +02:00
key={index}
id={index.toString()}
onGroupMouseOver={onGroupMouseOver}
onCardClick={onCardClick}
isSelected={selectedCardId === index.toString()}
/>
))}
</div>
);
2020-06-07 15:57:51 +02:00
}