Added splitting groups into lectures and classes

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

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}

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>`
@ -43,7 +43,7 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
cursor: pointer;
}
outline-offset: -5px;
outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
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,7 +101,9 @@ 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) => (
{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}

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);
}

View File

@ -5,7 +5,7 @@ import axios from 'axios';
interface CourseContext {
courses: Array<Course>;
basket: Array<Basket>;
addToBasket: (courses: Basket) => void;
addToBasket: (courses: Course) => void;
addGroup: (group: Group, id: number) => void;
deleteFromBasket: (id: number) => void;
}
@ -20,10 +20,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const [courses, setCourses] = useState<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]);
const addToBasket = (course: Basket) => setBasket([...basket, course]);
const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
const addToBasket = (course: Course) => {
const courseToBasket = {
name: course.name,
id: course.id,
classes: course.classes[0],
lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
} as Basket;
setBasket([...basket, courseToBasket]);
};
const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
useEffect(() => {
console.log('BASKET');
@ -48,14 +55,27 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
useEffect(() => {
const fetchData = async () => {
const { data: courses } = await axios.get(`${process.env.REACT_APP_API_URL}/getCoursesWithGroups`);
const { data } = await axios.get<Array<{ id: string; name: string; groups: Array<Group> }>>(
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
);
const courses = data.map(({ id, name, groups }) => ({
id: parseInt(id),
name,
lectures: groups.filter(({ type }) => type === GroupType.LECTURE),
classes: groups.filter(({ type }) => type === GroupType.CLASS),
})) as Array<Course>;
console.log('courses mapped');
console.log(courses);
courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1));
setCourses(courses);
};
fetchData();
}, []);
return (
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>
{children}
</coursesContext.Provider>
);
};

View File

@ -7,7 +7,7 @@ export interface Basket {
id: number;
name: string;
lecture?: Group;
classes?: Group;
classes: Group;
}
export interface Group {
@ -23,7 +23,8 @@ export interface Group {
export interface Course {
id: number;
name: string;
groups: Array<Group>;
lectures?: Array<Group>;
classes: Array<Group>;
}
export interface User {