Classes display correctly, still need to work on lectures:
This commit is contained in:
parent
9a0ee68317
commit
457169fe0e
@ -77,28 +77,22 @@ interface CourseCardProps {
|
|||||||
export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
|
export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
const { addChoosenGroup, courses, choosenCourses } = useContext(coursesContext)!;
|
const { addGroup } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const choosenCoursesIds = choosenCourses.map(({ id }) => id);
|
console.log(`course`);
|
||||||
|
console.log(course);
|
||||||
const choosenCoursesWithGroups = courses.filter(({ id }) => choosenCoursesIds.includes(id));
|
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
|
||||||
|
|
||||||
const onGroupClick = (group: Group, id: number) => addChoosenGroup(group, id);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CourseStyled onClick={onCardClick} id={id}>
|
<CourseStyled onClick={onCardClick} id={id}>
|
||||||
<CourseNameStyled>{course.name}</CourseNameStyled>
|
<CourseNameStyled>{course.name}</CourseNameStyled>
|
||||||
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
|
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
|
||||||
{choosenCoursesWithGroups.map((course) => (
|
{course.groups.map((group, index) => (
|
||||||
<div key={id}>
|
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||||
{course.groups!.map((group, index) => (
|
<p>
|
||||||
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
{group.time} {group.room} <br></br> {group.lecturer}
|
||||||
<p>
|
</p>
|
||||||
{group.time} {group.room} <br></br> {group.lecturer}
|
</ClassGroupStyled>
|
||||||
</p>
|
|
||||||
</ClassGroupStyled>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<div onClick={onCardClick} id={id}>
|
<div onClick={onCardClick} id={id}>
|
||||||
|
@ -50,18 +50,18 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
|||||||
//courses - choosenCourses
|
//courses - choosenCourses
|
||||||
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
|
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
|
||||||
|
|
||||||
const { courses, choosenCourses, addToBasket } = useContext(coursesContext)!;
|
const { courses, basket, addToBasket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const filterCourses = (input: string) => {
|
const filterCourses = (input: string) => {
|
||||||
const choosenCoursesNames = choosenCourses.map(({ name }) => name.trim());
|
const choosenCoursesNames = basket.map(({ name }) => name.trim());
|
||||||
const filteredCourses = courses.filter(
|
const filteredCourses = courses.filter(
|
||||||
({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name),
|
({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name),
|
||||||
);
|
);
|
||||||
setFilteredCourses(filteredCourses);
|
setFilteredCourses(filteredCourses);
|
||||||
};
|
};
|
||||||
filterCourses(input);
|
filterCourses(input);
|
||||||
}, [input, open, choosenCourses]);
|
}, [input, open, basket]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (clearInput) {
|
if (clearInput) {
|
||||||
@ -83,7 +83,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
|||||||
const name = target.textContent;
|
const name = target.textContent;
|
||||||
|
|
||||||
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
|
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
|
||||||
const course: Basket = { name: name, id: parseInt(id), lecture: null, class: null };
|
const course: Basket = { name: name, id: parseInt(id), lecture: null, classes: null };
|
||||||
|
|
||||||
addToBasket(course);
|
addToBasket(course);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
|
@ -33,7 +33,14 @@ const RightbarTextStyled = styled.div`
|
|||||||
export const Rightbar = () => {
|
export const Rightbar = () => {
|
||||||
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
||||||
|
|
||||||
const { choosenCourses } = useContext(coursesContext)!;
|
const { courses, basket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
|
const getBasketGroups = () => {
|
||||||
|
const ids = basket.map(({ id }) => id);
|
||||||
|
return courses.filter(({ id }) => ids.includes(id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredCourses = getBasketGroups();
|
||||||
|
|
||||||
//działa clunky
|
//działa clunky
|
||||||
const onCardClick = (event: MouseEvent) => {
|
const onCardClick = (event: MouseEvent) => {
|
||||||
@ -48,7 +55,7 @@ export const Rightbar = () => {
|
|||||||
Hubert Wrzesiński<br></br>
|
Hubert Wrzesiński<br></br>
|
||||||
Semestr zimowy 2020/2021
|
Semestr zimowy 2020/2021
|
||||||
</RightbarTextStyled>
|
</RightbarTextStyled>
|
||||||
{choosenCourses.map((course, index) => (
|
{filteredCourses.map((course, index) => (
|
||||||
<CourseCard
|
<CourseCard
|
||||||
course={course}
|
course={course}
|
||||||
key={index}
|
key={index}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import { SchedulerRow } from './SchedulerRow';
|
import { SchedulerRow } from './SchedulerRow';
|
||||||
import { coursesContext } from '../contexts/CoursesProvider';
|
import { coursesContext } from '../contexts/CoursesProvider';
|
||||||
import { Group } from '../types';
|
import { Group, Basket } from '../types';
|
||||||
|
|
||||||
interface SchedulerEventsProps {
|
interface SchedulerEventsProps {
|
||||||
cellTop: number;
|
cellTop: number;
|
||||||
@ -9,7 +9,7 @@ interface SchedulerEventsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
|
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
|
||||||
const { choosenGroups } = useContext(coursesContext)!;
|
const { basket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
||||||
|
|
||||||
@ -26,8 +26,17 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function mapGroupTimeToEventRow(choosenGroups: Array<Group>) {
|
function mapGroupTimeToEventRow(basket: Array<Basket>) {
|
||||||
const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
|
const basketGroups = basket.map(({ classes, lecture }) => ({
|
||||||
|
...classes,
|
||||||
|
...lecture,
|
||||||
|
})) as Array<Group>;
|
||||||
|
|
||||||
|
console.log('passed basket');
|
||||||
|
console.log(basket);
|
||||||
|
console.log(`basketgroups`);
|
||||||
|
console.log(basketGroups);
|
||||||
|
const groupsMapped = basketGroups.map(({ id, day, lecturer, room, time }) => ({
|
||||||
id,
|
id,
|
||||||
day,
|
day,
|
||||||
lecturer,
|
lecturer,
|
||||||
@ -36,8 +45,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
|
|||||||
}));
|
}));
|
||||||
setChoosenGroupsMappedToEvents(groupsMapped);
|
setChoosenGroupsMappedToEvents(groupsMapped);
|
||||||
}
|
}
|
||||||
mapGroupTimeToEventRow(choosenGroups);
|
mapGroupTimeToEventRow(basket);
|
||||||
}, [choosenGroups]);
|
}, [basket]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -1,14 +1,12 @@
|
|||||||
import React, { useState, createContext, useEffect } from 'react';
|
import React, { useState, createContext, useEffect } from 'react';
|
||||||
import { Course, Group, Basket } from '../types';
|
import { Course, Group, Basket, GroupType } from '../types';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
interface CourseContext {
|
interface CourseContext {
|
||||||
courses: Array<Course>;
|
courses: Array<Course>;
|
||||||
choosenCourses: Array<Course>;
|
|
||||||
choosenGroups: Array<Group>;
|
|
||||||
basket: Array<Basket>;
|
basket: Array<Basket>;
|
||||||
addToBasket: (courses: Basket) => void;
|
addToBasket: (courses: Basket) => void;
|
||||||
addChoosenGroup: (group: Group, id: number) => void;
|
addGroup: (group: Group, id: number) => void;
|
||||||
}
|
}
|
||||||
export const coursesContext = createContext<CourseContext | null>(null);
|
export const coursesContext = createContext<CourseContext | null>(null);
|
||||||
|
|
||||||
@ -20,47 +18,28 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
//fetch courses with groups
|
//fetch courses with groups
|
||||||
const [courses, setCourses] = useState<Array<Course>>([]);
|
const [courses, setCourses] = useState<Array<Course>>([]);
|
||||||
const [basket, setBasket] = useState<Array<Basket>>([]);
|
const [basket, setBasket] = useState<Array<Basket>>([]);
|
||||||
//with groups
|
|
||||||
const [choosenCourses, setChoosenCourses] = useState<Array<Course>>([]);
|
|
||||||
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
|
|
||||||
|
|
||||||
const addToBasket = (course: Basket) => setBasket([...basket, course]);
|
const addToBasket = (course: Basket) => setBasket([...basket, course]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log('BASKET');
|
||||||
console.log(basket);
|
console.log(basket);
|
||||||
}, [basket]);
|
}, [basket]);
|
||||||
|
|
||||||
const addChoosenGroup = (choosenGroup: Group, id: number) => {
|
//immutability
|
||||||
//move to utilities
|
|
||||||
//change type to group type from api
|
|
||||||
function hasChoosenGroupType(type: string) {
|
|
||||||
const res = choosenCourse.groups!.find((group) => group.type === type);
|
|
||||||
console.log(`res is: ${JSON.stringify(res)}`);
|
|
||||||
return !!res;
|
|
||||||
}
|
|
||||||
|
|
||||||
const choosenCourse = choosenCourses.find((cc) => cc.id === id)!;
|
|
||||||
|
|
||||||
|
const addGroup = (choosenGroup: Group, id: number) => {
|
||||||
|
const basketCourse = basket.filter((course) => course.id === id)[0];
|
||||||
const type = choosenGroup.type;
|
const type = choosenGroup.type;
|
||||||
console.log(`group type is: ${type}`);
|
if (type === GroupType.CLASS) {
|
||||||
if (hasChoosenGroupType(type)) {
|
setBasket(
|
||||||
const group = choosenCourse.groups!.find((group) => group.type === type);
|
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)),
|
||||||
console.log(`group is: ${JSON.stringify(group)}`);
|
);
|
||||||
console.log(choosenCourse.groups);
|
} else if (type === GroupType.LECTURE) {
|
||||||
if (group) {
|
setBasket(
|
||||||
group.type = type;
|
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup } : basket)),
|
||||||
}
|
);
|
||||||
setChoosenGroups([...choosenGroups, choosenGroup]);
|
|
||||||
} else {
|
|
||||||
console.log('pierwsza grupa/wykłąd');
|
|
||||||
//może być złe
|
|
||||||
choosenCourse.groups!.push(choosenGroup);
|
|
||||||
// setChoosenCourses(course => course.id === choosenCourse.id)
|
|
||||||
setChoosenGroups([...choosenGroups, choosenGroup]);
|
|
||||||
}
|
}
|
||||||
console.log(`choosen courses after changing group: ${JSON.stringify(choosenCourses)}`);
|
|
||||||
|
|
||||||
console.log(choosenCourse);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -79,8 +58,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<coursesContext.Provider value={{ courses, choosenGroups, choosenCourses, basket, addToBasket, addChoosenGroup }}>
|
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider>
|
||||||
{children}
|
|
||||||
</coursesContext.Provider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
export enum Types {
|
export enum Types {
|
||||||
addToBasket = 'ADD_CHOOSEN_COURSE',
|
addToBasket = 'ADD_CHOOSEN_COURSE',
|
||||||
removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE',
|
removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE',
|
||||||
addChoosenGroup = 'ADD_CHOOSEN_GROUP',
|
addGroup = 'ADD_CHOOSEN_GROUP',
|
||||||
removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP',
|
removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP',
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ export enum Types {
|
|||||||
|
|
||||||
// export const choosenGroupsReducer = (state, action) => {
|
// export const choosenGroupsReducer = (state, action) => {
|
||||||
// switch (action.type) {
|
// switch (action.type) {
|
||||||
// case Types.addChoosenGroup:
|
// case Types.addGroup:
|
||||||
// return add;
|
// return add;
|
||||||
// }
|
// }
|
||||||
// };
|
// };
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
const COURSE = 'course';
|
export enum GroupType {
|
||||||
const CLASS = 'class';
|
LECTURE = 'LECTURE',
|
||||||
|
CLASS = 'CLASS',
|
||||||
export type GroupType = typeof COURSE | typeof CLASS;
|
}
|
||||||
|
|
||||||
export interface Basket {
|
export interface Basket {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
lecture: Group | null;
|
lecture: Group | null;
|
||||||
class: Group | null;
|
classes: Group | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Group {
|
export interface Group {
|
||||||
|
Loading…
Reference in New Issue
Block a user