click na grupe niezwija karty przedmiotu

src/components/CourseCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, MouseEvent } from 'react';
+import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from '../assets/expand.png';
 import { Course, Group } from '../types/index';
@@ -68,13 +68,12 @@ const useStyles = makeStyles({
 });
 
 interface CourseCardProps {
-  onCardClick: (event: MouseEvent) => void;
   course: Course;
-  id: string;
-  isSelected: boolean;
 }
 
-export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
+export const CourseCard = ({course }: CourseCardProps) => {
+  
+  const [isSelected, setSelected] = useState(false);
   const classes = useStyles();
 
   const { addGroup } = useContext(coursesContext)!;
@@ -82,8 +81,8 @@ export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardPr
   const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
   return (
-    <CourseStyled onClick={onCardClick} id={id}>
+    <CourseStyled>
-      <CourseNameStyled>{course.name}</CourseNameStyled>
+      <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {course.groups.map((group, index) => (
           <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
@@ -93,7 +92,7 @@ export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardPr
           </ClassGroupStyled>
         ))}
       </Collapse>
-      <div onClick={onCardClick} id={id}>
+      <div onClick={() => setSelected(!isSelected)}>
         <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
       </div>
     </CourseStyled>

src/components/Rightbar.tsx

@@ -31,8 +31,6 @@ const RightbarTextStyled = styled.div`
 `;
 
 export const Rightbar = () => {
-  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
-
   const { courses, basket } = useContext(coursesContext)!;
 
   const getBasketGroups = () => {
@@ -42,12 +40,6 @@ export const Rightbar = () => {
 
   const filteredCourses = getBasketGroups();
 
-  //działa clunky
-  const onCardClick = (event: MouseEvent) => {
-    const target = event.currentTarget;
-    selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
-  };
-
   //need to insert student name from db and course maybe based on current time or from db too
   return (
     <RightbarStyled>
@@ -59,9 +51,6 @@ export const Rightbar = () => {
         <CourseCard
           course={course}
           key={index}
-          id={index.toString()}
-          onCardClick={onCardClick}
-          isSelected={selectedCardId === index.toString()}
         />
       ))}
     </RightbarStyled>