click na grupe niezwija karty przedmiotu

This commit is contained in:
wrzesinski-hubert 2020-08-31 18:10:36 +02:00
parent 1e9e336ee9
commit d75530887e
2 changed files with 7 additions and 19 deletions

View File

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

View File

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