click na grupe niezwija karty przedmiotu
This commit is contained in:
parent
1e9e336ee9
commit
d75530887e
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user