From 457169fe0ee65162bc0756a4bc562fd638972ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 23 Aug 2020 17:22:50 +0200 Subject: [PATCH] Classes display correctly, still need to work on lectures: --- src/components/CourseCard.tsx | 26 ++++++--------- src/components/Dropdown.tsx | 8 ++--- src/components/Rightbar.tsx | 11 +++++-- src/components/SchedulerEvents.tsx | 21 ++++++++---- src/contexts/CoursesProvider.tsx | 53 +++++++++--------------------- src/contexts/reducers.ts | 4 +-- src/types/index.ts | 10 +++--- 7 files changed, 60 insertions(+), 73 deletions(-) diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 0458292..4995caf 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -77,28 +77,22 @@ interface CourseCardProps { export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => { const classes = useStyles(); - const { addChoosenGroup, courses, choosenCourses } = useContext(coursesContext)!; + const { addGroup } = useContext(coursesContext)!; - const choosenCoursesIds = choosenCourses.map(({ id }) => id); - - const choosenCoursesWithGroups = courses.filter(({ id }) => choosenCoursesIds.includes(id)); - - const onGroupClick = (group: Group, id: number) => addChoosenGroup(group, id); + console.log(`course`); + console.log(course); + const onGroupClick = (group: Group, id: number) => addGroup(group, id); return ( {course.name} - {choosenCoursesWithGroups.map((course) => ( -
- {course.groups!.map((group, index) => ( - onGroupClick(group, course.id)}> -

- {group.time} {group.room}

{group.lecturer} -

- - ))} -
+ {course.groups.map((group, index) => ( + onGroupClick(group, course.id)}> +

+ {group.time} {group.room}

{group.lecturer} +

+ ))}
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 76d41b6..f77da72 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -50,18 +50,18 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { //courses - choosenCourses const [filteredCourses, setFilteredCourses] = useState>([]); - const { courses, choosenCourses, addToBasket } = useContext(coursesContext)!; + const { courses, basket, addToBasket } = useContext(coursesContext)!; useEffect(() => { const filterCourses = (input: string) => { - const choosenCoursesNames = choosenCourses.map(({ name }) => name.trim()); + const choosenCoursesNames = basket.map(({ name }) => name.trim()); const filteredCourses = courses.filter( ({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name), ); setFilteredCourses(filteredCourses); }; filterCourses(input); - }, [input, open, choosenCourses]); + }, [input, open, basket]); useEffect(() => { if (clearInput) { @@ -83,7 +83,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { const name = target.textContent; //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); setOpen(false); diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index a39fee6..5262df5 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -33,7 +33,14 @@ const RightbarTextStyled = styled.div` export const Rightbar = () => { const [selectedCardId, setSelectedCardId] = useState(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 const onCardClick = (event: MouseEvent) => { @@ -48,7 +55,7 @@ export const Rightbar = () => { Hubert Wrzesiński

Semestr zimowy 2020/2021 - {choosenCourses.map((course, index) => ( + {filteredCourses.map((course, index) => ( { - const { choosenGroups } = useContext(coursesContext)!; + const { basket } = useContext(coursesContext)!; const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState([]); @@ -26,8 +26,17 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => }; useEffect(() => { - function mapGroupTimeToEventRow(choosenGroups: Array) { - const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({ + function mapGroupTimeToEventRow(basket: Array) { + const basketGroups = basket.map(({ classes, lecture }) => ({ + ...classes, + ...lecture, + })) as Array; + + console.log('passed basket'); + console.log(basket); + console.log(`basketgroups`); + console.log(basketGroups); + const groupsMapped = basketGroups.map(({ id, day, lecturer, room, time }) => ({ id, day, lecturer, @@ -36,8 +45,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => })); setChoosenGroupsMappedToEvents(groupsMapped); } - mapGroupTimeToEventRow(choosenGroups); - }, [choosenGroups]); + mapGroupTimeToEventRow(basket); + }, [basket]); return (
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index a9c591c..7b49128 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -1,14 +1,12 @@ import React, { useState, createContext, useEffect } from 'react'; -import { Course, Group, Basket } from '../types'; +import { Course, Group, Basket, GroupType } from '../types'; import axios from 'axios'; interface CourseContext { courses: Array; - choosenCourses: Array; - choosenGroups: Array; basket: Array; addToBasket: (courses: Basket) => void; - addChoosenGroup: (group: Group, id: number) => void; + addGroup: (group: Group, id: number) => void; } export const coursesContext = createContext(null); @@ -20,47 +18,28 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { //fetch courses with groups const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); - //with groups - const [choosenCourses, setChoosenCourses] = useState>([]); - const [choosenGroups, setChoosenGroups] = useState>([]); const addToBasket = (course: Basket) => setBasket([...basket, course]); useEffect(() => { + console.log('BASKET'); console.log(basket); }, [basket]); - const addChoosenGroup = (choosenGroup: Group, id: number) => { - //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)!; + //immutability + const addGroup = (choosenGroup: Group, id: number) => { + const basketCourse = basket.filter((course) => course.id === id)[0]; const type = choosenGroup.type; - console.log(`group type is: ${type}`); - if (hasChoosenGroupType(type)) { - const group = choosenCourse.groups!.find((group) => group.type === type); - console.log(`group is: ${JSON.stringify(group)}`); - console.log(choosenCourse.groups); - if (group) { - group.type = type; - } - 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]); + if (type === GroupType.CLASS) { + setBasket( + basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)), + ); + } else if (type === GroupType.LECTURE) { + setBasket( + basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup } : basket)), + ); } - console.log(`choosen courses after changing group: ${JSON.stringify(choosenCourses)}`); - - console.log(choosenCourse); }; useEffect(() => { @@ -79,8 +58,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { }, []); return ( - - {children} - + {children} ); }; diff --git a/src/contexts/reducers.ts b/src/contexts/reducers.ts index 14a0316..90bf96a 100644 --- a/src/contexts/reducers.ts +++ b/src/contexts/reducers.ts @@ -3,7 +3,7 @@ export enum Types { addToBasket = 'ADD_CHOOSEN_COURSE', removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE', - addChoosenGroup = 'ADD_CHOOSEN_GROUP', + addGroup = 'ADD_CHOOSEN_GROUP', removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP', } @@ -21,7 +21,7 @@ export enum Types { // export const choosenGroupsReducer = (state, action) => { // switch (action.type) { -// case Types.addChoosenGroup: +// case Types.addGroup: // return add; // } // }; diff --git a/src/types/index.ts b/src/types/index.ts index 9846d9d..cdec17f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,13 +1,13 @@ -const COURSE = 'course'; -const CLASS = 'class'; - -export type GroupType = typeof COURSE | typeof CLASS; +export enum GroupType { + LECTURE = 'LECTURE', + CLASS = 'CLASS', +} export interface Basket { id: number; name: string; lecture: Group | null; - class: Group | null; + classes: Group | null; } export interface Group {