Refactor again
This commit is contained in:
parent
48992b7e04
commit
3fba8a4a23
Before Width: | Height: | Size: 535 B After Width: | Height: | Size: 535 B |
50
src/components/RightBar/CourseCard/index.tsx
Normal file
50
src/components/RightBar/CourseCard/index.tsx
Normal file
@ -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 (
|
||||
<div className="class" onClick={onCardClick} id={id}>
|
||||
<div className="class__name">{course.name}</div>
|
||||
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
|
||||
{courses.map((course, index) => (
|
||||
<>
|
||||
{course.groups.map((group, index) => (
|
||||
<div
|
||||
className="class__group"
|
||||
key={index}
|
||||
onMouseOver={() => onGroupMouseOver(group.id, course.name)}
|
||||
onClick={() => onGroupClick(group)}
|
||||
>
|
||||
<p>
|
||||
{group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>{' '}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</Collapse>
|
||||
<div onClick={onCardClick} id={id}>
|
||||
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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 (
|
||||
<div className="class" onClick={onCardClick} id={id}>
|
||||
<div className="class__name">{lecture.name}</div>
|
||||
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
|
||||
{lecture.groups.map((group, index) => (
|
||||
<div
|
||||
className="class__group"
|
||||
key={index}
|
||||
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
|
||||
onClick={() => onGroupClick(group)}
|
||||
>
|
||||
<p>
|
||||
{group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>{' '}
|
||||
</div>
|
||||
))}
|
||||
</Collapse>
|
||||
<div onClick={onCardClick} id={id}>
|
||||
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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<string | null>(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<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</div>
|
||||
{lecturesContext?.lectures.map((lecture, index) => (
|
||||
<LectureCard
|
||||
lecture={lecture}
|
||||
{courses.map((course, index) => (
|
||||
<CourseCard
|
||||
course={course}
|
||||
key={index}
|
||||
id={index.toString()}
|
||||
onGroupMouseOver={onGroupMouseOver}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { SchedulerRow } from '../SchedulerRow';
|
||||
import { LecturesContext } from '../../../contexts/LecturesProvider';
|
||||
import { coursesContext } from '../../../contexts/CoursesProvider';
|
||||
import { Group } from '../../../types';
|
||||
|
||||
interface SchedulerEventsProps {
|
||||
@ -9,20 +9,20 @@ interface SchedulerEventsProps {
|
||||
}
|
||||
|
||||
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
|
||||
const { choosenGroups } = useContext(LecturesContext)!;
|
||||
const { choosenGroups } = useContext(coursesContext)!;
|
||||
|
||||
const [groupsMappedToEvents, setGroupsMappedToEvents] = useState<any>([]);
|
||||
|
||||
// const groups: Array<Group> = [{ 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<Group> = [{ 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,
|
||||
|
@ -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 ? <div key={index}>{groups[index]?.lecturer}</div> : null,
|
||||
group.day === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
|
||||
)}
|
||||
</SchedulerEvent>
|
||||
))}
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -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<string>('');
|
||||
const [lecturesData, setLecturesData] = useState<Array<LectureData>>([]);
|
||||
const [filteredLecturesData, setFilteredLecturesData] = useState<Array<LectureData>>([]);
|
||||
const [coursesData, setcoursesData] = useState<Array<courseData>>([]);
|
||||
const [filteredcoursesData, setFilteredcoursesData] = useState<Array<courseData>>([]);
|
||||
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<Group> = [];
|
||||
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<Group> = [];
|
||||
// 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 ? (
|
||||
<div className="dropdown">
|
||||
{filteredLecturesData.map((lecture, index) => (
|
||||
<div className="lecture" key={index} id={String(lecture.id)} onClick={onLectureClick}>
|
||||
<p>{lecture.name} </p>
|
||||
{filteredcoursesData.map((course, index) => (
|
||||
<div className="course" key={index} id={String(course.id)} onClick={onCourseClick}>
|
||||
<p>{course.name} </p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
32
src/contexts/CoursesProvider.tsx
Normal file
32
src/contexts/CoursesProvider.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React, { useState, createContext, useEffect } from 'react';
|
||||
import { Course, Group } from '../types';
|
||||
|
||||
interface courseContext {
|
||||
courses: Array<Course>;
|
||||
choosenGroups: Array<Group>;
|
||||
addCourse: (courses: Course) => void;
|
||||
addGroup: (group: Group) => void;
|
||||
}
|
||||
export const coursesContext = createContext<courseContext | null>(null);
|
||||
|
||||
interface CoursesProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
const [courses, setCourses] = useState<Array<Course>>([]);
|
||||
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
|
||||
|
||||
const addCourse = (course: Course) => {
|
||||
setCourses([...courses, course]);
|
||||
};
|
||||
const addGroup = (group: Group) => {
|
||||
setChoosenGroups([...choosenGroups, group]);
|
||||
};
|
||||
|
||||
return (
|
||||
<coursesContext.Provider value={{ courses, choosenGroups, addCourse, addGroup }}>
|
||||
{children}
|
||||
</coursesContext.Provider>
|
||||
);
|
||||
};
|
@ -1,32 +0,0 @@
|
||||
import React, { useState, createContext } from 'react';
|
||||
import { Lecture, Group } from '../types';
|
||||
|
||||
interface LectureContext {
|
||||
lectures: Array<Lecture>;
|
||||
choosenGroups: Array<Group>;
|
||||
addLecture: (lectures: Lecture) => void;
|
||||
addGroup: (group: Group) => void;
|
||||
}
|
||||
export const LecturesContext = createContext<LectureContext | null>(null);
|
||||
|
||||
interface LecturesProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const LecturesProvider = ({ children }: LecturesProviderProps) => {
|
||||
const [lectures, setLectures] = useState<Array<Lecture>>([]);
|
||||
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
|
||||
|
||||
const addLecture = (lecture: Lecture) => {
|
||||
setLectures([...lectures, lecture]);
|
||||
};
|
||||
const addGroup = (group: Group) => {
|
||||
setChoosenGroups([...choosenGroups, group]);
|
||||
};
|
||||
|
||||
return (
|
||||
<LecturesContext.Provider value={{ lectures, choosenGroups, addLecture, addGroup }}>
|
||||
{children}
|
||||
</LecturesContext.Provider>
|
||||
);
|
||||
};
|
@ -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',
|
||||
}
|
||||
|
@ -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(
|
||||
<>
|
||||
<LecturesProvider>
|
||||
<CoursesProvider>
|
||||
<CASProvider>
|
||||
<GlobalStyles />
|
||||
<App />
|
||||
</CASProvider>
|
||||
</LecturesProvider>
|
||||
</CoursesProvider>
|
||||
</>,
|
||||
document.getElementById('root'),
|
||||
);
|
||||
|
@ -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<Group>;
|
||||
}
|
||||
export interface LectureInit {
|
||||
export interface courseInit {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user