y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added splitting groups into lectures and classes

Browse Source
This commit is contained in:
Maciek Głowacki
2020-10-01 19:51:06 +02:00
parent 8b812dcbed
commit d6aa58fd34
5 changed files with 70 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/CourseCard.tsx
View File

@ -32,8 +32,8 @@ const CourseNameStyled = styled.div`
padding-bottom: 10px;
`;
interface ClassGroupProps{
groupType:GroupType;
interface ClassGroupProps {
groupType: GroupType;
}
const ClassGroupStyled = styled.div<ClassGroupProps>`
@ -42,8 +42,8 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
:hover {
cursor: pointer;
}
outline-offset: -5px;
outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
outline-offset: -5px;
outline: ${({ groupType }) => (groupType === 'CLASS' ? '2px solid #5642AA' : '2px solid #866DF7')};
`;
const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@ -89,10 +89,10 @@ interface CourseCardProps {
}
export const CourseCard = ({ course }: CourseCardProps) => {
const [isSelected, setSelected] = useState(false);
const classes = useStyles();
const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
const [isSelected, setSelected] = useState(false);
const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes];
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
@ -101,13 +101,15 @@ export const CourseCard = ({ course }: CourseCardProps) => {
<DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
<ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>
</ClassGroupStyled>
))}
{groups
.sort((a, b) => b.type.localeCompare(a.type))
.map((group, index) => (
<ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>
</ClassGroupStyled>
))}
</Collapse>
<div onClick={() => setSelected(!isSelected)}>
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />

25
src/components/Dropdown.tsx
View File

@ -7,6 +7,13 @@ import { Course, Basket } from '../types';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
const DropdownStyled = styled.div`
max-height: 420px;
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
`;
const CourseStyled = styled.div`
position: relative;
z-index: 10;
@ -15,20 +22,13 @@ const CourseStyled = styled.div`
background-color: #e6c759;
font-size: 18px;
font-family: Lato;
scroll-snap-align: end;
:hover {
background-color: #d4b851;
cursor: pointer;
}
`;
const DropdownStyled = styled.div`
max-height: 400px;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
`;
const useStyles = makeStyles({
topbarInput: {
marginTop: '8px',
@ -76,12 +76,9 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
const onCourseClick = async (event: MouseEvent) => {
const target = event.currentTarget;
if (target.id && target.textContent) {
const id = target.id;
const name = target.textContent;
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
const course: Basket = { name: name.trim(), id: parseInt(id) };
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
console.log('added course is');
console.log(course);
addToBasket(course);
setOpen(false);
}