Classes display correctly, still need to work on lectures:

This commit is contained in:
Maciek Głowacki 2020-08-23 17:22:50 +02:00
parent 9a0ee68317
commit 457169fe0e
7 changed files with 60 additions and 73 deletions

View File

@ -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}>

View File

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

View File

@ -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}

View File

@ -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>

View File

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

View File

@ -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;
// } // }
// }; // };

View File

@ -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 {