From 3fba8a4a236633e3edfad97983e34586e5368b9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Wed, 12 Aug 2020 20:52:53 +0200 Subject: [PATCH] Refactor again --- .../{LectureCard => CourseCard}/expand.png | Bin .../{LectureCard => CourseCard}/index.scss | 0 src/components/RightBar/CourseCard/index.tsx | 50 ++++++++++ src/components/RightBar/LectureCard/index.tsx | 45 --------- src/components/RightBar/index.tsx | 16 +-- .../Scheduler/SchedulerEvents/index.tsx | 12 +-- .../Scheduler/SchedulerRow/index.tsx | 2 +- src/components/TopBar/Results/index.scss | 5 +- src/components/TopBar/Results/index.tsx | 94 +++++++++--------- src/contexts/CoursesProvider.tsx | 32 ++++++ src/contexts/LecturesProvider.tsx | 32 ------ src/contexts/reducers.ts | 8 +- src/index.tsx | 6 +- src/types/index.ts | 18 +++- 14 files changed, 163 insertions(+), 157 deletions(-) rename src/components/RightBar/{LectureCard => CourseCard}/expand.png (100%) rename src/components/RightBar/{LectureCard => CourseCard}/index.scss (100%) create mode 100644 src/components/RightBar/CourseCard/index.tsx delete mode 100644 src/components/RightBar/LectureCard/index.tsx create mode 100644 src/contexts/CoursesProvider.tsx delete mode 100644 src/contexts/LecturesProvider.tsx diff --git a/src/components/RightBar/LectureCard/expand.png b/src/components/RightBar/CourseCard/expand.png similarity index 100% rename from src/components/RightBar/LectureCard/expand.png rename to src/components/RightBar/CourseCard/expand.png diff --git a/src/components/RightBar/LectureCard/index.scss b/src/components/RightBar/CourseCard/index.scss similarity index 100% rename from src/components/RightBar/LectureCard/index.scss rename to src/components/RightBar/CourseCard/index.scss diff --git a/src/components/RightBar/CourseCard/index.tsx b/src/components/RightBar/CourseCard/index.tsx new file mode 100644 index 0000000..e2ca19c --- /dev/null +++ b/src/components/RightBar/CourseCard/index.tsx @@ -0,0 +1,50 @@ +import React, { useContext } from 'react'; +import './index.scss'; +import Collapse from '@material-ui/core/Collapse'; +import ExpandIcon from './expand.png'; +import { Course, Group } from '../../../types/index'; +import { coursesContext } from '../../../contexts/CoursesProvider'; +import { group } from 'console'; + +interface CourseCardProps { + onGroupMouseOver: (id: number, name: string) => void; + onCardClick: (e: React.MouseEvent) => void; + course: Course; + id: string; + isSelected: boolean; +} + +export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) { + const { addGroup, courses } = useContext(coursesContext)!; + + function onGroupClick(group: Group) { + addGroup(group); + } + + return ( +
+
{course.name}
+ + {courses.map((course, index) => ( + <> + {course.groups.map((group, index) => ( +
onGroupMouseOver(group.id, course.name)} + onClick={() => onGroupClick(group)} + > +

+ {group.time} {group.room}

{group.lecturer} +

{' '} +
+ ))} + + ))} + +
+ expand +
+
+ ); +} diff --git a/src/components/RightBar/LectureCard/index.tsx b/src/components/RightBar/LectureCard/index.tsx deleted file mode 100644 index 54a90d2..0000000 --- a/src/components/RightBar/LectureCard/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { useContext } from 'react'; -import './index.scss'; -import Collapse from '@material-ui/core/Collapse'; -import ExpandIcon from './expand.png'; -import { Lecture, Group } from '../../../types/index'; -import { LecturesContext } from '../../../contexts/LecturesProvider'; - -interface LectureCardProps { - onGroupMouseOver: (id: string, name: string) => void; - onCardClick: (e: React.MouseEvent) => void; - lecture: Lecture; - id: string; - isSelected: boolean; -} - -export default function LectureCard({ onGroupMouseOver, onCardClick, lecture, id, isSelected }: LectureCardProps) { - const { addGroup } = useContext(LecturesContext)!; - - function onGroupClick(group: Group) { - addGroup(group); - } - - return ( -
-
{lecture.name}
- - {lecture.groups.map((group, index) => ( -
onGroupMouseOver(group.id, lecture.name)} - onClick={() => onGroupClick(group)} - > -

- {group.time} {group.room}

{group.lecturer} -

{' '} -
- ))} - -
- expand -
-
- ); -} diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index ecef611..ebcf2e6 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -1,17 +1,17 @@ import React, { useState, useContext } from 'react'; import './index.scss'; -import { Lecture } from '../../types'; -import LectureCard from './LectureCard'; -import { LecturesContext } from '../../contexts/LecturesProvider'; +import { Course } from '../../types'; +import { CourseCard } from './CourseCard/index'; +import { coursesContext } from '../../contexts/CoursesProvider'; interface RightBarProps { - onGroupMouseOver: (id: string, name: string) => void; + onGroupMouseOver: (id: number, name: string) => void; } export default function RightBar({ onGroupMouseOver }: RightBarProps) { const [selectedCardId, setSelectedCardId] = useState(null); - const lecturesContext = useContext(LecturesContext); + const { courses } = useContext(coursesContext)!; const onCardClick = (e: React.MouseEvent) => { const target = e.currentTarget as HTMLElement; @@ -24,9 +24,9 @@ export default function RightBar({ onGroupMouseOver }: RightBarProps) { Hubert Wrzesiński

Semestr zimowy 2020/2021 - {lecturesContext?.lectures.map((lecture, index) => ( - ( + { - const { choosenGroups } = useContext(LecturesContext)!; + const { choosenGroups } = useContext(coursesContext)!; const [groupsMappedToEvents, setGroupsMappedToEvents] = useState([]); - // const groups: Array = [{ id: "5", day: "4", time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3" }, - // { id: "28", day: "1", time: "13.45", lecturer: "dr Barbara Kołodziejczak", room: "D-3" }, - // { id: "69", day: "4", time: "15.30", lecturer: "dr Karol Gierszewski", room: "A2-3" }]; + // const groups: Array = [{ id: "5", day: "4", time: "11.45", courser: "dr Dorota Blinkiewicz", room: "A2-3" }, + // { id: "28", day: "1", time: "13.45", courser: "dr Barbara Kołodziejczak", room: "D-3" }, + // { id: "69", day: "4", time: "15.30", courser: "dr Karol Gierszewski", room: "A2-3" }]; interface GroupTimeToEventRowMapping { [time: string]: number; } const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = { - '8.15': 0, + '08.15': 0, '10.00': 1, '11.45': 2, '13.45': 3, diff --git a/src/components/Scheduler/SchedulerRow/index.tsx b/src/components/Scheduler/SchedulerRow/index.tsx index 79cd7e8..ad8e434 100644 --- a/src/components/Scheduler/SchedulerRow/index.tsx +++ b/src/components/Scheduler/SchedulerRow/index.tsx @@ -39,7 +39,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler id={`eventRow${indexRow}eventCol${eventIndex}`} > {groups.map((group, index) => - parseInt(group.day) === eventIndex ?
{groups[index]?.lecturer}
: null, + group.day === eventIndex ?
{groups[index]?.lecturer}
: null, )} ))} diff --git a/src/components/TopBar/Results/index.scss b/src/components/TopBar/Results/index.scss index 9c93f91..e1d64fe 100644 --- a/src/components/TopBar/Results/index.scss +++ b/src/components/TopBar/Results/index.scss @@ -1,4 +1,4 @@ -.lecture { +.course { position: relative; z-index: 10; padding: 5px; @@ -7,7 +7,7 @@ font-size: 18px; font-family: Lato; } -.lecture:hover{ +.course:hover { background-color: #d4b851; cursor: pointer; } @@ -21,4 +21,3 @@ .top-bar__input-field { width: 100%; } - diff --git a/src/components/TopBar/Results/index.tsx b/src/components/TopBar/Results/index.tsx index 8b8b75c..b1a94f8 100644 --- a/src/components/TopBar/Results/index.tsx +++ b/src/components/TopBar/Results/index.tsx @@ -3,59 +3,48 @@ import axios from 'axios'; import { Input } from '@material-ui/core'; import './index.scss'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import { LecturesContext } from '../../../contexts/LecturesProvider'; -import { Lecture, Group } from '../../../types'; +import { coursesContext } from '../../../contexts/CoursesProvider'; +import { Course, Group } from '../../../types'; -interface LectureData { +interface courseData { name: string; id: number; } export const Results: React.FC = () => { const [input, setInput] = useState(''); - const [lecturesData, setLecturesData] = useState>([]); - const [filteredLecturesData, setFilteredLecturesData] = useState>([]); + const [coursesData, setcoursesData] = useState>([]); + const [filteredcoursesData, setFilteredcoursesData] = useState>([]); const [open, setOpen] = React.useState(false); - const lecturesContext = useContext(LecturesContext)!; - - //fetch lectures ids and lectures names - // useEffect(() => { - // const fetchData = async () => { - // const {lecturesData } = await axios.get( - // `http://localhost:1287/getCourses?name=""` - // ); - // setLecturesData(lecturesData); - // }; - // fetchData(); - // }, []); + const { courses, addCourse } = useContext(coursesContext)!; useEffect(() => { const fetchData = async () => { - const results = await axios.get(`http://localhost:1287/getCourses?name=`); - const lecturesData = results.data.map((result: { id: number; name: string }) => ({ + const results = await axios.get(`http://localhost:1285/getCourses`); + const coursesData = results.data.map((result: { id: number; name: string }) => ({ id: result.id, name: result.name, })); - setLecturesData(lecturesData); + setcoursesData(coursesData); }; fetchData(); }, []); useEffect(() => { - const names = lecturesContext.lectures.map((lecture) => lecture.name); - const filterLectures = (value: string) => { - let filteredLectures = lecturesData.filter( - (lecture) => lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name), + const names = courses.map((course) => course.name); + const filtercourses = (value: string) => { + let filteredcourses = coursesData.filter( + (course) => course.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(course.name), ); - setFilteredLecturesData(filteredLectures); + setFilteredcoursesData(filteredcourses); }; - filterLectures(input); + filtercourses(input); }, [input, open]); - const getLecturesById = async (id: string) => { - const { data } = await axios.get(`http://localhost:1287/getClassesByCourseId?id=${id}`); + const getGroupsByCourseId = async (id: string) => { + const { data } = await axios.get(`http://localhost:1285/getCourseGroups?id=${id}`); return data; }; @@ -71,27 +60,34 @@ export const Results: React.FC = () => { setOpen(false); }; - const onLectureClick = async (e: React.MouseEvent) => { + const onCourseClick = async (e: React.MouseEvent) => { const target = e.currentTarget as HTMLElement; - const id = target.id; - const result = await getLecturesById(id); - - let groups: Array = []; - let lecture = { groups: groups } as Lecture; - lecture.id = result[0].course.id; - lecture.name = result[0].course.name; - for (let i = 0; i < result.length; i++) { - let group = {} as Group; - group.id = result[i].id; - group.day = result[i].day; - group.time = result[i].time; - group.lecturer = result[i].lecturer.title + ' ' + result[i].lecturer.name + ' ' + result[i].lecturer.surname; - group.room = result[i].room.trim(); - lecture.groups.push(group); + if (target.id && target.textContent) { + const id = target.id; + const name = target.textContent; + const groups = await getGroupsByCourseId(id); + const course: Course = { + name: name, + id: parseInt(id), + groups: groups, + }; + addCourse(course); + setOpen(false); } - lecturesContext.addLecture(lecture); - setOpen(false); + // let groups: Array = []; + // let course = { groups: groups } as course; + // course.id = result[0].course.id; + // course.name = result[0].course.name; + // for (let i = 0; i < result.length; i++) { + // let group = {} as Group; + // group.id = result[i].id; + // group.day = result[i].day; + // group.time = result[i].time; + // group.courser = result[i].courser.title + ' ' + result[i].courser.name + ' ' + result[i].courser.surname; + // group.room = result[i].room.trim(); + // course.groups.push(group); + // } }; return ( @@ -107,9 +103,9 @@ export const Results: React.FC = () => { /> {open ? (
- {filteredLecturesData.map((lecture, index) => ( -
-

{lecture.name}

+ {filteredcoursesData.map((course, index) => ( +
+

{course.name}

))}
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx new file mode 100644 index 0000000..6993e93 --- /dev/null +++ b/src/contexts/CoursesProvider.tsx @@ -0,0 +1,32 @@ +import React, { useState, createContext, useEffect } from 'react'; +import { Course, Group } from '../types'; + +interface courseContext { + courses: Array; + choosenGroups: Array; + addCourse: (courses: Course) => void; + addGroup: (group: Group) => void; +} +export const coursesContext = createContext(null); + +interface CoursesProviderProps { + children: React.ReactNode; +} + +export const CoursesProvider = ({ children }: CoursesProviderProps) => { + const [courses, setCourses] = useState>([]); + const [choosenGroups, setChoosenGroups] = useState>([]); + + const addCourse = (course: Course) => { + setCourses([...courses, course]); + }; + const addGroup = (group: Group) => { + setChoosenGroups([...choosenGroups, group]); + }; + + return ( + + {children} + + ); +}; diff --git a/src/contexts/LecturesProvider.tsx b/src/contexts/LecturesProvider.tsx deleted file mode 100644 index be7f04a..0000000 --- a/src/contexts/LecturesProvider.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState, createContext } from 'react'; -import { Lecture, Group } from '../types'; - -interface LectureContext { - lectures: Array; - choosenGroups: Array; - addLecture: (lectures: Lecture) => void; - addGroup: (group: Group) => void; -} -export const LecturesContext = createContext(null); - -interface LecturesProviderProps { - children: React.ReactNode; -} - -export const LecturesProvider = ({ children }: LecturesProviderProps) => { - const [lectures, setLectures] = useState>([]); - const [choosenGroups, setChoosenGroups] = useState>([]); - - const addLecture = (lecture: Lecture) => { - setLectures([...lectures, lecture]); - }; - const addGroup = (group: Group) => { - setChoosenGroups([...choosenGroups, group]); - }; - - return ( - - {children} - - ); -}; diff --git a/src/contexts/reducers.ts b/src/contexts/reducers.ts index bb8b250..c936812 100644 --- a/src/contexts/reducers.ts +++ b/src/contexts/reducers.ts @@ -1,8 +1,6 @@ export enum Types { - addLecture = 'ADD_LECTURE', - removeLecture = 'REMOVE_LECTURE', - addGroup = 'ADD_GROUP', - removeGroup = 'ADD_GROUP', addCourse = 'ADD_COURSE', - removeCourse = 'REMOVE_COURSE', + removecourse = 'REMOVE_COURSE', + addGroup = 'ADD_GROUP', + removeGroup = 'REMOVE_GROUP', } diff --git a/src/index.tsx b/src/index.tsx index 57d769e..9c2e4c8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,17 +2,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { App } from './App'; import { CASProvider } from './contexts/CASProvider'; -import { LecturesProvider } from './contexts/LecturesProvider'; +import { CoursesProvider } from './contexts/CoursesProvider'; import { GlobalStyles } from './styles/GlobalStyles'; ReactDOM.render( <> - + - + , document.getElementById('root'), ); diff --git a/src/types/index.ts b/src/types/index.ts index d4aa768..d514202 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,16 +1,24 @@ +export enum GroupType { + course = 'course', + CLASS = 'class', +} + export interface Group { - id: string; - day: string; + id: number; + day: number; time: string; lecturer: string; room: string; + groupType: GroupType; + capacity?: number; } -export interface Lecture { - id?: number; + +export interface Course { + id: number; name: string; groups: Array; } -export interface LectureInit { +export interface courseInit { name: string; id: number; }