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; padding-bottom: 10px;
`; `;
interface ClassGroupProps{ interface ClassGroupProps {
groupType:GroupType; groupType: GroupType;
} }
const ClassGroupStyled = styled.div<ClassGroupProps>` const ClassGroupStyled = styled.div<ClassGroupProps>`
@ -42,8 +42,8 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
:hover { :hover {
cursor: pointer; cursor: pointer;
} }
outline-offset: -5px; 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>` const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@ -89,10 +89,10 @@ interface CourseCardProps {
} }
export const CourseCard = ({ course }: CourseCardProps) => { export const CourseCard = ({ course }: CourseCardProps) => {
const [isSelected, setSelected] = useState(false);
const classes = useStyles(); const classes = useStyles();
const { addGroup, deleteFromBasket } = useContext(coursesContext)!; 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); const onGroupClick = (group: Group, id: number) => addGroup(group, id);
@ -101,13 +101,15 @@ export const CourseCard = ({ course }: CourseCardProps) => {
<DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon> <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{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.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => ( {groups
<ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}> .sort((a, b) => b.type.localeCompare(a.type))
<p> .map((group, index) => (
{group.time} {group.room} <br></br> {group.lecturer} <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
</p> <p>
</ClassGroupStyled> {group.time} {group.room} <br></br> {group.lecturer}
))} </p>
</ClassGroupStyled>
))}
</Collapse> </Collapse>
<div onClick={() => setSelected(!isSelected)}> <div onClick={() => setSelected(!isSelected)}>
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} /> <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />

View File

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

View File

@ -5,7 +5,7 @@ import axios from 'axios';
interface CourseContext { interface CourseContext {
courses: Array<Course>; courses: Array<Course>;
basket: Array<Basket>; basket: Array<Basket>;
addToBasket: (courses: Basket) => void; addToBasket: (courses: Course) => void;
addGroup: (group: Group, id: number) => void; addGroup: (group: Group, id: number) => void;
deleteFromBasket: (id: number) => void; deleteFromBasket: (id: number) => void;
} }
@ -20,10 +20,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const [courses, setCourses] = useState<Array<Course>>([]); const [courses, setCourses] = useState<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]); const [basket, setBasket] = useState<Array<Basket>>([]);
const addToBasket = (course: Basket) => setBasket([...basket, course]); const addToBasket = (course: Course) => {
const courseToBasket = {
const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id)); 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(() => { useEffect(() => {
console.log('BASKET'); console.log('BASKET');
@ -48,14 +55,27 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
useEffect(() => { useEffect(() => {
const fetchData = async () => { 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)); courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1));
setCourses(courses); setCourses(courses);
}; };
fetchData(); fetchData();
}, []); }, []);
return ( 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; id: number;
name: string; name: string;
lecture?: Group; lecture?: Group;
classes?: Group; classes: Group;
} }
export interface Group { export interface Group {
@ -23,7 +23,8 @@ export interface Group {
export interface Course { export interface Course {
id: number; id: number;
name: string; name: string;
groups: Array<Group>; lectures?: Array<Group>;
classes: Array<Group>;
} }
export interface User { export interface User {